Бешеный конкурс!
8:14
Автор: Рубрика: CSS-рецепты Комментариев нет

Как сделать с помощью css линейный градиент?

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

Синтаксис свойства

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

Background: linear-gradient(направление, цвет 1, цвет 2);

Соответственно, давайте просто подставим вместо этих слов реальные значения и посмотрим, что получится.

background: linear-gradient(to right, aqua, blue);

градиент2
И вот такой милый градиентик образовался на моей странице. Конечно, перед этим я задал блоку определенные размеры (ширину и высоту). Но суть, я думаю, вы поняли.

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

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

background: linear-gradient(to bottom, red, orange, yellow, green, aqua, blue, purple);

Теперь он направлен сверху вниз. Также я указал все цвета радуги. Получилось так:градиент1

Резкие переходы и колорстопы

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

background: linear-gradient(to right, aqua 25%, #333 25%, #333 68%, yellow 68%);

И как это выглядит:градиент3

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Как можно записывать цвет?

Цвет вы можете определять как угодно: с помощью ключевого слова, hex-кода, в форматах rgb, rgba, hsl. Короче, всеми возможными способами. Таким образом, можно делать полупрозрачные градиенты, например.

Что еще можно?

Можно направление указывать не ключевым словом (right, left, bottom), а в градусах от 0 до 360. Таким образом, можно давать направление по диагонали, хотя это можно сделать с помощью двух ключевых слов. Вот так: to top right – в верхний правый угол. Со всеми остальными значениями также.

Так, я думаю, что вам этой информации должно хватить для составления собственных градиентов. Если что, пишите в комментарии. Если вам нравится технология CSS и сайтостроение в целом, я рекомендую подписаться на мой блог, так как в будущем я буду писать о других фишках и приемах. На этом с вами прощаюсь.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет