CSS 3, моля…

Днес реших да отделя малко повече време и да драсна няколко реда за толкова чаканата от всички поддръжка на CSS 3, която на нас, дизайнерите, ще ни улесни живота с години. Всички колеги, които на този етап се занимават професионално, може би са запознати с някоi основни функции на новата версия на каскадните стилове, като border-radius и @font-face. Аз лично все по-усилено ги ползвам в проектите си.Преди няколко дни попаднах на страхотен сайт, в който може много лесно да се упражним и да се запознаем с още няколко нови и интересни функции на CSS 3, някои от тях са наистина страхотни и се надявам скоро всички модерни (chorme, firefox, opera, safari) браузери да го поддръжат, отбелязвам ЕДНАКВО! Малко помощ за по-начинаещите, преди да стартират:

@font-face

дава възможност за зареждане на избран от дизайнера шрифт. {font-family: 'WebFont'; - Задавате имe на шрифта, което име ще викате където Ви е нужно. src: url('myfont.eot'); /* IE6+ */ - След това задавате пътя до файла src: local('☺'), - … ако е локален url('myfont.woff') format('woff'), /* FF3.6 */url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,Opera10+ */} След което можете да го викнете по следният начин: H1 {Font-family: ‘WebFont’ , serif ;Font-size: 24px;} Със сигурност @font-face е моят личен фаворит, който използвам вече в почти всички проекти. Дава възможност да заредите .ttf файл (физически шрифт) от сървър или локално и да го ползвате (предимно за заглавни текстове) без да се притеснявате, че посетителят на сайта може да няма инсталиран на компютъра си въпросният шрифт.

border-radius

Заобляне на ръбовете на елемент ( ), за различните браузъри трябва да се дефинира поотделно.-moz-border-radius: 12px; /* FF1+ */ - Mozilla / moz/-webkit-border-radius: 12px; /* Saf3+, Chrome */ - Базирани на wekitborder-radius: 12px; /* Opera 10.5, IE 9 */ - Поддържащи тази дефиниция на CSS 3

box-shadow

Дава сянка на самия елемент. Интересно е за IE как се пише : filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */

Преливка на елемент

Тук нещата са доста разнообразни за различните елементи: background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ - Преливката е отдолу нагоре т.е. #444444 е най-долу .background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ - За Safari и Chrome има доста повече дефиниции, но основата е същата. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";

transform

Завъртане на елемент около собствената му ос. .box_rotate {-moz-transform: rotate(362.2deg); /* FF3.5+ */-o-transform: rotate(362.2deg); /* Opera 10.5 */-webkit-transform: rotate(362.2deg); /* Saf3.1+, Chrome */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4.024); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4.024)"; /* IE8 */} Приятно упражнение и не забравайте да споделите статията, ако Ви е харесала. Благодарим на Paul Irish и Jonathan Neal за това, че са отделили от времето си да направят този интересен иструмент.