CSS Academy · Урок

Градиенты: линейные и радиальные

Создавайте плавные переходы цветов с помощью linear-gradient() и radial-gradient().

Урок 3 из 413 шагов

«Градиенты: линейные и радиальные» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

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

Градиенты CSS — это сгенерированные изображения, для которых не нужен файл изображения; они обеспечивают переход между двумя или более цветами. Их задают как значения background-image или сокращённой записи background.

Основы linear-gradient()

Линейный градиент обеспечивает переход цветов вдоль прямой линии. Первый аргумент задаёт направление, за ним следуют цветовые точки.

<div class="gradient-demo"></div>

Направление градиента: ключевые слова и углы

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

<div class="dir-keyword"></div>
  <div class="dir-45deg"></div>
  <div class="dir-135deg"></div>

Несколько цветовых точек

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

<div class="stops"></div>

Резкие переходы цветов

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

<div class="hard-stop"></div>

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

repeating-linear-gradient() повторяет узор градиента, создавая полосы и текстуры.

<div class="stripes"></div>

Основы radial-gradient()

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

<div class="radial-demo"></div>

Форма и размер радиального градиента

Управляйте формой градиента (circle или ellipse) и ключевым словом, задающим его протяжённость:

<div class="radial-circle"></div>
  <div class="radial-ellipse"></div>

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

Используйте at <position> после формы и размера, чтобы переместить центр радиального градиента.

<div class="radial-position"></div>

Конический градиент

conic-gradient() распределяет цвета вокруг центральной точки, подобно круговой диаграмме. Для него требуется начальный угол from и необязательная позиция at.

<div class="conic-demo"></div>

Прозрачность градиента

Используйте transparent или rgba() в цветовых точках градиента, чтобы обеспечить плавное появление или исчезновение цвета относительно фонового цвета элемента.

<div class="fade-overlay"></div>

Проверка

Какая функция CSS создаёт градиент, расходящийся из центральной точки наружу?

Ответь в интерактивном уроке

Итоги

Линейные градиенты проходят вдоль линии, радиальные расходятся наружу, а конические распределяются вокруг точки. Используйте резкие переходы для создания полос. Все функции градиентов являются значениями background-image и создают изображения без внешних файлов.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Градиенты: линейные и радиальные» бесплатный?

Да — полный текст урока «Градиенты: линейные и радиальные» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Градиенты: линейные и радиальные»?

Создавайте плавные переходы цветов с помощью linear-gradient() и radial-gradient(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Градиенты: линейные и радиальные»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy