Эффект вырезанного текста

эффект вырезанного текста без JavaScript

2023-10-20 I Shar

время чтения 2 мин.

Суть эффекта вырезанного текста сводится к тому, что через буквы просвечивается фоновое изображение родительского блока.

Итак, у нас есть блок с фоновой картинкой, в котором размещается элемент с текстом. А, выбранный с помощью CSS режим наложения, позволяет создать эффект, благодаря которому фоновое изображение просвечивается через буквы текстового элемента, имитируя вырезанный текст.

Разберем подробно.

HTML

HTML разметка максимально проста, она состоит из родительского блока div, содержащего инлайновый элемент h1 с необходимым текстом:


    ТЕКСТ

CSS

Для начала разместим блок с фоновым изображением по центру:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Для этого мы используем flexbox-модель, так как данный способ является универсальным для центрирования одного вложенного элемента по горизонтали и вертикали.

Теперь добавим фоновое изображение для блока div, который мы уже разместили по центру страницы:

.background {
    background: url("/images.unsplash.com/photo-1509515837298-2c67a3933321?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80") center;
    background-size: cover;
}

Таким образом, мы создаем фоновое изображение, пропорциональное размещаемому тексту.

Наконец нужно стилизовать элемент с текстом:

h1 {
    margin: 0;
    padding: 0;
    font-size: 15vw;
    mix-blend-mode: lighten;
    color: #000;
    background-color: #fff;
}

Для начала устанавливаем нужный размер шрифта с помощью viewport единиц (vw).

Затем определяем цвет шрифта, как черный, а цвет фона инлайнового элемента, содержащего текст, как белый. Таким образом мы получаем максимальный контраст. Цвет шрифта можно менять для достижения максимально интересного альфа-эффекта.

Последний шаг: включение режима смешивания mix-blend-mode: lighten;. Так как в данном примере используется полный контраст цветов (черный/белый), черный текст будет полностью удален, показывая все, что находится под ним.

Результат можно посмотреть на codepen.