5 кроссбраузерних сучасних рішень CSS3, градієнт, тінь, поворот, прозорість, інверсія

Привіт, любий читачу!

Сьогодні хочу познайомити Вас з кросбраузерними правилами CSS3, які чудово працюють у всіх браузерах та полегшують роботу кожного верстальника.

градієнт

Прозорість

Прозорість, досить, заїжджена тема для верстальника, але все-таки нагадаю, що для всіх нормальних (сучасних) браузерів правило прозорості виглядає так:

Значення визначається в межах від 0 до 1.

Для Internet Explorer 7 правило прозорості виглядає так:

Для Internet Explorer 8 правило прозорості виглядає так:

Для браузерів IE7-8 значення прозорості визначається в межах від 0 до 100.

Тінь це ще один чудовий інструмент, який креативники (дизайнери) застосовують у своїх макетах і хочу сказати виглядає це чудово. Все ж таки, повернемося до нас верстальникам, яким дизайнерські штучки порядком набридають, але працювати хочеться. Для створення тіні в арсеналі CSS3 є чарівне правило box-shadow, воно має 5 параметрів:

  • зсув по осі X
  • зсув по осі Y
  • розмиття
  • розтягування
  • колір

а синтаксис цього правила має такий вигляд:

Також його можна використовувати як заміну CSS правилу border , що як на мене набагато краще, і як плюс це не впливає на ширину елемента, до якого застосовується рамка:

Для сучасних браузерів, але не оновлених (застарілих) слід використовувати префікси постачальників браузерів:

Для браузерів IE7 та IE8 слід використовувати фільтри та фільтри для тіні мають такі параметри:

  • Колір тіні
  • Напрямок тіні (кут) — Direction
  • Щільність (товщина) тіні - Strength
  • Радіус розмиття- PixelRadius
  • Прозорість тіні - ShadowOpacity

Для IE7 правило тіні задається так:

Для IE8 правило тіні задається так:

Але як завжди буває з браузерами Internet Explorer є мінуса, причому суттєві, особливо в IE8: якщо до елемента застосована тінь, то на його дочірніх (вкладених) елементах не працює ефект наведення hover. Ніс цим можна впоратися, потрібно для IE8 додати порожній вкладений елемент, абсолютно позиціонований, що займає всю площу елемента і до нього застосувати тінь. Все зробити можна, потрібно лише трохи фантазії)

Поворот досить крута штука, і виглядає завжди дуже ефектно і дизайнери теж люблять його намалювати, тому верстальнику позаріз потрібно знати як його реалізувати у верстці. А у верстці це реалізується досить простим правилом CSS3 transform, до речі у цього правила є купа параметрів, але сьогодні конкретно говоримо про поворот, а за нього відповідає правило rotate.

Загалом синтаксис для реалізації повороту такий:

Для IE7 слід використовувати наступний фільтр із матрицею:

Для IE8 правила повороту такі:

Щоб усе було зрозуміло, скажу, що значення M11, M12, M21, M22 — це косинуси кута на який потрібно повернути елемент. Це не всі зауваження (хехе), слід враховувати, що ІЕ7 та ІЕ8 повертають по своєму, не дотримуються позиції елемента, тому для точності верстки з макетом доводиться задавати позиціонування елемента (relative) і за допомогою значень top, left, bottom, right підбирати необхідне становище.

Лінійний градієнт

Градієнт у макетах завжди наводить красу та підкреслює кваліфікацію дизайнера, який розробляв макет. Чесно кажучи, у своїй верстці я вже давно відійшов від фонових картинок для створенняградієнта, та й недоцільні вони, якщо висота елемента до якого потрібно застосувати градієнт гумова, як не крути ніяка картинка тут не допоможе. Саме для таких випадків рекомендую використовувати наступні правила для завдання градієнта:

В принципі, з градієнтом нічого складного і все красиво. Що стосується браузерів Internet Explorer, то сподіваюся, Ви помітили параметр GradientType - це напрям градієнта, якщо значення 0 - то градієнт йде зверху вниз, а якщо значення 1 - то ліворуч, ось і вся таємниця.

До речі в подробиці градієнта я не вдавався, але якщо дуже цікаво то раджу відвідати дуже цікавий проект htmlbook.ru, де Ви зможете отримати досить корисну інформацію, як про лінійний так і про радіальний градієнт.

Кольорове зображення чорно-біле

Ух! пам'ятають часи коли не було CSS3 і для таких фокусів доводилося користуватися jQuery скриптами для реалізації такої штуки, причому скрипти в основному серверні, тобто ставиться локальний сервер, створюється там проект і в проекті вже робиш верстку, щоб бачити, що все виходить рівненько і скрипт працює. Дуже добре, що тепер в арсеналі є CSS3 і його правило filter, яке дозволяє зробити інверсію зображень, без зайвих рухів і досить швидко. До речі, Internet Explorer підтримує інферсію зображень, по-моєму, ще з версії IE 5.5.

Отже, наступний шматок коду перетворюєкольорове зображення на чорно-біле, засобами CSS:

І якщо додати ефект наведення, при якому відбувається зворотна операція, виглядає дуже ефектно!

Результат наших дій Ви можете поспостерігати клікну за кнопкою «Demo» нижче, і відповідно натиснувши на «Source» можете завантажити вихідні дані (вони Вам знадобляться, тому що маютьповніший листинг коду для наведених прикладів):

Висновок

У цьому уроці ми розглянули 5 кроссбраузерних, сучасних рішень CSS, які дуже полегшують верстку складних, креативних проектів. Зокрема, ми тепер вміємо робити прозорість, тінь, поворот, градієнт, інверсію елементів. Як бонус, зауважу, що при використанні тіні та градієнта ми отримуємо векторне зображення, яке при масштабуванні проекту в браузері дає чітку картину користувачеві, і жодні фонові зображення не зможуть повторити таку красу.