Как создать 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 удивительных эффектов навигации при наведении курсора . Не останавливайтесь, продолжайте улучшать свои сайты и делать их уникальными!

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

Конструктор интернет магазина для сайтов
Previous

Конструктор интернет магазина для сайтов

Оставить отзыв
Сегодня мы продолжаем изучать конструктор интернет...
Читать далее
Плагин Gridbox Google Maps
Далее

Плагин Gridbox Google Maps

Оставить отзыв
Отображение списков на карте является важной часть...
Читать далее

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

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

ТЕГИ

Популярные

Плагин Gridbox Google Maps

Плагин Gridbox Google Maps

Оставить отзыв
Отображение списков на карте является важной частью бизнес-каталогов, списк...
Читать далее

Последние материалы

Dauphin. Тема для веб-сайта бутик-отеля

Dauphin. Тема Noble Gridbox для веб-сайта бутик-отеля

Оставить отзыв
Встречайте величественную и благородную тему для Gridbox - Dauphin! Макет D...
Читать далее
Анимация Падающего Конфетти.

Анимация Падающего Конфетти.

Оставить отзыв
Новый год уже не за горами! Самое время украсить свой веб-сайт. Сегодня у н...
Читать далее
Плагин для Instagram для сайта. Индивидуальный подход к вашему бренду

Плагин для Instagram для сайта. Добавьте индивидуальный подход к вашему бренду

Оставить отзыв
Представляем вам плагин для вашего сайта - Instagram, который предоставляет...
Читать далее

Категории

Follow us