CSS3 преходи и трансформации
03-09-2010
Здравейте! В този урок ще направя едно кратко представяне на двете може би най-интересни CSS3 нововъведения - преходи и трансформации. За да извършим един елементарен CSS преход, вече не са нужни големи JavaScript библиотеки като jQuery или script.aculo.us, а само един ред CSS код. Ето как става това:

-webkit-transition: height 2s ease-in-out; /* За webkit браузъри */
-moz-transition: height 2s ease-in-out; /* За Мозила */
-o-transition: height 2s ease-in-out; /* За Опера */
transition: height 2s ease-in-out; /* Уеб стандарт */

Параметрите биват:
- свойство за прехода или ключовата дума all за всички свойства
- продължителност в секунди
- easing - ease, linear, ease-in, ease-out, ease-in-out

Сега нищо не ни пречи да създадем един малък бонус за връзките в нашите сайтове.

a {
color: blue;

-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

a: hover {
color: green;
}

Браузърите, които поддържат CSS преходи ще променят цвета с анимация, а при не CSS3 браузърите промяната ще става по обичайния начин без анимация.


Другото CSS3 свойство, с което ще ви запозная са трансформациите:


-moz-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За Мозила */
-webkit-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За webkit браузъри */
-o-transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* За Опера */
transform: scale(2) rotate(2deg) translate(2px, 2px) skew(2deg, 2deg);/* Уеб стандарт */


Това свойство ни позволява да трансформираме елементите с познатите ни функции:
- scale - мащаб на елемента: 1 - елемента е без видима промяна, 1+ елемента е по-голям, 0>x<1 - елемента е по-малък
- rotate - завърта елемента на посочените градуси
- translate( x, y ) - премества елемента
- skew ( x, y ) - смачква елемента

Можете да експериментирате с трансформациите, както и да ги анимирате :)

Накрая няколко полезни линка:

W3C спецификация на свойствата:
http://www.w3.org/TR/css3-transitions/
http://www.w3.org/TR/css3-2d-transforms/

Инструмент за генериране на CSS3 свойства с максимална поддръжка
http://www.css3maker.com/

Пожелавам ви приятни занимания с новите свойства. И не забравяйте да ги ползвате правилно. Те трябва да бъдат един малък бонус за хората с модерни браузъри, а не на тях да се гради целия ви дизайн.

Един урок специално и само за web-tourist.net Exclamation





/ Трябва да сте регистриран за да напишете коментар /
От: headsho7
13:56 05-12-2010
нищо не става .. линка си седи линк .. какъв е проблема ?
От: I_V_O
15:43 06-12-2010
Линка винаги си е линк, но цвета му се сменя с анимация, ако браузърът ти поддържа това ;)
От: batmanabg
13:16 22-07-2011
Полезен урок.
1