Css gradient: linear-gradient() — CSS: Cascading Style Sheets

CSS Gradient — Темы Scaler

Обзор

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

Что такое градиенты CSS?

Градиенты представляют собой сочетание двух или более цветов (где один цвет плавно переходит в другой) и отображают плавный переход между ближайшими точками цветов на нашем сайте. С помощью градиентов CSS мы можем контролировать направление и изменения, которые должны происходить в цветах.
Градиенты CSS — это фоновые изображения, установленные в трех формах: —

• linear-gradient — переход между двумя или более цветами происходит вдоль линейного направления в линейном градиенте.
• радиальный градиент — Градиент цвета начинается от центра его радиального градиента.
• conic-gradient — Переход между цветами происходит вокруг центра.
  Что ж, это может сбивать с толку. Как мы устанавливаем направление цветов? Давайте разберемся со следующим изображением.

Мы можем добавить градиент тремя способами, как показано на изображении выше.

Давайте рассмотрим это подробно в следующих разделах.

Почему градиент CSS?

• Градиенты CSS обеспечивают лучшую видимость изображений при увеличении страницы, поскольку они генерируются самим браузером.
• Это лучший способ создания адаптивных веб-сайтов, где размер страницы меняется.
• Вы можете сократить использование полосы пропускания и времени загрузки до времени загрузки фонового градиента CSS.
• Вместо использования фоновых изображений для эффекта градиента мы используем CSS3 Gradient, который делает переход цветов плавным.

Три типа CSS-градиентов

Как мы видели выше, есть три способа добавления перехода к цветам. Это: —

• Линейный градиент
• Радиальный градиент
• Конический градиент

Давайте разберемся в этом подробно.

Линейный градиент CSS

Линейный градиент — наиболее распространенный тип градиента. Мы можем установить ось градиента сверху вниз, слева направо, по диагонали или под любым углом.

Синтаксис

Первый параметр синтаксиса — это направление, которое мы хотим придать градиенту, т. е. вправо, вправо вниз и т. д. Другие параметры — это цвета, разделенные запятой, и они могут иметь значения hex, named colors, 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 — это плавный переход между цветами, установленными в качестве фонового изображения для сайта.
• Существует три типа градиентов: линейный, радиальный и конический.
• В качестве направления линейного градиента можно указать сверху вниз, слева направо, по диагонали или под любым углом.
• Радиальный градиент принимает две формы: круг и эллипс, где эллипс является значением по умолчанию.
• В Conic Gradient переход происходит по кругу.

Текст | Mantine

Используйте компонент «Текст» для отображения текста и ссылок со стилями темы. Стили управляющего текста с реквизитами:

Очень мелкий текст

Мелкий текст

Текст по умолчанию

Крупный текст

Очень крупный текст

Полужирный

Жирный

It alic

Подчеркнутый

Зачеркнутый

Затемненный текст

Синий текст

Бирюзовый 4 текст

Прописные буквы

Текст с заглавными буквами

Выровнено по центру

Выровнено по правому краю

Использовать градиент в качестве цвета текста:

• установить 9026 4 вариант от до градиент
• набор градиент от до { from: 'color-from', to: 'color-to', deg: 135 } , где
  • color-from и 9 0264 color-to — это цвет из theme. colors
  • град. — линейный градиент 9 град.0017

Индиго-голубой градиент

Установить обрезать реквизит для добавления переполнение текста: многоточие стили:

Lorem ipsum dolor sit amet consectetur adipisic элит. Unde Provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis, excuri iste sint itaque sunt Laborum. Нихил?

Укажите максимальное количество строк с помощью lineClamp prop. Этот параметр использует -webkit-line-clamp Свойство CSS (caniuse). Обратите внимание, что padding-bottom не может быть установлен на текстовом элементе:

Из Bulbapedia: Бульбазавр — маленький четвероногий покемон с сине-зеленой кожей с более темными пятнами. У него красные глаза с белыми зрачками, заостренные уши на макушке и короткая тупая морда с широким ртом. Пара маленьких заостренных зубов видна на верхней челюсти, когда рот открыт. Каждая из его толстых ног заканчивается тремя острыми когтями. На спине Бульбазавра находится зеленая луковица растения, выращенная из семени, посаженного туда при рождении. Луковица также скрывает две тонкие, похожие на щупальца лозы и обеспечивает ее энергией за счет фотосинтеза, а также за счет богатых питательными веществами семян, содержащихся внутри.

LineClamp

Зажим линии также можно использовать с любыми дочерними элементами (не только строками), например с TypographyStylesProvider:

Зажим линии с TypographyStylesProvider

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed corporis voluptates preesentium Inventore, sapiente ex tempore sit consequatur debitis non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae perspiciatis.

Текст всегда применяет стили font-size, font-family и line-height, но в некоторых случаях это нежелательное поведение.