Эффект вырезанного текста представляет собой интересное визуальное решение, при котором через буквы текста просвечивается фоновое изображение родительского блока. Этот эффект можно создать с помощью CSS, используя режим наложения.
Описание эффекта
Представьте себе блок с фоновым изображением, внутри которого находится текстовый элемент. С помощью определенных CSS-свойств можно добиться того, чтобы фоновое изображение просвечивалось сквозь буквы текста, создавая впечатление, будто текст вырезан из этого блока.
Шаг 1: HTML-разметка
Разметка для реализации эффекта максимально упрощена. Мы создаем родительский блок div, в который помещаем текстовый элемент h1:
<div class="background">
<h1>ТЕКСТ</h1>
</div>
Шаг 2: CSS-стилизация
Центрирование блока:
Для начала нам необходимо расположить блок с фоновым изображением по центру экрана. Это делается с помощью flexbox-модели, которая отлично подходит для центрирования элементов:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Добавление фонового изображения:
Теперь зададим фоновое изображение для блока div, которое будет покрывать весь блок:
.background {
background: url("https://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;
}
- Размер шрифта задается в единицах
vw, что делает его адаптивным к ширине экрана.
- Черный цвет текста и белый фон создают максимальный контраст, который потом будет использован для создания альфа-эффекта.
- Свойство
mix-blend-mode: lighten; обеспечивает удаление черного цвета текста, позволяя фону просвечивать сквозь него.
Поддержка браузеров
CSS-свойство mix-blend-mode поддерживается большинством современных браузеров, за исключением Internet Explorer. Поэтому этот эффект будет работать практически на всех устройствах.
Заключение
Использование эффекта вырезанного текста — это простой, но в то же время мощный способ добавить уникальность вашему веб-сайту. Экспериментируя с цветами и фоновыми изображениями, можно добиться самых разных визуальных результатов.
Пример кода можно протестировать на CodePen или в другом онлайн-редакторе, чтобы увидеть эффект в действии.
