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

До сих пор задачу отображения градиентного фона большинство программистов решают путем «подсовывания» картинки на фон и ее повторением по вертикали или по горизонтали, в зависимости от требуемого эффекта.

Несмотря на то, что возможность получения градиентного изображения фона средствами CSS появилась достаточно давно, пользуются этой возможностью пока не очень охотно. На самом деле, мало кому хочется, особенно на коммерческих проектах, придумывать себе лишние проблемы на голову с кросс-браузерной версткой. Тем более, что до недавнего времени, например Opera не поддерживала CSS-ный градиент.

Сегодня рассмотрим пример кода CSS, позволяющий отобразить вертикальный двухцветный градиент. К стати, Opera с версии 11.10 теперь тоже поддерживает градиентную заливку фона средствами CSS.

Приведенный ниже код работает в наиболее распространенных браузерах: IE, FireFox, Opera, Chrome, Safari.

Вообще говоря, функции градиентной заливки были реализованы разработчиками из Apple Inc., которые занимаются созданием браузерного движка Webkit, еще в 2009 году! Но из-за «заторможенности» разработчиков IE, Opera и пр., долгое время функция оставалась невостребованной.

Добавляем код в нашу таблицу стилей:

background-color: #cfcfcf; /* Для не css3 обозревателей */
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#bcbcbc)); /* chrome, safary, etc. webkit */
background: -moz-linear-gradient(top, #cfcfcf, #bcbcbc); /* FireFox */
background: -o-linear-gradient(top, #cfcfcf, #bcbcbc); /* Opera */
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#cfcfcf,endColorStr=#bcbcbc); /* MS IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#bcbcbc')"; /* MS IE 8 */

Теперь разберем что тут к чему:

background-color: #cfcfcf; /* Для не css3 обозревателей */

С первой строкой все понятно. Это для обозревателей, которые не поддерживают функции градиентной заливки.

background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#bcbcbc)); /* chrome, safary, etc. webkit */

Обозреватели Chrome и Safari работают на платформе Webkit. Градиент для них описывается конструкцией -webkit-gradient(тип градиента, точка начала, точка завершения, начальный цвет, конечный цвет).

background: -moz-linear-gradient(top, #cfcfcf, #bcbcbc); /* FireFox */

В Firefox все просто, как «три рубля». Параметры линейного градиента описываются конструкцией: -moz-linear-gradient(точка начала, начальный цвет, конечный цвет).

background: -o-linear-gradient(top, #cfcfcf, #bcbcbc); /* Opera */

С Opera история такая же, как и с Firefox, конструкция отличается одной буквой: -o-linear-gradient(точка начала, начальный цвет, конечный цвет).

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#cfcfcf,endColorStr=#bcbcbc); /* MS IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#bcbcbc')"; /* MS IE 8 */

Microsoft как всегда отличился со своим IE! Тут параметры градиентной заливки задаются через фильтр. Да и упоминание gradientType больше на издевательство походит, поскольку кроме gradientType=0 больше никакие не работают. По крайней мере так было на момент написания данной записи:

filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=[Тип градиента], startColorStr=[Начальный цвет], endColorStr=[Конечный цвет]);

Данный код должен нормально отображать вертикальный градиент во всех современных браузерах.