Это короткая заметка о самом простом способе сделать текст текстурным (маскировать), а также о плавной анимации смены цвета текста горизонтально и вертикально. Всё это позволяет реализовать CSS-правило: background-clip.
Текстурирование текста средствами CSS
Иногда в проектах попадаются красивые элементы с текстурированным текстом – в виде бумаги, воды, камня и тд. Какой же самый простой способ реализовать такой элемент?
Ответом будет:
background
text-fill-color: transparent;
background-clip: text;По факту, нам нужно просто нужно найти картинку и поставить её как background. А далее задать два правила, указаных выше, вот так (не забудьте добавить правила -webkit для соответствующих браузеров):
h1{
background: url(https://catherineasquithgallery.com/uploads/posts/2023-01/1674249463_catherineasquithgallery-com-p-sine-serii-fon-tekstura-foto-52.jpg) no-repeat;
text-fill-color: transparent;
background-clip: text;
font-size: 80px
}И мы получим текст с текстурой бумаги, камня, огня или цвета:
Плавная анимация смены цвета текста CSS
Теперь следующая часть – анимация с помощью background-clip: text; и background.
Давайте по порядку – сначала мы создаём линейный градиент:
background: linear-gradient(to top, #d4cd65, #d4cd65 50%, #68c08f 0);
То есть делаем два цвета с 0 до 50% и с 50% до 100%. Далее этот цвет мы будем двигать с помощью background-position. Градиенту ставим направление: to top – для вертикальной анимации. to left – для горизонтальной. И ставим также:
background-size: 200% 100%; //для горизонтальной
background-size: 100% 200%; //для вертикальнойЭти правила растягивают текст больше видимости – получается один цвет с 0 до 100% и второй цвет со 100% до 200%.
Для плавности обязательно задаём transition-duration: 1s; и transition-property: background
А при наведении меняем background-position: 0 100%;
Сдвигаем градиент – что создаёт эффект плавной смены цвета текста.
И вуаля – наша анимация текста готова!