sata-cross-gradient($start-color, $end-color, $orientation: vertical)

Кроссбраузерный градиент. Только 2 цвета и направление.

$start-color - начальный цвет
$end-color - конечный цвет
$orientation - вертикальное(vertical) или горизонтальное(horizontal) направление

Примеры

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

Код

#sata-image-example {
	@include sata-cross-gradient(#24909d, #520000);
}

Результат

#sata-image-example {
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #24909d), color-stop(100%, #520000));
	background-image: -webkit-linear-gradient(top, #24909d, #520000);
	background-image: -moz-linear-gradient(top, #24909d, #520000);
	background-image: -o-linear-gradient(top, #24909d, #520000);
	background-image: linear-gradient(top, #24909d, #520000);
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF24909D', endColorstr='#FF520000');
}

Горизонтальный градиент

Код

#sata-image-example {
	@include sata-cross-gradient(#24909d, #520000, horizontal);
}

Результат

#sata-image-example {
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #24909d), color-stop(100%, #520000));
	background-image: -webkit-linear-gradient(left, #24909d, #520000);
	background-image: -moz-linear-gradient(left, #24909d, #520000);
	background-image: -o-linear-gradient(left, #24909d, #520000);
	background-image: linear-gradient(left, #24909d, #520000);
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF24909D', endColorstr='#FF520000');
}