Текст нокаута - это метод, при котором слова вырезаются из элемента и раскрывают фон. Другими словами, вы видите только фон, потому что буквы выбивают отверстия. Очень красивые эффекты, идею которых подсмотрела на этом сайте. Я вам предложу готовые коды и если захочется применить на своих страницах, ниже разберу некоторые настройки.
Для просмотра можно скопировать любой код и вставить здесь в редакторе. Можно там же поиграться с вашими картинками и стилями. Всё очень просто.
Пример 1.
Прозрачный текст показывает изображение за ним, которое уже отрезано от формы текста.
Пример 2.
CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента. С помощью режимов наложения объекты смешиваются друг с другом и получается интересный результат. В качестве фона во всех случаях возьмём любое изображение.
Стоит поиграться с фоном background: rgb(100, 149, 237);так как, если картинка имеет более светлый фон, то его лучше сделать темнее. Или наоборот. Многократного смешивание сохраняет темные цвета темными, а более светлые цвета пропускают все, что находится за ними.
Пример 3.
Если добавить значение text-shadow с большим значением радиуса размытия и получить более облачный эффект, наложить немного движения, получим эффект свечения. Очень красиво.
Пример 4.
А здесь сделаем некое движение текста. При просмотре результата подведите курсор к тексту.
Попробуйте такие необыкновенные эффекты на блоге со своими изображениями и другим фоновым цветом. Стоит поэкспериментировать ещё и с чёрно - белым вариантом. Необычно и привлекательно.
Готовый код вставляем в тело поста в режиме HTML в нужном месте. В канун праздников можно оформить поздравления. Установить код в гаджет HTML/JavaScript над сообщениями или на отдельной странице.

Для просмотра можно скопировать любой код и вставить здесь в редакторе. Можно там же поиграться с вашими картинками и стилями. Всё очень просто.
Пример 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>
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: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>
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>
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 над сообщениями или на отдельной странице.
👇
Получайте новые сообщения с блога прямо на почту
Ох, и классно, Вика, поиграться в твоём редакторе. Всё посмотрела. Где-нибудь обязательно применю. Спасибочки за интересные шпаргалочки.
ОтветитьУдалитьЛюба, привет, я сама в нём (редакторе зависаю). Обязательно потом посмотрю. Я всегда твоей фантазии удивляюсь.
ОтветитьУдалитьКрасиво выглядит! Спасибо за интересную статью, Вика!
ОтветитьУдалитьВика, а как красиво такие эффекты на странице поста смотрятся.
Удалить