Как создать Wow эффект с изображением в тексте?

Wow эффект с изображением в тексте

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

Выделение текста или, как его называют, маскирование текста - это визуальный эффект, когда фоновое изображение видно сквозь слова. Эта техника впечатляет и добавляет уникальность сайтам. Долгое время этот эффект достигался с помощью фоторедактора и в результате получалось только статичное плоское изображение. Но теперь, используя только код CSS, вы можете легко и без лишних усилий добавить новый слой краски на сайты Gridbox.


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

Обратите внимание!
Эффект «нокаута» можно применить к плагинам Gridbox: «Текст», «Заголовок», «Счетчик» и «Обратный отсчет».

Вот несколько замечательных примеров для вашего вдохновения. Смотрите, получайте новые идеи и воплощайте!

Wow эффект с изображением в тексте
Wow эффект с изображением в тексте
Wow эффект с изображением в тексте

Шаг 1: Скопируйте суффикс класса.

Суффикс класса должен быть помещен в поле «Суффикс класса» плагина Text, Headline, Counter или Countdown.

knockout-text

Шаг 2: Скопируйте код CSS.

Скопируйте код CSS и вставьте его в редактор кода Gridbox.

Wow эффект с изображением в тексте

.knockout-text .ba-counter >span,

.knockout-text .ba-countdown > span > span:first-child,

.knockout-text .content-text *,

.knockout-text .headline-wrapper > * {

    -webkit-text-fill-colortransparent;

    -webkit-background-clip: text;

    background-size: cover;

    background-repeatno-repeat;

    background-positioncenter;

    background-imageurl(https://www.example.com/images.jpg);

    transform: translate3d(000);

}

https://www.example.com/images.jpg следует заменить URL вашего изображения.

Вот и все, всего несколько строк кода, и вы сами добавили эффект вау на сайт Gridbox. Далее вы можете найти в наших советах и рекомендациях, как добавить 20 стильных анимаций лайтбоксов и как разнообразить навигацию по сайту с помощью 28 удивительных эффектов навигации при наведении курсора . Не останавливайтесь, продолжайте улучшать свои сайты и делать их уникальными!

СПАСИБО ЗА ВНИМАНИЕ!

Теги страницы

Это интересно