Реализация градиентов CSS3

CSS3 градиенты позволяют осуществить плавный переход между двумя, или более цветами в практически любом элементе дизайна сайта. Данная статья немного раскроет тему реализация градиентов CSS3, и касается таких понятий, как линейный (linear-gradient) и радиальный (radial-gradient) градиенты. Мы обсудим возможность применения онлайн генераторов градиентов, и рассмотрим несколько примеров на практике.

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

Свойство
linear-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

Линейный градиент CSS3

Чтобы реализовать линейный градиент CSS3, вам потребуется указать минимум два исходных цвета, которые будут плавно пересекаться между собой. Вы также можете определить направление, в котором будет осуществлён переход. По умолчанию (если не указано иное), переход происходит сверху вниз, от первого цвета к последнему.

Сначала для устаревших браузеров, не поддерживающих CSS3, нужно явно задать один из цветов фона:

background: #цвет;

Для некоторых браузеров необходимо указать дополнительный префикс (см. таблицу выше):

background: -moz-linear-gradient(цвет1, цвет2, ..., цветN);
background: -webkit-linear-gradient(цвет1, цвет2, ..., цветN);
background: -o-linear-gradient(цвет1, цвет2, ..., цветN);

И, в самом конце, нужно добавить стандартный общий синтаксис, который выглядит следующим образом:

background: linear-gradient(цвет1, цвет2, ..., цветN);

Смена направления перехода цветов осуществляется при помощи явного указания направления:

.grad {
background: red;
background: -moz-linear-gradient(bottom right, red, green);
background: -webkit-linear-gradient(bottom right, red, green);
background: -o-linear-gradient(bottom right, red, green);
background: linear-gradient(to bottom right, red, green);
}

То есть, в выше приведённом примере мы указали, что переход от красного к зелёному идёт "вниз-вправо", или от верхнего левого угла к нижнему правому, а в качестве основного цвета устанавливается красный.

Направление можно также задать в градусах, в виде числа, отражающего отклонение градиента от вертикали:

.grad {
background: red;
background: -webkit-linear-gradient(-70deg, red, green);
background: -o-linear-gradient(-70deg, red, green);
background: -moz-linear-gradient(-70deg, red, green);
background: linear-gradient(-70deg, red, green);
}
.grad:hover {
background: red;
background: -webkit-linear-gradient(-120deg, red, green);
background: -o-linear-gradient(-120deg, red, green);
background: -moz-linear-gradient(-120deg, red, green);
background: linear-gradient(-120deg, red, green);
}

В последнем примере мы добавили эффект поворота градиента, который появляется при наведении курсора на блок. Это достигается простым присвоением классу .grad псевдо-класса :hover, которому задан немного другой угол поворота -120deg.

Если же вместо red или #FF0000 указать цвет в формате RGBA, можно составляющим градиента добавить элемент прозрачности, например, так: rgba(255,0,0,.7) (красный цвет будет прозрачным на 30%).

Для неоднократного повторения линейного градиента требуется использовать repeating-linear-gradient, как в следующем примере:

.grad {
background: red;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Радиальный градиент CSS3

Радиальный градиент CSS3 определяется, в первую очередь, его центром. Чтобы реализовать радиальный градиент при помощи стилей CSS, вы также обязаны указать не менее 2-х цветов фона, а также их размеры в процентах (этого можно и не делать, тогда переход будет равномерным по умолчанию).

.grad {
background: red;
background: -moz-radial-gradient(circle, blue 5%, red 15%, green 60%);
background: -webkit-radial-gradient(circle, blue 5%, red 15%, green 60%);
background: -o-radial-gradient(circle, blue 5%, red 15%, green 60%);
background: radial-gradient(circle, blue 5%, red 15%, green 60%);
}

Как видно из примера выше, у радиального градиента есть ещё один параметр - его форма, которая может принимать значение circle или ellipse, обеспечивая фону форму круга, либо эллипса (если этого не сделать, радиальный градиент CSS3 подстроится под форму родительского блока, впишется в него). Круговой градиент также можно повторять неоднократно при помощи repeating-radial-gradient

.grad {
background: red;
background: -moz-repeating-radial-gradient(circle, blue 5%, red 15%);
background: -webkit-repeating-radial-gradient(circle, blue 5%, red 15%);
background: -o-repeating-radial-gradient(circle, blue 5%, red 15%);
background: repeating-radial-gradient(circle, blue 5%, red 15%);
}

Генератор градиента CSS3

Ну, а теперь, пришло время немного, как говорится "поиграть" градиентами при помощи онлайн генератора градиентов CSS3, которых в сети великое множество. Такие генераторы существенно экономят время верстальщика, и дают возможность наглядно видеть, как изменяется градиент при смене тех, или иных исходных данных.

Пожалуй, одним из лучших генераторов CSS3 градиентов является Colorzilla, которая позволяет задать размер блока, для которого вы пытаетесь создать фон с плавно меняющейся заливкой, а также все необходимые параметы - форму, размер, цвет, и т.д. Что немаловажно, Colorzilla автоматически формирует стили для браузеров, которые не поддерживают CSS3, или требуют указания дополнительных префиксов.

2048 просмотров

Комментарии

Нет комментариев. Ваш будет первым!