Как создать 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

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

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

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

ТЕГИ

Популярные

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

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

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

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

Персональная и туристическая тема блога

Персональная и туристическая тема блога

Оставить отзыв
Минималистическая тема для личного и туристического блога Onefold. Если вы ...
Читать далее
Система проектирования Gridbox: 160 блоков страниц Gridbox

Система проектирования сайта: 160 блоков страниц

Оставить отзыв
Пришло время представить вам последнюю систему проектирования сайтов, с важ...
Читать далее
Анимация Падающего Конфетти.

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

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

Категории

Follow us