Эффект многослойного текста
Для создания эффекта многослойного текста, нам потребуется атрибут data-text, два псевдоэлемента, прозрачный цвет и свойство text-stroke.
HTML разметка
Создадим обычное меню и присвоим каждому тегу a свое значение через атрибут data-text.
<ul>
<li><a href="#" data-text="Home">Home</a></li>
<li><a href="#" data-text="About">About</a></li>
<li><a href="#" data-text="Portfolio">Portfolio</a></li>
<li><a href="#" data-text="Team">Team</a></li>
<li><a href="#" data-text="Contact">Contact</a></li>
</ul>
Создание пустотелого текста
Для эффекта нам нужен прозрачный текст с внешней обводкой. Добиться это можно, если указать цвет текста transparent и задать свойство text-stroke.
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
font-family: 'Poppins', sans-serif;/*семейство шрифтов*/
}
body{
display: flex;/*сетка флексбокс*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
background: #000;/*цвет фона*/
overflow: hidden;/*спрятать переполненность*/
}
ul li{
list-style: none;/*убрать черные маркеры*/
}
ul li a{
position: relative;/*относительное позиционирование*/
display: block;/*отображать как блочный элемент*/
color: transparent;/*прозрачный цвет ссылок*/
-webkit-text-stroke: 1px #fff;/*обводка текста белым цветом*/
font-size: 6.5em;/*размер шрифта*/
font-weight: 900;/*жирность шрифта*/
text-decoration: none;/*ссылки без подчеркивания*/
line-height: 1.2em;/*высота линии*/
}
Заполнение текста цветом при наведении
При наведении, пустой внутри текст заполнится белым цветом. Это будет нижний слой.
ul li a:hover{
color: #fff;/*цвет текста*/
-webkit-text-stroke: 1px #000;/*обводка текста черным цветом*/
transition: 0.5s;/*плавный переход*/
}
Наложение сверху двух слоев
С помощью псевдоэлементов before и after создадим еще два слоя с тем же самым текстом. Функция attr() получит значения из заданных атрибутов data-text и вставит их в стили. На скриншоте видно, что текст стал ярче за счет добавленных слоев.
ul li a:before,
ul li a:after {
content: attr(data-text);/*получение значений атрибутов*/
position: absolute;/*абсолютное позиционирование*/
top: 0;
left: 0;
transition: 0.5s;
Эффект многослойности при наведении
При наведении слои с пустотелым текстом заполнятся красным и зеленым цветом, образуя таким образом эффект многослойности.
ul li a:hover:before {
color: #f00;/*слой с красным текстом*/
z-index: 1;/*очередность наложения слоя*/
-webkit-text-stroke: 1px #000;
transform: translate(10px,-10px);/*смещение текста*/
}
ul li a:hover:after {
color: #0ff;/*слой с зеленым текстом*/
z-index: 2;
-webkit-text-stroke: 1px #000;
transform: translate(20px,-20px);
}
-
Создано 02.02.2022 10:17:35
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.