Кросбраузерний CSS-градієнт

Можливість застосування CSS-градієнта була реалізована Webkit кілька років тому, але вона рідко використовувалася через несумісність з більшістю браузерів. Але тепер Firefox починаючи з версії 3.6+ почав підтримувати градієнт, і ми можемо створювати градієнт без обов'язкового використання зображення. Opera додала підтримку CSS-градієнта, починаючи з версії 11.10.

У цій статті ми покажемо Вам, як створити CSS-градієнт, який буде підтримуватись усіма основними браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ та Chrome.

У CSS3 градієнти бувають двох видів - лінійні та радіальні. Розглянемо спочатку лінійний градієнт.

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

Для Webkit -браузерів:

Наступний код призначений для webkit браузерів, таких як Safari, Chrome і т.д. Він створить лінійний градієнт від верхньої точки (#ccc) до основи (#000).

CSS-градієнт

У старих версіях Webkit-браузерів використовувався трохи інший синтаксис, першим параметром там вказувався тип градієнта.

Для Firefox 3.6+:

градієнт

Для Opera

Цей код працюватиме в Опері, починаючи з версії 11.10.

Для Internet Explorer

Градієнт для IE 10+

Цей фільтр буде працювати у старих версіях IE:

CSS-градієнт

Кросбраузерний CSS-градієнт:

Помістіть ці рядки коду разом, і в результаті ви отримаєте CSS-градієнт, який працюватиме у всіх сучасних браузерах. Зауважте: я додав спочатку правило для background, у тому випадку якщо користувач використовує браузер, який не підтримує ці правила.

background: #999; /* for non-css3 browsers */

filter : progid :DXImageTransform .Microsoft .gradient ( startColorstr = '#cccccc', endColorstr = '#000000') ;/* для IE6-9 */ background : -webkit-linear-gradient (top, bottom, #ccc, #000); /* для webkit-браузерів */ background : -moz-linear-gradient (top, #ccc, #000); /* для firefox 3.6+ */ background: -o-linear-gradient (top, #ccc, #000); /* для Opera 11.10+ */ background: -ms-linear-gradient (top, #ccc, #000); /* для IE10+ */

Давайте розглянемо детальніше синтаксис. Перше значення (point) є необов'язковим. Якщо значення не вказано, то за замовчуванням градієнт буде йти від верху до низу. Ви можете використати різні ключові слова тут. Це може бути одне ключове слово чи поєднання двох. Ви також можете використовувати значення градусів. Ціль цього параметра полягає у визначенні, в якому напрямку градієнт буде поширюватися. Крім того, необхідно визначити як мінімум два кольори. Перший колір буде на початку градієнта, а останній колір, відповідно, наприкінці. Тут перераховані можливі значення point:

Використання стоп-кольору

Кольори можуть мати необов'язкові значення stop. Якщо вони не визначені, кольори переходять плавно від першого до останнього. Але ви можете використовувати кілька кольорів при створенні градієнта, і при цьому можна змінювати ширину кожного кольору встановлюючи stop значення. Значення, що встановлюється, може вимірюватися в будь-яких допустимих CSS одиницях (px, pt, em, % і т.д.). Ці значення міститься після кольору. Також можна використовувати будь-які допустимі CSS-кольори, такі як ключові слова (red, yellow, blue), або hex, hsl, rgb або rgba значення.

Радіальний градієнт CSS3

Радіальний градієнт поширюється від точки у центрі по колу.

Синтаксис схожий на лінійний градієнт, то тут додалася форма і розмір. Форма буває двох видів.ellipse та circle, за замовчуванням значення: ellipse. Значення розміру може набувати одне з шести значень.

  • closest-side - Найближча сторона. Градієнт розповсюджується від центру до найближчої сторони елемента (для circle), або до обох, горизонтальної та вертикальної сторін (для ellipse).
  • closest-corner - Найближчий кут. Розмір градієнта такий, що він поширюється від центру до найближчого кута елемента.
  • farthest-side - Найдальша сторона. Градієнт розповсюджується від центру до найбільш віддаленої сторони елемента (для circle), або до обох, горизонтальної та вертикальної, сторін (для ellipse).
  • farthest-corner - Найдальший кут. Розмір градієнта такий, що він поширюється від центру до найдальшого кута елемента.
  • contain - теж як і closest-side.
  • cover - теж що й farthest-corner.

Онлайн-приклади

Додаткова інформація.

CSS-градієнт для випадаючого меню:

Нижче наведено, як приклад, меню, яке використовує тільки CSS3: CSS-градієнт, text-shadow, radius-border і box-shadow (ніякого Javascript або зображень).

background

Обмеження Internet Explorer:

Фільтр градієнта для Internet Explorer не підтримує сolor-stop, gradient angle і radial gradient. Це означає, що Ви можете лише визначити горизонтальний або вертикальний лінійний градієнт з двома кольорами: StartColorStr та EndColorStr.

Корисні посилання на тему:

Висновок.

Зауважте, що не всі браузери підтримують CSS-градієнт. Щоб не виникло проблем, Ви не повинні повністю покладатися на CSS-градієнт, верстаючи шаблон.