Градиент средствами CSS

Градиент средствами CSS позволяет сократить количество загружаемых изображений, что значительноувеличивает скорость загрузки страницы.

.gradient {
	/* Для "нормальных" браузеров */
	background: #3399cc url("gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Для IE */
	*background: #3399cc;
	background: #3399cc\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, 
		startColorstr=#FFaaeeff, endColorstr=#FF3399cc);
	}
@media all and (min-width: 0px) {
	.gradient {
		/* Opera */
		background: #3399cc url("gradient-bg.svg");
		/* Остальные браузеры */
		background-image: -moz-linear-gradient(
			top,
			#aaeeff,
			#3399cc
		);
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#aaeeff),
			to(#3399cc)
		);
	}
}

Скачайте дополнительно background: PNG, SVG

Этот метод поддерживают все нормальные браузеры.

Оставить комментарий: