Как сделать градиент css

CSS Gradients

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS определяет два типа градиентов:

  • Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяемые их центром)

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

Для создания линейного градиента необходимо определить не менее двух цветовых ограничителей. Цветовые ограничители — это цвета, которые вы хотите сделать плавными переходами между ними. Можно также задать начальную точку и направление (или угол) вместе с эффектом градиента.

Синтаксис

Линейный градиент-сверху вниз (по умолчанию)

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

Пример

Линейный градиент-слева направо

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

Пример

Линейный градиент-Диагональ

Можно сделать градиент по диагонали, указав как горизонтальные, так и вертикальные начальные позиции.

В следующем примере показан линейный градиент, начинающийся в левом верхнем углу (и направляется в нижний правый угол). Оно начинает красно, переходя к желтому цвету:

Пример

Использование углов

Если требуется больший контроль над направлением градиента, можно определить угол, а не предопределенные направления (снизу, сверху, вправо, влево, вниз вправо и т.д.).

Синтаксис

Угол указывается в виде угла между горизонтальной линией и линией градиента.

В следующем примере показано, как использовать углы на линейных градиентах:

Пример

Использование нескольких цветовых остановок

В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:

Пример

В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:

Пример

Использование прозрачности

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

Чтобы добавить прозрачность, мы используем функцию RGBA () для определения ограничителей цвета. Последний параметр в функции RGBA () может быть значением от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).

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

Пример

Повторение линейного градиента

Функция повторения-линейного градиента () используется для повторения линейных градиентов:

Пример

Повторяющийся линейный градиент:

CSS радиальные градиенты

Радиальный градиент определяется его центром.

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

Синтаксис

По умолчанию форма имеет эллипс, размер — самый дальний угол, а положение — центр.

Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)

В следующем примере показан радиальный градиент с равномерно раскрытием цветовых остановок:

Пример

Радиальный градиент-по-разному пробелом останавливается цвет

В следующем примере показан радиальный градиент с разными интервалами цвета:

Пример

Задать форму

Параметр Shape определяет форму. Он может принимать значение окружности или эллипса. Значением по умолчанию является эллипс.

В следующем примере показан радиальный градиент с формой окружности:

Пример

Использование различных ключевых слов размера

Параметр size определяет размер градиента. Он может принимать четыре значения:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Пример

Радиальный градиент с различными ключевыми словами размера:

#grad1 <
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
>

#grad2 <
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
>

Повторение радиального градиента

Функция повторения-радиального градиента () используется для повторения радиальных градиентов:

CSS Градиенты

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS определяет два типа градиентов:

  • Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяемые их центром)

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

Чтобы создать линейный градиент, вы должны определить как минимум две точки цвета. Цветовые точки — это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.

Синтаксис

Направление — сверху вниз (по умолчанию)

В следующем примере показан линейный градиент, который начинается сверху. Он начинается с красного, переходя в желтый:

Пример

Направление — слева направо

В следующем примере показан линейный градиент, начинающийся слева. Он начинается с красного, переходя в желтый:

Пример

Направление — диагональ

Вы можете создать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.

В следующем примере показан линейный градиент, который начинается слева вверху (и идёт вниз справа). Он начинает с красного, переходя в жёлтый:

Пример

Использование углов

Если вам нужен больший контроль над направлением градиента, вы можете определить угол вместо предопределенных направлений (вниз, вверх, вправо, влево, вправо внизу и т.д.). Значение 0deg эквивалентно "вверху". Значение 90deg эквивалентно "вправо". Значение 180deg эквивалентно "вниз".

Синтаксис

В следующем примере показано, как использовать углы для линейных градиентов:

Пример

Использование нескольких цветовых точек

В следующем примере показан линейный градиент (сверху вниз) с несколькими цветовыми точками:

Пример

В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:

Пример

Использование прозрачности

Градиенты CSS также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.

Чтобы добавить прозрачности, мы используем функцию rgba() для определения цветовых точек. Последний параметр в функции rgba() может иметь значение от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).

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

Пример

Повторение линейного градиента

Функция repeat-linear-gradient() используется для повторения линейных градиентов:

Пример

Повторяющийся линейный градиент:

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Градиенты в CSS

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах.

В CSS существует два типа градиентов:

  • линейные: цвета идут от одной точки к другой, по прямой линии;
  • радиальные: цвета идут от центра круга к его краям, во всех направлениях.

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

Синтаксис для линейных градиентов является довольно сложным, но основная идея заключается в следующем:

  • определить желаемые цвета;
  • где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
  • в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

  • направление вертикальное, сверху вниз;
  • первый цвет в начале (вверху);
  • второй цвет в конце (внизу).

Изменение направления

Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:

  • определить назначение градиента, с помощью таких ключевых слов, как to left top ;
  • определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

Если вы хотите задать конкретный угол, то можете использовать значение в градусах:

  • 0deg — снизу вверх;
  • 20deg — немного по диагонали, идущей по часовой стрелке;
  • 90deg — подобно 15 часам, слева направо;
  • 180deg — это значение по умолчанию, сверху вниз.

Добавление большего количества цветов

Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:

  • два цвета: 0% и 100%
  • три цвета: 0%, 50% и 100%
  • четыре цвета: 0%, 33%, 67% и 100%

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета, используя либо проценты (%), либо пиксели (px):

В данных параметрах:

  • у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
  • цвет grey ближе к верху, на 10% вместо 50%;
  • цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

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

  • форму: круг или эллипс;
  • начальную точку: которая будет центром круга или эллипса;
  • конечную точку: где будет край круга или эллипса.
  • градиент является эллипсом;
  • первый цвет начинается в центре;
  • последний цвет заканчивается в самом дальнем углу.

Начальная позиция

Начальная позиция работает как background-position. Вы можете установить её через ключевое слово at .

Конечная позиция

По умолчанию форма завершается в самом дальнем углу. Вы можете выбрать:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.

Фиксированный размер

Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры:

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.

Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.

Но довольно легко писать едва уловимые градиенты, особенно для кнопок:

Добавить комментарий

Ваш адрес email не будет опубликован.