Изображения, демонстрирующие плавный переход от одного цвета к другому, разбросаны по всему Интернету. Однако 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)
Примеры CSS: