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

@font-face

дава възможност за зареждане на избран от дизайнера шрифт. {font-family: 'WebFont'; - Задавате има на шрифта, което име ще викате където ви е нужно.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+ */ - Mozzila / 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 за това, че са отделили от времето си за да направят този интересен иструмент.