CSS3: Градиенты

Градиент элемента, к счастью, можно даже отобразить в IE, начиная с 7 версии.Задаётся через стандартное свойство background:

div {
    background: -webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#f3f3f3));
    background: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background: -o-linear-gradient(top, #fefefe, #f3f3f3);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffefefe, EndColorStr=#fff3f3f3, GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffefefe, EndColorStr=#fff3f3f3, GradientType=0);
    background: -ms-linear-gradient(top, #fefefe, #f3f3f3);
}

Указываем два цвета (от какого к какому будет градиент) и направление. В костылях для IE направление указывается значением GradientType: 0 — сверху вниз, 1 — слева направо.
Также для IE первые два значения — это альфа-канал. Но IE в данной форме записи не понимает никаких других значений, кроме FF (то есть opacity:1.0), поэтому везде следует писать только FF.

Для того, чтобы сделать в IE градиент с прозрачностью, нужно использовать следующую форму записи:

-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(StartColor=0, EndColor=4294967295, GradientType=0)";
filter:progid:DXImageTransform.Microsoft.Gradient(StartColor=0, EndColor=4294967295, GradientType=0);

Здесь 0 — прозрачный фон, 4294967295 — плотный белый.

Одновременно использовать и установки прозрачности, и цвета IE не даёт (во всяком случае, в версии 8).

В FF и Опере направление градиента можно накланять на любое количество градусов (вместо top пишем, например, 220deg или -50deg), в вебкитовских браузерах направляем градиент при помощи названий углов (left-right и bottom-top).

Современные браузеры также поддерживают сочетание нескольких цветов для градиента. Например:

div {
    background: -webkit-gradient(linear, left top,left bottom, color-stop(0.1,#fefefe), color-stop(0.4,#859231), color-stop(0.9,#f00));
    background: -moz-linear-gradient(top, #fefefe 10%, #859231 40%, #f00 90%);
    background: -o-linear-gradient(top, #fefefe 10%, #859231 40%, #f00 90%);
}

Для FF и Оперы указываем точку на длине градиента (в процентах), в которой появляется следующий цвет. Для браузеров на Вебките — в десятых долях и через выражение color-stop.

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

Теги: