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

Примеры

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

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

<style>
	#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)";
	}
</style>

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

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

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

<style>
#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)";
}
</style>

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

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

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

<style>
#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 */
	/* Если бы :( ... */
}
</style>

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

Итоги

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