CSS3 градиенты (Gradients)

Функция градиента CSS3 позволяет вам создавать градиент от одного цвета к другому, не используя любые изображения.

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

Функция градиента CSS3 предоставляет гибкое решение для создания平滑ого перехода между двумя или несколькими цветами. Для достижения такого эффекта нам пришлось бы использовать изображения. Использование градиента CSS3 может уменьшить время загрузки и сэкономить использование полосы пропускания. Элементы градиента можно масштабировать в любом масштабе, не теряя качества, и они будут быстрее рендериться, так как они генерируются браузером.

У градиента есть два стиля:Линейная (linear) иРадиальная(радиальная).

Создание линейной градиентации CSS3 (linear)

Для создания линейной градиентации вам необходимо определить至少 два цветовых маркера. Но для создания более сложного эффекта градиента вы можете определить больше цветовых маркеров. Цветовые маркеры - это цвета, которые вы хотите представить с平滑ым переходом. Вы также можете установить точку начала и направление (или угол) применения градиента. Основной синтаксис создания линейной градиентации в CSS3 можно представить следующим образом:

linear-gradient(угол, color-stop1, color-stop2, ...)

Линейная градиентация - сверху вниз

Ниже приведен пример создания линейной градиентации сверху вниз. Это значение по умолчанию.

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(красный, желтый);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(красный, желтый);
　　　　
　　　　background: линейная градиентация красный, желтый;
}

Линейная градиентация - слева направо

Ниже приведен пример создания линейной градиентации слева направо.

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(влево, красный, желтый);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(влево, красный, желтый);
　　　　
　　　　background: линейная градиентация справа налево, красный, желтый;
}

Линейный градиент — диагональ

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(bottom left, красный, желтый);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(bottom left, красный, желтый);
　　　　
　　　　background: linear-gradient(to top right, красный, желтый);
}

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

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

linear-gradient(угол, color-stop1, color-stop2, ...)

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(0deg, красный, желтый);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(0deg, красный, желтый);
　　　　
　　　　background: linear-gradient(90deg, красный, желтый);
}

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

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(красный, желтый, зеленый);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(красный, желтый, зеленый);
　　　　
　　　　background: linear-gradient(красный, желтый, зеленый);
}

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

Маркер цвета — это точка на линии градиента, в которой будет определенный цвет. Положение маркера цвета можно指定 в процентах или абсолютной длине. Вы можете определить любое количество маркеров цвета по своему усмотрению, чтобы достичь необходимых эффектов.

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(красный, желтый 30%, зеленый 60%);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(red, yellow 30%, lime 60%);
　　　　
　　　　background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
}

Повторяющийся линейный градиент

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: white;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
　　　　
　　　　background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
}

Создание радиального градиента CSS3:radial)

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

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

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

• position — определить точку начала градиента, которая может быть указана в единицах измерения (px, em или проценты) или ключевыми словами (left, bottom и т.д.).

• shape — определить форму конечного вида градиента. Она может быть круговой или эллиптической.

• size — определить размер формы конечного вида градиента. По умолчанию значение — farthest-side.

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-radial-gradient(red, yellow, lime);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background: radial-gradient(red, yellow, lime);
}

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

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-radial-gradient(circle, red, yellow, lime);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle, red, yellow, lime);
}

Настройка大小的 радиальной градиентной заливки

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: red;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

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

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: white;
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
　　　　
　　　　background: repeating-radial-gradient(black, white 10%, lime 20%);
}

CSS3 прозрачность и градиенты

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

.gradient {
　　　　/* Замена для браузеров, которые не поддерживают градиенты */
　　　　background: url("images/sky.jpg");
　　　　/* Для Safari 5.1 до 6.0 */
　　　　background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
　　　　/* Для Internet Explorer 10 */
　　　　background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}