• Теория
  • Теория

Направление градиента

Направления градиента задаются с помощью ключевых слов: top, bottom, left, right.

Направление градиента располагается перед списком цветов и включает в себя частицу to. Она была добавлена в синтаксис для улучшения читабельности и наглядности:

background-image: linear-gradient(to right, yellow, green);

И сразу понятно, что это: «Жёлто-зелёный градиент слева направо».

Вот примеры разных направлений градиента c цветами yellow, green:

to right
to left
to bottom
to top

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс «HTML и CSS. Профессиональная вёрстка сайтов». Цена 8000 ₽.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Линейные градиенты» тренажёра «Погружение в декоративные эффекты» можно после регистрации и оформления подписки.

Зарегистрироваться