Как задать тексту фоновый рисунок с помощью CSS-свойства background-clip
Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip.
HTML — проще некуда:
<h3 class="mask">Home</h3>
CSS — максимально упрощенный, чтобы было понятно, что нужно именно для данного эффекта:
.mask {
color: transparent;
background-color: transparent;
background-image: url('http://denis-creative.com/wp-content/uploads/2019/01/bg-title-meaning.png');
-webkit-background-clip: text;
}
Пример текста с фоновым рисунком:
See the Pen CSS3 Text Mask by Denis (@deniscreative) on CodePen.
Второй вариант фона для текста с небольшой анимацией при наведении на текст, анимация создана с помощью изменения размера фонового рисунка.
See the Pen CSS3 Text Mask by Denis (@deniscreative) on CodePen.
Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с…
В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их…
Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто…
Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…