10 найпопулярніших правил CSS3
У цьому огляді представлено 10 найпопулярніших правил CSS3, які активно використовуються в різних проектах.
Більшість правил вимагають використання префікса для відповідного браузера:
-moz-для браузерів, побудованих з урахуванням механізму Mozilla;
-webkit-для браузерів, побудованих з урахуванням механізму Webkit.
1. Закруглені кути
Для створення округлених кутів рамки навколо елемента замість 4-х зображень використовується команда:
IE не підтримує команду для виведення округлених кутів.
2. Тінь елемента
Для створення тіні від елемента використовується команда box-shadow із префіксом для браузера. Потрібно задати три параметри та колір ефекту:
- Усунення тіні по горизонталі - позитивне значення означає зміщення вправо, а негативне - вліво.
- Усунення тіні по вертикалі - позитивне значення для зміщення тіні вниз, а негативне - вгору.
- Ступінь розмиття тіні.
IE не підтримує команду виводу тіні елемента.
3. Прозорість
Прозорість завжди була трюком. Різні браузери підтримували прозорість за допомогою різних команд. Команда RGBA сприяє крос-браузерності коду та має більш логічний синтаксис. У ній використовується 4 параметри: перший, другий та третій є відповідно значеннями для колірних каналів червоного, зеленого та синього (0-255), а четвертий параметр – значення для альфа каналу або прозорості (0-1).
Для команди RGBA не потрібно використовувати префікси браузерів (-moz-, -webkit-):
Властивість background-color встановить ніжно-блакитний колір для фону з прозорістю 50% у браузерах, які підтримують команду RGBA.
На жаль, Internet Explorer також реалізує властивість background-color, але не сприймає команду RGBA. У прикладі для відключення використання правила в IE використовується псевдо-селектор last-child :
Команда RGBA не підтримується IE.
Здатність використовувати колонки була додана CSS3. Замість контейнера з плаваючими елементами можна встановити кількість колонок, їх ширину та правило форматування:
Колонка номер 1
Колонка номер 2
5. Декілька зображень для фону
Використання фонових зображень завжди було обмежено тим фактом, що CSS допускали лише одне фонове зображення одного елемента. CSS3 допускає використання кількох зображень, які потрібно перерахувати через кому.
Для розміщення зображення праворуч та ліворуч можна використовувати такі команди:
Цей набір команд буде неправильно виводитися в Internet Explorer, тому що він не сприймає 2 фонові зображення для одного елемента. Тому змінимо код, щоб ігнорувати IE:
Використання декількох фонових зображень може суттєво змінити підхід до розробки дизайну.
6. Модель прямокутника
Кожен елемент на сторінці відображається відповідно до моделі прямокутника. Стандартна модель прямокутника W3C тепер змінюється і встановлюється за допомогою команди CSS3 box-sizing: content-box .
Цей елемент має ширину 200px і відступи 10px, отже, загальна ширина його становить 220px за умови використання стандартної моделі прямокутника.
Цей елемент також має ширину 200px та відступи 10px, але відступи включені в ширину елемента, тому воно становить 200px.
Властивості обведення ідентичні властивостям рамки, але додаткове зміщення дозволяє зміщувати обведення назовні або всередину елемента:
За допомогою комбінації рамкиі обведення можна створювати навколо елемента дві рамки різного кольору.
8. Фонові градієнти
Safari використовує концепцію зі значеннями color-stop:
Градієнт може містити багато значень color-stop, що дозволяє організовувати складні композиції.
9. Обертання
Цю команду добре використовуватиме графічних елементів, а текст може бути сильно деформований у процесі виведення.
10. Анімації
Останній пункт нашого огляду діє лише у Safari та Firefox 4 beta, які підтримують трансформацію елементів. Трансформації включають обертання, переходи між елементами, дозволяють задавати часові параметри для перетворення та багато іншого!
Простим прикладом може бути зміна ефекту при наведенні курсору миші посилання: плавне зміна кольору від одного до другого.
Спочатку визначаємо колір посилання:
Встановлюємо колір та властивості для анімації за допомогою transition-property: