В наши дни всичко се развива със скорост еквивалентна на тази, с която 5-годишно хлапе разлиства първия си "Плейбой". В това число имам предвид естествено и уеб технологиите. Докато преди няколко месеца или максимум година CSS3 беше мит за повечето от нас, то в наши дни новият стандарт навлиза сериозно в употреба, естествено с леки въздръжки. Всеки професионалист, който пише CSS, би трябвало винаги да е в крак с новостите, за да улеснява това живота му. Точно за това прецених, че за аудиторията ни ще бъде полезно да прочетете нещо за CSS3 на нашите страници. Въпросното "нещо" реших да бъде небезизвестната таб-навигация, защото се среща на доста места и може да намери голямо приложение.
В този урок се опитах да внедря не една, а няколко интересни CSS3 глезотийки, които няма да ви спестят код, но ще елиминират нуждата, както от картинки, така и от javascript за по-обикновените ефекти. Общо взето ще научите как да направите заоблени ъгли, как да сложите сянка на елемент, как да направите градиент и гвоздеят на програмата - как да анимирате. Приятно четене!
Ето нагледно с какво ще се занимаваме днес. Преди да кликнете на демото обаче, имайте предвид, че по-голямата част от ефектите са видими само под актуалните версии на Chrome и Safari. Всъщност в самото демо съм написал кое се поддържа и кое не.
| View DemoDownload |
Надявам се да не се стряскате от големината на статията. Нещата наистина са малко по-сложни (по-скоро, защото са нови), но точно за това съм се опитал да ги обясня стъпка по стъпка, надълго и нашироко. Сигурен съм, че на един етап ще се провикнете "Шшшш, алоооу, това ли наричаш ти първи стъпки?!". Наистина трябва да сте малко по-навътре, но все пак концепцията да учите CSS3 без да знаете CSS2 е неприемлива. Точно за това приемам, че имате матр'ял зад гърба си и просто надграждате знания. Освен това смятам, че когато се учи нещо ново е редно да си дадете зор максимално, т.е. да се захванете с някаква по-сериозна задача. Според мен така нещата се научават най-бързо.
И така, стига толкова празни приказки - нека продължим към същината! Вече видяхте крайния резултат, но все пак нека с две думи обясня какво ще трябва да направим днес. Първоначално ще се занимаем с по-елементарни неща от типа на заоблени ъгли, заради които по принцип би се наложило да се режат картинки. После ще се научим как да слагаме сенки на елементите, за да изглеждат нашите табове изникващи зад съдържанието. Впоследствие ще направим още две неща. Първо ще анимираме движението на табовете и второ ще направим отново анимация, но този пък на сменящ се бекграунд. И всичко това само с CSS3 и без грам картинки или javascript!
Както винаги в началото започваме с чист HTML.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <title>Първи стъпки в CSS3 или как да създадем анимирани табове!</title> </head> <body> <div id="container"> <div id="nav"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Articles</span></a></li> <li><a href="#"><span>News</span></a></li> <li><a href="#"><span>Gallery</span></a></li> <li><a href="#"><span>Video</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> <div class="clr"></div> </div> <div id="content"> <h2>CSS3 Супер-мега-хипер яко меню!</h2> <ul class="features"> <li><strong>box-shadow</strong> - Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10.5+</li> <li><strong>RGBA</strong> - Chrome 4+, Safari 4+, Firefox 3+, Opera 10+</li> <li><strong>border-radius</strong> - Chrome 4+, Safari 4+, Firefox 3+, Opera 10.5+</li> <li><strong>transitions</strong> - Chrome 4+, Safari 4+, Firefox 3.7+, Opera 10.5+</li> </ul> <p>Имайте предвид, че крайният резултат ще бъде видим изцяло под Chrome и Safari. Останалите браузъри имат пропуски в поддръжката, които се надяваме скоро да бъдат поправени. Разбира се, това не пречи да сте подготвени за CSS3 цунамито, което се заформя. Експериментирайте и се опитвайте да налагате новите стандарти, защото те облекчават живота ви. Изречението което четете в момента е поставено просто, за да има още малко текст, така че едва ли ще намерите особен смисъл в него и честно казано по-добре да не го четете.</p> </div> </div> </body> </html>
Предполагам, че дотук няма нещо неясно - стандартният списък, оформящ менюто и малко съдържание за вкус. Ето и CSS-ът, с който започваме.
CSS
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Tahoma, Verdana, sans-serif;
line-height: 22px;
background: #f2f2f2;
color: #666;
}
ul { margin: 0; padding: 0; list-style: none; }
a, a:link, a:visited { outline: none; text-decoration: none; color: #666; }
a:hover { text-decoration: none; }
p { margin: 0 0 10px; }
.clr { clear: both; height: 0; line-height: 0; font-size: 0; }
#container {
padding: 50px 0;
}
#content {
width: 580px;
margin: 0 auto;
padding: 10px;
background: #fff;
border: 3px solid #8cc709;
}
#content h2 {
margin: 4px 0 10px;
}
ul.features {
margin: 0 0 10px;
}
#nav {
width: 580px;
margin: 0 auto;
}
#nav li {
float: left;
margin: 0 4px 0 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
position: relative;
float: left;
color: #fff;
border: 1px solid #8cc709;
border-bottom: none;
background: #8dc70a;
}
#nav li a span {
display: block;
text-align: center;
padding: 4px 12px;
border-top: 1px solid #c4f05f;
cursor: pointer;
}
След този код отгоре, би трябвало да виждате картинката отдолу на всички браузъри по един и същ начин.
Имайте предвид, че ползвайки CSS3 е добре да бъдете застрахован. Това ще рече да не отписвате напълно потребителите с браузъри, които не поддържат стандарта. Ето защо дори те трябва да виждат нормално всичко, естествено без допълнителните графични оргазми. По време на урока ще отбелязвам моментите, в които дадено нещо спира да работи под определен браузър. При Internet Explorer това се случва още в началото, така че е по-добре тях изобщо да ги отпишете. Няма да е лошо да хвърлите едно око на тази таблица, която показва какво от CSS3 и HTML 5 се поддържа от браузърите в момента. Всъщоност тя трябва да стане неразделна част от вашето CSS3 ежедневие.
Така, следващата стъпка, която ще направим вече е свързана с CSS3. Ще сложим една лекичка сянка около div id="content" и самият него ще го поставим над табовете, което лежи в основите на "изскачащия" ефект, който гоним. За да не копирам едни и същи неща по 100 пъти, а и за да виждате по-лесно кое е новото, отсега нататък ще пиша само новият код, който вие ще добавяте към вече съществуващия.
#content {
position: relative; /* С този и следващия ред поставяме div-а над табовете. */
z-index: 10;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1); /* Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1); /* Safari & Chrome */
box-shadow: 0 0 10px rgba(0,0,0,.1); /* Opera */
}
Сянката в CSS3 доста наподобява тази на Photoshop например, което е огромен плюс, тъй като не се налага да се занимаваме с картинки. Пропъртито, на което обръщаме внимание е box-shadow. Както виждате то съществува в три реда, защото за момента всеки браузър има собствен начин на изписване, което е доста гадничко, тъй като е излишно писане и рискът да сбъркате се увеличава. Закоментирал кой ред за кой браузър се отнася. Какво означават обаче цифричките след box-shadow? Първата цифра (в случая нула) е равна на позицията на сянката хоризонтално (по оста Х), втората - вертикално (по оста Y), а третата е степента на замъгляване (blur). Както виждате аз не искам сянката да ходи никъде, а просто да симулира едно леко затихване, за да се почувстват табовете на заден план. Нека не забравяме и четвъртата стойност, която представлява цветът на сянката. Обикновено може да го изпишете със hex, например #555, но аз съм използвал още един от бонусите на CSS3 - RGBA. "А"-то накрая идва от alpha, а това ще рече, че въпросното RGBA освен цветове съдържа в себе си и прозрачност чрез допълнителния алфа канал. В примера горе виждате RGB еквивалентно на #000 с прозрачност 0.1. Ако ви се чете малко повече, то тук може да намерите материали за box-shadow и rgba.
Сега ако отворите таблицата, която ви дадох по-горе ще обърнете внимание, че box-shadow се поддържа от Firefox 3.1+, Chrome 4+, Opera 10.5+ и Safari 4+. Internet Explorer е пас, както винаги. Иначе казано при браузърите, които не поддържат ефекта няма да намерите разлика. Ударете един F5, за да видите разликите. В случая с толкова висока прозрачност, сянката е почти незабележима, но мен ме устройва. Ако искате по-плътна - сменете стойността.
Следващият ефект, който ще трябва да постигнем са заоблените ъгли. Това е може би най-експлоатираното в CSS3 за момента, тъй като хората искат обли неща. Особено мъжете. С CSS3 може да избирате не само какъв да бъде радиусът на окръжността, но и на кой ъгъл какво число да съотвества. Вземете за пример пропъртито border - може да му задавате, както глобална стойност, така и за отделните страни (ширина, цвят, тип и пр.). На нас ще ни се наложи да заоблим първо div id="content" от всички страни, а после и самите табчета, но само в горните ъгли. За тази цел трябва да добавим няколко реда код във вече съществуващите селектори, които съм посочил надолу.
#content {
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari & Chrome */
border-radius: 6px; /* Opera */
}
#nav li a, #nav li a:link, #nav li a:visited {
-moz-border-radius-topleft: 5px; /* Firefox */
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px; /* Safari & Chrome */
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px; /* Opera */
border-top-right-radius: 5px;
}
#nav li a span {
-moz-border-radius-topleft: 5px; /* Firefox */
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px; /* Safari & Chrome */
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px; /* Opera */
border-top-right-radius: 5px;
}
Тук на фокус идва border-radius, заедно с неговите дружки, които, както сами виждате увеличават доста размера на кода, но какво да се прави... ще се надяваме след време всичко да се унифицира. Тук нещата мисля, че веднага стават ясни. Отново давам за пример Photoshop, където може да посочвате radius, когато създавате определен shape например. Идеята тук е същата и работи отлично. На div id="content" заобляме всички страни, а на табовете само горните ъгли. На span-a поставяме също border-radius, защото, ако забелязвате там има едно фино бордърче с по-светъл цвят, което малко пораздвижва таба. В момента не изглежда кой знае колко добре, но накрая създава приятен ефект. Ако всичко е наред дотук, би трябвало да виждате това:
Тук отново можем да наплюнчим палец и да разлистим таблицата горе, търсейки за border-radius. Както виждате поддръжката е еквивалентна на тази с box-shadow, с малката разлика, че това пропърти е видимо от Firefox 3+ нагоре. Ако браузърът не поддържа border-radius, то ъглите ще си останат ръбати, но поне нищо няма да е счупено. Повече информация за border-radius ще намерите тук. А ако ви мързи да смятате или помните, може да ползвате този тул.
След като си имаме сянка и заоблени ъгли (които в интерес на истината вече не са ъгли!) е ред на малко градиент магия. Всъщност градиентите са част от CSS3, но все още са draft и по зададения от W3 синтаксис не работят под нито един браузър. За сметка на това обаче Webkit-базираните браузъри и Firefox (след версия 3.6) имат свои собствени начини за изобразяване на градиенти. И сега... дръжте се... Internet Explorer също го може! Т.е. за първи път досега само Opera изостава. Преглъщаме факта, отпиваме бира и добавяме четири реда CSS към span-a.
#nav li a span {
background: #8dc70a; /* За всички останали. */
background: -webkit-gradient(linear, left top, left bottom, from(#acda42), to(#8dc70a)); /* Safari & Chrome */
background: -moz-linear-gradient(top, #acda42, #8dc70a); /* Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acda42', endColorstr='#8dc70a'); /* IE 7 & 8 */
}
Бразузърите, които поддържат градиенти, както разбрахте са Safari, Chrome, Firefox, IE7 и IE8 (под IE6 не успях да го подкарам, а съм почти сигурен, че може). Останалите ще виждат солиден цвят. Точно за това е добре винаги да слагаме такъв, показвайки, че все пак мислим и за другите. На първия ред, както виждате съм поставил точно това - плътен цвят. Следващите редове пък оформят градиента за съответните браузъри. Виждате, че синтаксиса е различен, но идеята е сходна. Първо имаме тип на градиента, след това позициите, в които той започва и свършва и накрая от кой към кой цвят да става преливката. Тук, за да не изпадам в излишни обяснения, бих ви препоръчал да си поиграете със стойностите, за да схванете по-добре картинката. Освен това тук и тук има прекрасни уроци специално по темата.
В този момент нашите табове започват да приличат на нещо.
Сега е времето да ги пораздвижим. Може би някъде тук щях да крещя "jQueryyyyy", но не и този път. Сега ще се докоснем до по-хардкор способностите на CSS3, а именно Transitions. Но първо да добавим необходимия код и после ще разсъждаваме.
#nav li a, #nav li a:link, #nav li a:visited {
top: 4px; /* Табовете влизат под съдържанието. */
-moz-transition: top 0.12s linear; /* Firefox 3.7+ */
-webkit-transition: top 0.12s linear; /* Safari & Chrome */
-o-transition: top 0.12s linear; /* Opera */
}
#nav li a:hover {
top: 0; /* При ховър, табовете се качват нагоре. */
}
Кодът всъщност изобщо не е много, но има няколко особености. Първо, както виждате добавяме top: 4px, за да влезнат табовете малко по-надолу (все пак трябва да изскачат после). При ховър нулираме стойността и така се получава желаният ефект. Дотук с обичайния CSS 2.1, ред е нa CSS3. Предполагам се ориентирате за кои от редовете отговаря той. Нека анализираме например -moz-transition: top 0.12s linear; и видим какво се крие зад тези стойности. В случая top е стойноста, която анимираме, т.е. тя е 4px и при ховър трябва да стане 0px. Ако анимираме opacity (както ще направим след малко), то при ховър ще ни трябва opacity и на мястото на top отново ще седи opacity. Може да го запомните и малко по-шантаво - там стои променливата. Следващата стойност 0.12s е времето, за което това се случва, а последната е методът. Методите освен линеен могат да бъдат ease-in, ease-out, cubic-bezier и др., които е добре да пробвате лично. Ако сте изпълнили всичко до момента, вместо стандартното прескачане на стойности (от 4px към 0px), ще наблюдавате мазен преход.
Отваряме познатата табличка, за да видим къде би трябвало да работи този ефект. Търсим CSS Transitions. Оказва се, че Chrome 4+, Safari 4+ и Opera 10.5+ са ОК с това. От друг източник разбрах, че работи и под Firefox 3.7+.
И тъй като няма как да ви покажа анимацията, разчитам, че сте свършили всичко дотук и имате съвсем прилична таб-навигация. Т.е. ако спрете да четете ще останете съвсем доволни. Аз обаче искам да пресъздам всичко, което е показано на демото в началото на статията, а това включва и анимация при смяната на бекграунда при ховър. Това се оказа нещо доста любопитно откъм изпълнение, така че внимавайте в картинката. В момента на span-а имаме бекграунд, който е градиент. Най-логичното нещо е при ховър да поставим градиент с новите стойности и да използваме transition метода, за да ги анимираме. Проблемът е, че от W3 споменават, че градиенти не се поддържат при background пропърти, а само цвят. След няколко часови проби, реших да действам по друг начин и започнах да подбирам различно пропърти. Спрях се на opacity. Методът, който ще ви покажа е малко шантав, но работи безотказно. Целта е да дублираме съдържанието на линка <a> и намиращият се вътре <span>. Точно за това от вас искам да копирате текста и на двете места, ето така:
<ul> <li><a href="#">Home<span>Home</span></a></li> <li><a href="#">Articles<span>Articles</span></a></li> <li><a href="#">News<span>News</span></a></li> <li><a href="#">Gallery<span>Gallery</span></a></li> <li><a href="#">Video<span>Video</span></a></li> <li><a href="#">Contact<span>Contact</span></a></li> </ul>
Сега имате дублирано съдържание и резултатът са счупени табове. Следващата ни цел е да поставим <span>-а точно върху <a>-то. Линкът, както виждате е релативен, така че е необходимо да позиционираме спан-а абсолютно в него и да му дадем максимални стойности на width и height, за да го изпълни (в момента е display: block, но той не работи при position: absolute). Освен това е необходимо да коригираме малко padding-a, тъй като не ни е нужен на спана. И така, ето обновените стойности:
#nav li a, #nav li a:link, #nav li a:visited {
padding: 5px 12px;
}
#nav li a span {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Разпъваме на макс! */
height: 100%; /* Разпъваме на макс! */
padding: 4px 0 0;
}
Сега вече всичко е наред и би трябвало да изглежда, както преди. След като имаме позициониран <span> върху <a>, остава само да направим transition-a. Т.е. искаме да скрием спана докато таба изскача и така да видим по-тъмния (да речем) бекграунд, който ще сложим на <a>-то. Нека действаме стъпка по стъпка. Първо поставяме новия градиент на линка:
#nav li a, #nav li a:link, #nav li a:visited {
background: -webkit-gradient(linear, left top, left bottom, from(#acda42), to(#76aa00)); /* Safari & Chrome */
background: -moz-linear-gradient(top, #acda42, #76aa00); /* Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acda42', endColorstr='#76aa00'); /* IE 7 & 8 */
}
След това, тъй като ще сменяме opacity-то на спан-а, трябва да му добавим и транзишън:
#nav li a span {
-moz-transition: opacity 0.5s linear; /* Firefox 3.7+ */
-webkit-transition: opacity 0.5s linear; /* Safari & Chrome */
-o-transition: opacity 0.5s linear; /* Opera */
}
Тук времето за изпълняване на анимацията е половин секунда, за да се види все пак ефекта. Сега ако "освежите" страницата си все още няма да намерите разлика, защото остана едно единствено нещо - при ховър спанът трябва да се скрива.
#nav li a:hover span {
opacity: 0;
}
В случая текстът на двата елемента върви ръка за ръка и не може да усетите разликата при него, а наблюдавате само сменящия се градиент за бекграунд. Ако не виждате ефекта добре, може да удължите времето за изпълнение.
Това е всичко! Равносметката е, че използваните техники по-горе се представят отлично под Chrome и Safari, а Firefox и Opera са една идея по-назад. Всички от семейство Internet Explorer-ови се дънят, но поне изглеждат нормално и без ефекти. Естествено, това не важи за IE6, за който има две думи - EPIC FAIL.
Ето и финалните версии на HTML-a и CSS-a в "прибран" вид.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <title>Първи стъпки в CSS3 или как да създадем анимирани табове!</title> </head> <body> <div id="container"> <div id="nav"> <ul> <li><a href="#">Home<span>Home</span></a></li> <li><a href="#">Articles<span>Articles</span></a></li> <li><a href="#">News<span>News</span></a></li> <li><a href="#">Gallery<span>Gallery</span></a></li> <li><a href="#">Video<span>Video</span></a></li> <li><a href="#">Contact<span>Contact</span></a></li> </ul> <div class="clr"></div> </div> <div id="content"> <h2>CSS3 Супер-мега-хипер яко меню!</h2> <ul class="features"> <li><strong>box-shadow</strong> - Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10.5+</li> <li><strong>RGBA</strong> - Chrome 4+, Safari 4+, Firefox 3+, Opera 10+</li> <li><strong>border-radius</strong> - Chrome 4+, Safari 4+, Firefox 3+, Opera 10.5+</li> <li><strong>transitions</strong> - Chrome 4+, Safari 4+, Firefox 3.7+, Opera 10.5+</li> </ul> <p>Имайте предвид, че крайният резултат ще бъде видим изцяло под Chrome и Safari. Останалите браузъри имат пропуски в поддръжката, които се надяваме скоро да бъдат поправени. Разбира се, това не пречи да сте подготвени за CSS3 цунамито, което се заформя. Експериментирайте и се опитвайте да налагате новите стандарти, защото те облекчават живота ви. Изречението което четете в момента е поставено просто, за да има още малко текст, така че едва ли ще намерите особен смисъл в него и честно казано по-добре да не го четете.</p> </div> </div> </body> </html>
CSS
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Tahoma, Verdana, sans-serif;
line-height: 22px;
background: #f2f2f2;
color: #666;
}
ul { margin: 0; padding: 0; list-style: none; }
a, a:link, a:visited { outline: none; text-decoration: none; color: #666; }
a:hover { text-decoration: none; }
p { margin: 0 0 10px; }
.clr { clear: both; height: 0; line-height: 0; font-size: 0; }
#container {
padding: 50px 0;
}
#content {
position: relative; /* С този и следващия ред поставяме div-а над табовете. */
z-index: 10;
width: 580px;
margin: 0 auto;
padding: 10px;
background: #fff;
border: 3px solid #8cc709;
/* Заобляне на ъгли */
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari & Chrome */
border-radius: 6px; /* Opera */
/* Добавяме сянка */
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1); /* Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1); /* Safari & Chrome */
box-shadow: 0 0 10px rgba(0,0,0,.1); /* Opera */
}
#content h2 {
margin: 4px 0 10px;
}
ul.features {
margin: 0 0 10px;
}
#nav {
width: 580px;
margin: 0 auto;
}
#nav li {
float: left;
margin: 0 4px 0 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
position: relative;
top: 4px; /* Табовете влизат под съдържанието. */
float: left;
color: #fff;
border: 1px solid #8cc709;
border-bottom: none;
padding: 5px 12px;
/* Създаване на градиент */
background: #8dc70a; /* За всички останали. */
background: -webkit-gradient(linear, left top, left bottom, from(#acda42), to(#76aa00)); /* Safari & Chrome */
background: -moz-linear-gradient(top, #acda42, #76aa00); /* Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acda42', endColorstr='#76aa00'); /* IE 7 & 8 */
/* Заобляне на ъгли */
-moz-border-radius-topleft: 5px; /* Firefox */
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px; /* Safari & Chrome */
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px; /* Opera */
border-top-right-radius: 5px;
/* Анимиране на позицията */
-moz-transition: top 0.12s linear; /* Firefox 3.7+ */
-webkit-transition: top 0.12s linear; /* Safari & Chrome */
-o-transition: top 0.12s linear; /* Opera */
}
#nav li a span {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Разпъваме на макс! */
height: 100%; /* Разпъваме на макс! */
display: block;
text-align: center;
padding: 4px 0 0;
border-top: 1px solid #c4f05f;
cursor: pointer;
/* Създаване на градиент */
background: #8dc70a; /* За всички останали. */
background: -webkit-gradient(linear, left top, left bottom, from(#acda42), to(#8dc70a)); /* Safari & Chrome */
background: -moz-linear-gradient(top, #acda42, #8dc70a); /* Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acda42', endColorstr='#8dc70a'); /* IE 7 & 8 */
/* Заобляне на ъгли */
-moz-border-radius-topleft: 5px; /* Firefox */
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px; /* Safari & Chrome */
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px; /* Opera */
border-top-right-radius: 5px;
/* Анимиране на прозрачността */
-moz-transition: opacity 0.5s linear; /* Firefox 3.7+ */
-webkit-transition: opacity 0.5s linear; /* Safari & Chrome */
-o-transition: opacity 0.5s linear; /* Opera */
}
#nav li a:hover {
top: 0; /* При ховър, табовете се качват нагоре. */
}
#nav li a:hover span {
opacity: 0;
}
Като заключение бих искал да кажа няколко думи за бъдещето на CSS3. Ясно е, че той ще навлезе по домовете ни още през тази година. В момента поддръжката му е още поорязана, но в идните месеци това ще се промени, а какво по-добре от това да бъдете подготвени? В момента Chrome и Safari се справят чудесно, скоро очакваме Firefox 3.7 Final и дори 4.0, където всички проблеми с поддръжката в момента ще бъдат отстранени. Opera е един изключително сериозен браузър, който пуска ъпдейти през ден, така че и оттам очаквам в най-скоро време включване. Накрая е задаващият се IE9, който обещава да е на "ти" с CSS3. А, дано! Наистина новият CSS е могъщ и урока го показва - имаме анимации и какво ли още не без нито една картинка или javascript. Аз ще продължавам да дълбая, подготвяйки се за големия бум. Това означава да очаквате още уроци по темата, за да бъдете подготвени и вие! Все пак няма да откажа едно мнение за това какво мислите за урока и искате ли да виждате по-често подобни материали на страниците ни.
Loading ...
Супер е урока. Завършения код върви без проблеми и на Android телефон. Пробвах го на HTC Desire със стоковия браузър и имаше и анимации.
Интересно беше, че не успях да публикувам отговор през телефона. Колкото и пъти да цъках "Публикувай!" нищо не ставаше.
И аз го тествах на iPhone - работи. Там работи и "Публикувай"... много странно защо на HTC-то прави проблем.
Щото обичате да гирзете ябълки, не роботи... знам ви аз :D
http://jilion.com/sublime/video Тоя видео плеър си заслужава вниманието. Може да не е много по темата, но трябва повечко реклама на новите стандарти.
Първо едно уточнение - свойството -moz-border-radius е налично във Firefox поне от версия 1.5 насам. По нова време естествено единственото разумно приложение беше в разширения.
За да получиш изпъкналия вид на бутоните не е ли достатъчно да използваш border: 2px outset ...;? Не съм сигурен как работи в комбинация с border-radius.
И накрая - за да получиш ефекта с преливките, не става ли да зададеш на a елемента плътен фон, който да анимираш, а на span-а - rgba градиент под който да прозира анимирания фон?
@Георги Челебиев - е щото не можем едно да напишем сами? Ето как се прави, надявам се в скоро време да не се налага да се енкодва видеото два пъти, виж webM: http://www.webmproject.org/
За -moz-border-radius си прав, поддържа се дори от версия 1.0 на Firefox. Все пак го писах 3+, за да не контрастира толкова. То в интерес на истината някои пропъртита се поддържат от по-стари версии на останалите браузъри, но не работят напълно коректно или са им добавени нови функционалности. С -moz-border-radius-а също е така, защото след версия 3.5 на FF можем да се насладим на Elliptical Borders, нещо адски полезно!
Положението при outset-a е подобно на solid-а, но с малката разлика, че outset-a се държи по по-различен начин под всеки браузър. Не видях смисъл в употребата му.
За преливащия ефект твоето предложение също е удачен вариант. Малко е пипкава работата с цветовете заради прозрачността, но като цяло може да спести главоболия :).