Приветствую вас на своем блоге. Сегодня я хотел бы показать, как записывать в css линейный градиент. Это дает дополнительные возможности в плане оформления сайта, потому что градиент в ряде случаев позволяет гораздо более красиво оформить различные элементы.
Синтаксис свойства
Итак, простейший линейный градиент можно задать следующим способом:
Background: linear-gradient(направление, цвет 1, цвет 2);
Соответственно, давайте просто подставим вместо этих слов реальные значения и посмотрим, что получится.
background: linear-gradient(to right, aqua, blue);
И вот такой милый градиентик образовался на моей странице. Конечно, перед этим я задал блоку определенные размеры (ширину и высоту). Но суть, я думаю, вы поняли.
Линейный градиент из радуги
Для примера я поменяю направление, а также добавлю больше цветов, чтобы вы убедились, что в составлении градиента у вас много свободы и вы можете делать его таким, каким захотите.
background: linear-gradient(to bottom, red, orange, yellow, green, aqua, blue, purple);
Теперь он направлен сверху вниз. Также я указал все цвета радуги. Получилось так:
Резкие переходы и колорстопы
Теперь настало время углубиться в синтаксис свойства и показать вам, как сделать резкие переходы между цветами. Смотрите код:
background: linear-gradient(to right, aqua 25%, #333 25%, #333 68%, yellow 68%);
И как это выглядит:
Резкие переходы стали возможны благодаря тому, что мы задали так называемые колорстопы. Они задаются в процентах и определяют, в каком месте градиента будет наиболее насыщенная часть цвета. Чтобы сделать резкий переход, нужно двум соседним цветам определить колорстоп в одинаковом месте, что мы и сделали в этом примере.
Как можно записывать цвет?
Цвет вы можете определять как угодно: с помощью ключевого слова, hex-кода, в форматах rgb, rgba, hsl. Короче, всеми возможными способами. Таким образом, можно делать полупрозрачные градиенты, например.
Что еще можно?
Можно направление указывать не ключевым словом (right, left, bottom), а в градусах от 0 до 360. Таким образом, можно давать направление по диагонали, хотя это можно сделать с помощью двух ключевых слов. Вот так: to top right – в верхний правый угол. Со всеми остальными значениями также.
Так, я думаю, что вам этой информации должно хватить для составления собственных градиентов. Если что, пишите в комментарии. Если вам нравится технология CSS и сайтостроение в целом, я рекомендую подписаться на мой блог, так как в будущем я буду писать о других фишках и приемах. На этом с вами прощаюсь.