Эффект многослойного текста

Для создания эффекта многослойного текста, нам потребуется атрибут 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);
}

Эффект многослойного текста

Источник