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

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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!
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

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: