Градиенты

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

Для этого нет специального свойства; вы просто используете свойство background или background-image и описываете свой градиент. Таким образом можно создавать как линейные, так и радиальные градиенты.

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

Для равномерного распределения двух цветов, переходящих от одного вверху к другому внизу, объявление может быть просто чем-то вроде:

background: linear-gradient(yellow, red);

Простой линейный градиентный фон от жёлтого к красному

Чтобы изменить угол затухания, вы вводите “to” и пункт назначения, к которому вы хотите направить переход. Вы можете повернуть в одну сторону:

background: linear-gradient(to right, orange, red);

Или один угол:

background: linear-gradient(to bottom right, orange, red);

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

background: linear-gradient(20deg, orange, red);

Обратите внимание, что “ to” исключается с помощью angles, потому что нет явного назначения.

И зачем останавливаться на двух цветах? Укажите столько, сколько осмелитесь:

background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));

Красочная градиентная феерия

Чтобы заставить градиенты работать в как можно большем количестве браузеров, вы, вероятно, также захотите использовать -webkit-linear-gradient для Safari и более старых версий Chrome. Их значения также должны исключать часть “ to”, если она используется.

Градиенты CSS вообще не будут воспроизводиться в IE 9 и ниже, но вы всё равно можете создать их и в любом другом неработоспособном браузере, используя традиционный метод старого доброго изображения, указав его сначала в качестве запасного варианта (продолжающиеся объявления будут просто проигнорированы).

Итак, в целом, ваши градиенты могут выглядеть примерно так:

body {

    background: #666 url(fade.png) 0 0 repeat-y;

    background: -webkit-linear-gradient(right, #000, #666);

    background: linear-gradient(to right, #000, #666);

}

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

Радиальные градиенты, в которых один цвет начинается от центральной точки и переходит в другой цвет, используют аналогичный синтаксис:

background: radial-gradient(yellow, green);

Простой жёлто-зелёный радиальный градиентный фон

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

background: radial-gradient(circle, yellow, green);

Круговой радиальный градиент

Используя “ближайшая сторона” (closest-side), “ближайший угол” (closest-corner), “самая дальняя сторона” (farthest-side) и “самый дальний угол” (farthest-corner), вы также можете указать, содержится ли градиент по сторонам или углам прямоугольника, ближайшим к началу координат или наиболее удалённым от него:

background: radial-gradient(circle closest-side, yellow, green);

 

И если вы хотите указать начало градиента где-то конкретно, вы также можете использовать “at”:

background: radial-gradient(at top left, yellow, green);

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

Дополнительные примечания по совместимости: целесообразно дополнительное -webkit-radial-gradient использование. Здесь необходимо изменить порядок параметров, и, как и “to”, “at” исключается. Итак:

background: radial-gradient(circle closest-side at 100px 200px , black, white);

Будет сопровождаться:

background: -webkit-radial-gradient(100px 200px, circle closest-side, black, white);

Цвет останавливается

Если вы не хотите равномерного наложения по всему вашему градиенту, вы можете точно указать, где в градиенте начинается каждый цвет, сразу после каждого цвета, начиная с “0” и заканчивая ”100%» (хотя также могут использоваться длины).

Итак, просто чтобы прояснить, прежде чем переделывать:

linear-gradient(black 0, white 100%) является эквивалентом linear-gradient(black, white)

radial-gradient(#06c 0, #fc0 50%, #039 100%) это то же самое, что radial-gradient(#06c, #fc0, #039)

linear-gradient(red 0%, green 33.3%, blue 66.7%, black 100%) будет иметь тот же результат, что и linear-gradient(red, green, blue, black)

Значения в этих примерах равномерно распределяют цвета, что используется по умолчанию, когда явно не определены цветовые границы.

Итак, чтобы продолжить эту работу, вы можете тянуть и растягивать дальше с помощью этих остановок:

background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);

Цвет останавливается в линейном градиенте

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

Один градиент заполнит поле предыдущими методами, но вы можете использовать “repeating-linear-gradient” и “repeating-linear-gradient” для создания цветовых остановок и, в общем, повторения градиента.

Например, для базовых чёрно-белых полос:

background: repeating-linear-gradient(white, black 15px, white 30px);

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

Или что-нибудь более солидное:

background: repeating-radial-gradient(black, black 15px, white 15px, white 30px);

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

Страницы в тему:

Примеры CSS:

Добавить комментарий