Использование линейных и радиальных градиентов в CSS3

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

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

Градиенты доступны в двух стилях: линейный (linear) и радиальный (radial).

Создание линейных градиентов в CSS3

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

Цветовые точки (points) — это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (угол), к которому применяется эффект градиента. Основной синтаксис создания линейных градиентов с использованием ключевых слов может быть задан с помощью:

linear-gradient(direction, color-stop1, color-stop2, ...)

Линейный градиент Top to Bottom

В следующем примере будет создан линейный градиент сверху вниз. Это направление используется по умолчанию.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow);
    /* Standard syntax */
    background: linear-gradient(red, yellow);
}

Линейный градиент — Left to Right

В следующем примере будет создан линейный градиент слева направо.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to right, red, yellow);
}

Линейный градиент — Diagonal

Вы также можете создать градиент вдоль диагонального направления. В следующем примере будет создан линейный градиент от нижнего левого угла до верхнего правого угла элемента.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(bottom left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(bottom left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to top right, red, yellow);
}

Установка направлений линейных градиентов с использованием углов

Если вы хотите контролировать направление градиента, вы можете установить угол вместо предопределенных ключевых слов. Угол 0deg создает градиент снизу вверх, положительные углы представляют вращение по часовой стрелке, то есть угол 90deg создает градиент слева направо, отрицательные углы — против часовой.

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

linear-gradient(angle, color-stop1, color-stop2, ...)

В следующем примере будет создан линейный градиент слева направо с использованием угла 90deg.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(0deg, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(0deg, red, yellow);
    /* Standard syntax */
    background: linear-gradient(90deg, red, yellow);
}

Создание линейных градиентов с использованием нескольких цветов

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

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow, lime);
    /* Standard syntax */
    background: linear-gradient(red, yellow, lime);
}

Установка местоположения цветовых точек

Цветовые точки (points) — это точки вдоль линии градиента, которые будут иметь определенный цвет в этом месте. Расположение цветовой точки может быть указано либо в процентах, либо в абсолютных значениях. Вы можете указать столько цветов, сколько хотите для достижения желаемого эффекта.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow 30%, lime 60%);
    /* Standard syntax */
    background: linear-gradient(red, yellow 30%, lime 60%);
}

При установке местоположения цветовых точек в процентах, 0% представляет начальную точку, а 100% представляет конечную точку. Однако вы можете использовать значения за пределами этого диапазона, то есть меньше 0% или больше 100%, чтобы получить желаемый эффект.

Повторение линейных градиентов

Вы можете повторять линейные градиенты, используя функцию repeating-linear-gradient().

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-linear-gradient(black, white 10%, lime 20%);
}

Создание радиальных градиентов в CSS3

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

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Аргументы функции radial-gradient() принимают следующие значения:

position — указывает начальную точку градиента, которая может быть указана в единицах (px, em или в процентах) или в виде ключевого слова (left, bottom и т. д.);
shape — определяет форму конечной формы градиента. Это может быть круг или эллипс;
size — определяет размер конечной формы градиента. По умолчанию это farthest-side.

В следующем примере показано, как создать радиальный градиент с равномерно расположенными цветовыми ограничителями.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(red, yellow, lime);
}

Установка формы радиального градиента

Аргумент shape функции radial-gradient() используется для определения конечной формы радиального градиента. Может принимать значение circleили ellipse. Вот пример:

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(circle, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(circle, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle, red, yellow, lime);
}

Если аргумент shape опущен или не указан, конечной формой по умолчанию является круг.

Установка размера радиального градиента

Аргумент size функции radial-gradient() используется для определения размера конечной формы градиента. Размер можно задать, используя единицы измерения или ключевые слова: closest-side, farthest-side, closest-corner, farthest-corner.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

Повторение радиальных градиентов

Вы также можете повторить радиальные градиенты, используя функцию repeating-radial-gradient().

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-radial-gradient(black, white 10%, lime 20%);
}

Прозрачность для градиентов

CSS3 градиенты также поддерживают свойство прозрачности opacity. Вы можете использовать его для создания эффектов затухания на фоновых изображениях при наложении нескольких фонов.

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: url("images/sky.jpg");
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* Standard syntax */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}