расставляй правильно приоритеты и не отвлекайся на мелочи

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

Примеры

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

Линейный градиент, сверху вниз


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

Вот, результат:

Я, — градиент сверху вниз, а не картинка!

Линейный градиент, слева направо

Этот градиент перетекает слева направо, по 70% ширине элемента. Конечный цвет, после 70% не будет корректно работать в Internet Explorer; опции FinishX и GradientSize не применяются в фильтре градиента …


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

Вот, результат:

Я, — градиент слева направо, а не картинка!

Радиальный градиент

Можно позабавиться и сделать радиальный градиент! Но, к сожалению, этот тип градиентов никак не поддерживается в Internet Explorer.


 
Я радиальный градиент!

Вот, результат:

Я радиальный градиент!

Итоги

Для простых линейных градиентов, это решение вполне подходит, что-бы пользоваться им просто из CSS. К сожалению ограниченность возможностей Internet Explorer’а не позволяет наслаждаться всеми типами градиентов в полной мере.