24 июня 2020
Мы хотим поделиться с вами новыми советами и рекомендациями о том, как сделать ваш сайт более привлекательным с помощью всего лишь нескольких строк кода CSS. А именно, мы собираемся показать вам, как оживить ваши сайты, добавив текстовый эффект Knockout и улучшить свои навыки использования кода CSS.
Выделение текста или, как его называют, маскирование текста - это визуальный эффект, когда фоновое изображение видно сквозь слова. Эта техника впечатляет и добавляет уникальность сайтам. Долгое время этот эффект достигался с помощью фоторедактора и в результате получалось только статичное плоское изображение. Но теперь, используя только код CSS, вы можете легко и без лишних усилий добавить новый слой краски на сайты Gridbox.
Эффект нокаутирующего текста открывает новые идеи для дизайна заголовков и текста. Например, вы можете добавить слоган вашей компании, используя текстовый эффект нокаута, и сфокусировать посетителей на главной идее вашего бизнеса. Прежде чем начать, мы рекомендуем использовать громоздкий шрифт для лучшего эффекта.
Обратите внимание!
Эффект «нокаута» можно применить к плагинам Gridbox: «Текст», «Заголовок», «Счетчик» и «Обратный отсчет».
Вот несколько замечательных примеров для вашего вдохновения. Смотрите, получайте новые идеи и воплощайте!
Шаг 1: Скопируйте суффикс класса.
Суффикс класса должен быть помещен в поле «Суффикс класса» плагина Text, Headline, Counter или Countdown.
knockout-text
Шаг 2: Скопируйте код CSS.
Скопируйте код CSS и вставьте его в редактор кода Gridbox.
.knockout-text .ba-counter >span,
.knockout-text .ba-countdown > span > span:first-child,
.knockout-text .content-text *,
.knockout-text .headline-wrapper > * {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(https://www.example.com/images.jpg);
transform: translate3d(0, 0, 0);
}
https://www.example.com/images.jpg следует заменить URL вашего изображения.
Вот и все, всего несколько строк кода, и вы сами добавили эффект вау на сайт Gridbox. Далее вы можете найти в наших советах и рекомендациях, как добавить 20 стильных анимаций лайтбоксов и как разнообразить навигацию по сайту с помощью 28 удивительных эффектов навигации при наведении курсора . Не останавливайтесь, продолжайте улучшать свои сайты и делать их уникальными!