Продовжуємо просувати 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
Давайте подивимося на приклад коду:
Лінійний градієнт, зверху вниз
Я, - градієнт зверху вниз, а не картинка!
Лінійний градієнт, зліва направо
Цей градієнт перетікає зліва направо, по 70% ширині елемента. Кінцевий колір, після 70% не буде коректно працювати в Internet Explorer; опції FinishX і GradientSize не застосовуються в фільтрі градієнта ...
Я, - градієнт зліва направо, а не картинка!
радіальний градієнт
Можна побавитися і зробити радіальний градієнт! Але, на жаль, цей тип градієнтів ніяк не підтримуються в Internet Explorer.
Я радіальний градієнт!
Для простих лінійних градієнтів, це рішення цілком підходить, що-б користуватися ним просто з CSS. На жаль обмеженість можливостей Internet Explorer'а не дозволяє насолоджуватися всіма типами градієнтів в повній мірі.