Как задать тексту фоновый рисунок с помощью 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.

Используем медиа-запросы вместе с LESS

Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с…

Использование CSS-функции calc() в LESS

В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их…

Google Fonts. Документация и примеры использования

Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто…

Простой способ задать отступы между flexbox элементами

Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…

Ответить