CSS Gradient — Темы Scaler
Обзор
Добавление всего одного цвета на ваш сайт иногда выглядит не очень привлекательно. Поэтому есть способ сделать свой веб-сайт более интересным, комбинируя два или более цветов и отображая плавный переход на вашем веб-сайте, известный как CSS-градиенты.
Область применения
- В этой статье мы поговорим о градиентах CSS и о том, почему мы должны их использовать.
- Кроме того, мы также обсудим три типа градиента в CSS.
Что такое градиенты CSS?
Градиенты представляют собой сочетание двух или более цветов (где один цвет плавно переходит в другой) и отображают плавный переход между ближайшими точками цветов на нашем сайте. С помощью градиентов CSS мы можем контролировать направление и изменения, которые должны происходить в цветах.
Градиенты CSS — это фоновые изображения, установленные в трех формах: —
- linear-gradient — переход между двумя или более цветами происходит вдоль линейного направления в линейном градиенте.
- радиальный градиент — Градиент цвета начинается от центра его радиального градиента.
- conic-gradient — Переход между цветами происходит вокруг центра.
Мы можем добавить градиент тремя способами, как показано на изображении выше.
Давайте рассмотрим это подробно в следующих разделах.
Почему градиент CSS?
- Градиенты CSS обеспечивают лучшую видимость изображений при увеличении страницы, поскольку они генерируются самим браузером.
- Это лучший способ создания адаптивных веб-сайтов, где размер страницы меняется.
- Вы можете сократить использование полосы пропускания и времени загрузки до времени загрузки фонового градиента CSS.
- Вместо использования фоновых изображений для эффекта градиента мы используем CSS3 Gradient, который делает переход цветов плавным.
Три типа CSS-градиентов
Как мы видели выше, есть три способа добавления перехода к цветам. Это: —
- Линейный градиент
- Радиальный градиент
- Конический градиент
Давайте разберемся в этом подробно.
Линейный градиент CSS
Линейный градиент — наиболее распространенный тип градиента. Мы можем установить ось градиента сверху вниз, слева направо, по диагонали или под любым углом.
Синтаксис
Первый параметр синтаксиса — это направление, которое мы хотим задать градиенту, т. е. вправо, вправо вниз и т. д. Другие параметры — это цвета, разделенные запятой. и может иметь шестнадцатеричные значения, именованные цвета, rgba, hsla.
Направление линейного градиента по умолчанию — сверху вниз.
Пример
В этом примере мы объединим 4 цвета.
Код CSS
Полный HTML-код
Мы можем видеть, что когда направление градиента пусто, по умолчанию используется направление сверху вниз.
4 шестнадцатеричных кода цвета добавляются, просто разделяя их запятой.
Радиальный градиент CSS
Радиальный градиент начинается от центра. Нам не нужно указывать угол в радиальном градиенте, как мы это делали в линейном градиенте. Вместо этого мы должны указать положение и конечную форму, такую как круг, эллипс и т. д. По умолчанию, если мы не упомянем форму, функция radius-gradient() устанавливает круг или эллипс в соответствии с размером поля.
Синтаксис
Давайте разберемся на простом примере, комбинируя синий и белый, не упоминая форму или положение цветовых переходов.
Пример
Выход
Как видно из вывода, форма принимает форму эллипса в соответствии с шириной и высотой, указанными для блока.
По умолчанию radio-gradient() принимает эллипс в качестве формы по умолчанию, положение в качестве центра и размер в качестве самого дальнего угла.
CSS Conic Gradient
Чтобы задать форму конуса, мы должны повернуть фигуру от центра.
Для этого мы будем использовать функцию conic-gradient(). Он немного отличается от радиально-градиентного, потому что переход между цветами расположен по кругу, а в радиальном он выходит из круга. Когда мы смотрим на него сверху, форма выглядит как конус, как показано на изображении; поэтому он называется коническим градиентом.
Синтаксис
Пример Давайте смешаем пять цветов, используя конический градиент без указания угла.
Код CSS
Полный код HTML
Вывод
Из вывода мы видим, что цвета выходят из центра и переход между цветами происходит по кругу.
Чтобы сделать круговую диаграмму, мы можем установить границу на 50%, и наш конический градиент будет выглядеть как круговая диаграмма.
Повторение и смешивание
Мы можем повторять цвета во всех трех типах градиентов, например функция Repeating-linear-gradient().
Давайте посмотрим на них подробно.
Повторяющийся линейный градиент
Мы можем повторять цвета в линейном градиенте, используя функцию Repeating-Linear-Gradient(). Кроме того, укажите пространство для каждого цвета, как показано в примере.
Пример
Повторим линейно розовый и белый цвета.
Вывод
Из вывода мы можем сделать вывод, что розовый и белый цвета повторяются через равные промежутки времени.
Мы также можем указать угол, под которым должен происходить переход, как показано на следующем рисунке.
Чтобы получить приведенный выше вывод, мы укажем угол.
На этом изображении линейный градиент начинается с розового и заканчивается красным.
Повторяющийся радиальный градиент
Мы можем повторить радиальный градиент, используя функцию Repeating-Radial-Gradient().
Пример В этом примере повторим розовый и белый цвета.
Выход
Из вывода видно, что просто заменив линейный на радиальный из предыдущего примера, мы получим повторяющийся радиальный градиент.
Повторяющийся конический градиент
Чтобы создать повторяющийся конический градиент, мы используем функцию Repeating-Conic-Gradient().
Пример
Давайте составим цветовой круг из трех цветов, которые повторяются через равные промежутки времени.
Выход
Здесь цветовой круг начинается с фиолетового цвета в сочетании с розовым и заканчивается белым цветом.
Заключение
- Градиент CSS — это плавный переход между цветами, установленными в качестве фонового изображения для сайта.
- Существует три типа градиентов — линейный, радиальный и конический.
- В качестве направления линейного градиента можно указать сверху вниз, слева направо, по диагонали или под любым углом.
- Радиальный градиент принимает две формы: круг и эллипс, где эллипс является значением по умолчанию.
