эффект текста нокаута с помощью CSS

Текст нокаута - это метод, при котором слова вырезаются из элемента и раскрывают фон. Другими словами, вы видите только фон, потому что буквы выбивают отверстия. Очень красивые эффекты, идею которых подсмотрела на этом сайте. Я вам предложу готовые коды и если захочется применить на своих страницах, ниже разберу некоторые настройки.

Для просмотра можно скопировать любой код и вставить здесь в редакторе. Можно там же поиграться с вашими картинками и стилями. Всё очень просто.

Пример 1.

Прозрачный текст показывает изображение за ним, которое уже отрезано от формы текста.

<style>.text{
    font: bolder 12vw 'Alfa Slab One';
    text-align:center;
    margin:0;
    background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
    background-size:contain;
    margin:auto;
    width:75vw;
    background-clip: text;
    -webkit-background-clip:text;
    color: transparent;
}</style>

<div class="text">Привет
</div>

Пример 2.

CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента. С помощью режимов наложения объекты смешиваются друг с другом и получается интересный результат. В качестве фона во всех случаях возьмём любое изображение.

<style>.backdrop {
    background:url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg") center;
    background-size: contain;
    margin:auto;
    width: 55vw;
}

.text {
    color:white;
    border:4px solid;
    background: rgb(100, 149, 237);
    mix-blend-mode:multiply;
    font:bolder 12vw 'Alfa Slab One';
    text-align:center;
    margin:0;
}</style>

<div class="backdrop">
<div class="text">
Привет</div>
</div>

Стоит поиграться с фоном background: rgb(100, 149, 237);так как, если картинка имеет более светлый фон, то его лучше сделать темнее. Или наоборот. Многократного смешивание сохраняет темные цвета темными, а более светлые цвета пропускают все, что находится за ними.

Пример 3.

Если добавить значение text-shadow с большим значением радиуса размытия и получить более облачный эффект, наложить немного движения, получим эффект свечения. Очень красиво.

<style>.backdrop1 {
    background: url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg")
        center;
    background-size: contain;
    margin: auto;
    width: 75vw;
}

.text {
    color: white;
    border: 4px solid;
    background: rgb(188 143 143);
    mix-blend-mode: multiply;
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    animation: glow 3s infinite;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px white;
    }

    15% {
        text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                   -2px -2px 10px rgba(255, 255, 255, 1);
    }
    30% {
        text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                   -2px -2px 4px rgba(255, 255, 255, .7);
    }
    50% {
        text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                   -20px -20px 50px rgba(255, 255, 255, .5);
    }
}</style>
<div class="backdrop1">
    <p class="text">Привет</p>
</div>

Пример 4.

А здесь сделаем некое движение текста. При просмотре результата подведите курсор к тексту.

<style>.backdrop {
    background-size: contain;
    background-position: center;
    margin: auto;
    margin-top: 40px;
    width: 60vw;
}
.backdrop.shibuya {
    background-image: url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg");
}

.text {
    color: white;
    border: 4px white solid;
    mix-blend-mode: multiply;
    font: bolder 12vw monospace;
    text-align: center;
    margin: 0;
    cursor: pointer;
    transition: text-indent 0.5s;
}

.text:hover {
    text-indent: 5px;
    transition: text-indent 0.5s;
}

.text:hover::before {
    display: inline-block;
    content: "ОК!";
}


.text.shibuya {
    font-family: "Bungee Shade", cursive;
    background-color: rgba(100, 149, 237, 1);
    outline: 4px rgba(100, 149, 237, 1) solid;
    font-size: 8vw;

}</style>

<div class="backdrop shibuya">
<div class="text shibuya">
привет</div>
</div>

Попробуйте такие необыкновенные эффекты на блоге со своими изображениями и другим фоновым цветом. Стоит поэкспериментировать ещё и с чёрно - белым вариантом. Необычно и привлекательно.

Готовый код вставляем в тело поста в режиме HTML в нужном месте. В канун праздников можно оформить поздравления. Установить код в гаджет  HTML/JavaScript над сообщениями или на отдельной странице.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email