В прошлый раз поговорили о градиентах для фона элемента. Сегодня покрасим градиентом текст.
В некоторых старых браузерах способ может не работать. Для таких браузеров обычно оставляют текст без градиента или на крайняк вставляют текст в виде СВГ‑картинки.
Технически мы всё равно добавляем градиент на фон, а затем просто обрезаем фон по контуру текста и делаем сам текст прозрачным:
В некоторых старых браузерах способ может не работать. Для таких браузеров обычно оставляют текст без градиента или на крайняк вставляют текст в виде СВГ‑картинки.
.gradientText {
background-image: linear-gradient(to right, #f64f59, #12c2e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Поскольку мы используем обычный код градиентов, можно проворачивать все те же трюки, что и с обычными градиентами:
background-image: repeating-linear-gradient(45deg, #f64f59, #f64f59 10px, #12c2e9 10px, #12c2e9 20px);background-image: linear-gradient(90deg, #f64f59 5%, #c471ed 5.1%, #c471ed 30%, #12c2e9 30.1%);background-image: radial-gradient(circle at 50% -10%, #f64f59, #c471ed 45%, #12c2e9 90%);В том числе анимировать градиент через увеличение размера фона и его сдвиги:
@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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.