CSS3 підтримка градієнта для всіх браузерів

Продовжуємо просувати CSS3 у маси, тепер крім використання border-radius і box-shadow, вже можна використовувати заливку градієнтом без застосування зовнішніх зображень.
Про те, як це зробити, люб'язно ділиться з нами Robert Nyman .

Тепер ми маємо можливість створювати градієнтні заливки прямо з CSS коду, без використання будь-яких картинок.

Відмінності синтаксису та підтримка браузерами

Хороші новини полягають в тому, що в списку браузерів, що підтримують CSS градієнти, складаються Firefox, Safari, Google Chrome і Internet Explorer («правильна» Opera знову, як було сказано в попередній статті, вже на підході). Погана новина, - реалізація цієї самої можливості для кожного браузера своя. У випадку з IE використовується стародавній підхід бере свій початок ще з IE 5.5. Для браузерів базуються на WebKit (Safari та Google Chrome), які першими ввели підтримку градієнтів і використовували для цього canvas, робоча група CSS ввела інші діалекти, синтаксис яких реалізувався в Firefox (і я вважаю далі він вже увійде і на підтримку WebKit-івських браузерів ).

Отже, ми маємо підтримку CSS градієнтів для:

Firefox 3.6
Safari 4
Google Chrome
Internet Explorer 5.5

Приклади

Давайте подивимося на приклад коду:

Лінійний градієнт, зверху вниз

 # Gradient {
  color: # fff;
  height: 100px;
  padding: 10px;
  / * Для WebKit (Safari, Google Chrome і т.д.) * /
  background:-webkit-gradient (linear, left top, left bottom, from (# 00f), to (# fff));
  / * Для Mozilla/Gecko (Firefox і т.д.) * /
  background:-moz-linear-gradient (top, # 00f, # fff);
  / * Для Internet Explorer 5.5 - 7 * /
  filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF);
  / * Для Internet Explorer 8 * /
  -Ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF)";
 }

    Я, - градієнт зверху вниз, а не картинка!

Ось, результат:

# Gradient { color: # fff; height: 100px; padding: 10px; / * Для WebKit (Safari, Google Chrome і т.д.) * / background:-webkit-gradient (linear, left top, left bottom, from (# 00f), to (# fff)); / * Для Mozilla/Gecko (Firefox і т.д.) * / background:-moz-linear-gradient (top, # 00f, # fff); / * Для Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF); / * Для Internet Explorer 8 * / -Ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF)"; } Я, - градієнт зверху вниз, а не картинка!

Лінійний градієнт, зліва направо

Цей градієнт перетікає зліва направо, по 70% ширині елемента. Кінцевий колір, після 70% не буде коректно працювати в Internet Explorer; опції FinishX і GradientSize не застосовуються у фільтрі градієнта ...

# Gradient-with-stop {
 color: # fff;
 height: 100px;
 padding: 10px;
 / * Для WebKit (Safari, Google Chrome і т.д.) * /
 background:-webkit-gradient (linear, left top, right top, from (# 00f), to (# fff), color-stop (0.7, # fff));
 / * Для Mozilla/Gecko (Firefox і т.д.) * /
 background:-moz-linear-gradient (left top, # 00f, # fff 70%);
 / * Для Internet Explorer 5.5 - 7 * /
 filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = # FF0000FF, endColorStr = # FFFFFFFF, GradientType = 1);
 / * Для Internet Explorer 8 * /
 -Ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF, GradientType = 1)";
}

    Я, - градієнт зліва направо, а не картинка!

Ось, результат:

# Gradient-with-stop { color: # fff; height: 100px; padding: 10px; / * Для WebKit (Safari, Google Chrome і т.д.) * / background:-webkit-gradient (linear, left top, right top, from (# 00f), to (# fff), color-stop (0.7, # fff)); / * Для Mozilla/Gecko (Firefox і т.д.) * / background:-moz-linear-gradient (left top, # 00f, # fff 70%); / * Для Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = # FF0000FF, endColorStr = # FFFFFFFF, GradientType = 1); / * Для Internet Explorer 8 * / -Ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF0000FF, endColorstr = # FFFFFFFF, GradientType = 1)"; } Я, - градієнт зліва направо, а не картинка!

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

Можна потішитися і зробити радіальний градієнт! Але, на жаль, цей тип градієнтів ніяк не підтримується в Internet Explorer.

# Gradient-radial {
 color: # fff;
 width: 100px;
 height: 100px;
 padding: 10px;
 / * Для WebKit (Safari, Google Chrome і т.д.) * /
 background:-webkit-gradient (radial, 40% 40%, 0, 40% 40%, 60, from (# ffffa2), to (# 00f));
 / * Для Mozilla/Gecko (Firefox і т.д.) * /
 background:-moz-radial-gradient (40% 40%, farthest-side, # ffffa2, # 00f);
 / * Для Internet Explorer * /
 / * Якщо б: (... * /
}

    Я радіальний градієнт!

Ось, результат:

# Gradient-radial { color: # fff; width: 100px; height: 100px; padding: 10px; / * Для WebKit (Safari, Google Chrome і т.д.) * / background:-webkit-gradient (radial, 40% 40%, 0, 40% 40%, 60, from (# ffffa2), to (# 00f)); / * Для Mozilla/Gecko (Firefox і т.д.) * / background:-moz-radial-gradient (40% 40%, farthest-side, # ffffa2, # 00f); / * Для Internet Explorer * / / * Якщо б: (... * / } Я радіальний градієнт!

Підсумки

Для простих лінійних градієнтів, це рішення цілком підходить, що-б користуватися ним просто з CSS. На жаль обмеженість можливостей Internet Explorer'а не дозволяє насолоджуватися усіма типами градієнтів в повній мірі.

Опубліковано: 17/03/11 @ 11:03
Розділ html та css

SEO Блог