Что CSS грядущий нам готовит? Часть третья: gradient

26 марта 2010, 22:07 · CSS · изображения, css3

Что CSS грядущий нам готовит? Часть первая: border-radius
Что CSS грядущий нам готовит? Часть вторая: box-shadow
Что CSS грядущий нам готовит? Часть третья: gradient
Что CSS грядущий нам готовит? Часть четвёртая: text-shadow
Что CSS грядущий нам готовит? Часть пятая: rgba и hsla

В предыдущей статье я обещала рассмотреть свойство gradient. Приступим.
В настоящий момент gradient – само неоднозначное свойство. Браузеры поддерживают его по-разному, у каждого браузера свой стиль написания и свои возможности.
Сейчас свойство gradient так или иначе поддерживается в следующих браузерах:

Firefox (начиная с версии 3.6)
Safari (с версии 4)
Chrome
IE (с версии 5.5, через свойство filter)

Если на градиенте вы видите плашку

– это означает, что ваш браузер не поддерживает этот тип градиента и сейчас вы видите статичное изображение, а не CSS.

Этот пример поддерживают все браузеры, кроме Оперы.
Как видно,все три свойства задаются совершенно по-разному:

Mozilla использует свойство linear-gradient и сторону, с которой начинается градиент, затем следует перечисление цветов;
Webkit сначала задает тип градиента (linear или radial), затем сторону, из которой выходит градиент, сторону, где он заканчивается, и только потом задаются цвета градиента в ключевых словах from и to;
IE более прост: сначала идет переменная GradientType, где 1 – горизонтальный градиент, а 0 – вертикальный. Затем переменные StartColorStr и EndColorStr, обозначающие начальный и конечный цвет соответственно.

.block {
	background-image:-moz-linear-gradient(left, red, orange);
	background-image:-webkit-gradient(linear, left top, right top, from(red),  to(orange));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='red', EndColorStr='orange');
}

Здесь мы выводим спектр цветов по диагонали.
Чтобы сделать диагональный градиент, в Firefox мы используем градусную меру, в Webkit направляем градиент из левого верхнего угла в правый нижний. Для IE ничего не делаем – он не умеет создавать ни диагональные, ни многоцветные градиенты.
В Webkit нам приходится для каждого цвета кроме конечных писать color-stop и самостоятельно рассчитывать положение цветов в градиенте.

.block {
	background-image:-moz-linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);
	background-image:-webkit-gradient(linear, left top, right bottom, from(red), color-stop(0.15, orange), color-stop(0.3, yellow), color-stop(0.55, green), color-stop(0.7, blue), color-stop(0.85, indigo), to(violet));
}

Ещё один вариант простого градиента – теперь вертикальный.
Надеюсь, здесь всё понятно.

.block {
	background-image:-moz-linear-gradient(top, #9B620B, #FDF4E8);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#9B620B), to(#FDF4E8));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#9B620B', EndColorStr='#FDF4E8');
}

Здесь мы определяем расположение цветов через проценты.
Обратите внимание – в webkit можно задавать координаты цветов как через проценты, так и через дроби.

.block {
	background-image:-moz-linear-gradient(top, #4DB6F4, #D7EAFD 50%, white 56%, #B5E0FB 57%,#0C87D1,#096297);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#4DB6F4), color-stop(50%, #D7EAFD), color-stop(56%, white), color-stop(57%,#B5E0FB), color-stop(75%,#0C87D1), to(#096297));
}

Радиальный градиент. И в Mozilla, и в Webkit крайне неудобное определение этого свойства. Кроме того, я просто не вижу сейчас реального применения для этого градиента.
Посему детально код не разбирается, а остаётся лежать здесь до лучшего времени (точнее, до того времени, когда W3 выпустит спецификацию CSS3).

.block {
	background-image:-moz-radial-gradient(center, circle closest-side, #F5E94B 0%, #F5DC4B 20%, #EBFBFE 25%, #4EB9F3 90%);
	background-image:-webkit-gradient(radial, 100 100, 5, 100 100, 80, from(#F5E94B), to(#4EB9F3), color-stop(20%, #F5DC4B),color-stop(25%, #EBFBFE));
}

Это свойство поддерживает только Firefox. Как обычно, выбираем направление градиента и градус поворота, затем для каждой полосы определяем ширину и цвет границ.

.block {
	background-image:-moz-repeating-linear-gradient(top left -60deg, #F2F2F2, #F2F2F2 10px, white 10px, white 20px);
}

То же самое, за исключением того, что градиент здесь радиальный. Опять же, только для Firefox.

.block {
	background-image:-moz-repeating-radial-gradient(center, white, white 5px, white 5px, #EFEFEF 20px);
}

Итог

Если бы удалось добиться внедрения свойства gradient во все браузеры, то многие верстальщики вздохнули бы спокойно – наконец отпала бы необходимость создавать фоны для сайта шириной в 1px.
Но пока это лишь мечты.

Ещё одно свойство CSS3 позади.
В следующий раз мы рассмотрим text-shadow – свойство, которое позволяет создавать тень за текстом или популярный сейчас эффект гравировки текста.

Что CSS грядущий нам готовит? Часть третья: gradient

Итог

Комментарии

Добавить комментарий

Категории

Контакты