В прошлый раз поговорили о градиентах для фона элемента. Сегодня покрасим градиентом текст.

В некоторых старых браузерах способ может не работать. Для таких браузеров обычно оставляют текст без градиента или на крайняк вставляют текст в виде СВГ‑картинки.

Технически мы всё равно добавляем градиент на фон, а затем просто обрезаем фон по контуру текста и делаем сам текст прозрачным:

В некоторых старых браузерах способ может не работать. Для таких браузеров обычно оставляют текст без градиента или на крайняк вставляют текст в виде СВГ‑картинки.

Fluggegecheimen!
.gradientText {
  background-image: linear-gradient(to right, #f64f59, #12c2e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

Fluggegecheimen!
background-image: repeating-linear-gradient(45deg, #f64f59, #f64f59 10px, #12c2e9 10px, #12c2e9 20px);
Fluggegecheimen!
background-image: linear-gradient(90deg, #f64f59 5%, #c471ed 5.1%, #c471ed 30%, #12c2e9 30.1%);
Fluggegecheimen!
background-image: radial-gradient(circle at 50% -10%, #f64f59, #c471ed 45%, #12c2e9 90%);

В том числе анимировать градиент через увеличение размера фона и его сдвиги:

Fluggegecheimen!
@keyframes move-background {
  0% { background-position: 0% 0% }
  50% { background-position: 100% 0% }
  100% { background-position: 0% 0% }
}
.gradientText.is__animated {
  background-image: linear-gradient(-45deg, #f64f59, #c471ed, #12c2e9);
  background-size: 500% 500%;
  animation: move-background 15s linear infinite;
}

P. S. На прошлой неделе прошёл мой мастер‑класс по веб‑инспектору для всех‑всех‑всех. Мне понравился формат, поэтому на следующей неделе в среду в 18:00 мск проведу ещё один мастер‑класс — сверстаем и оживим ХТМЛ‑форму без сложного программирования, используя ноукод‑сервис Формкип. Следите за анонсами в Телеграме бюро.

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы