Градиентный текст

Рассмотрим градиент для текста и рамки, сделаем текст прозрачным, а также реализуем интересный эффект при наведении.

Градиент текста CSS

На момент обновления статьи градиентный текст поддерживается более 97% браузеров с учётом -webkit- префикса.

<p class="my-gradient-txt">Градиентный текст</p>
.my-gradient-txt {
    background: linear-gradient(to right, #ad1457, #4a148c);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}

Пример — Градиентный текст

  • -webkit-background-clip — как выводиться цвету фона под границами блока,
  • значение text — позволяет цвету фона распространяться только на текст нашего элемента.

Таким образом можно реализовать любой градиент для текста.
Например, используем repeating-linear-gradient.

repeating-linear-gradient(45deg, #fff, #fff 1px, #4a148c 4px);

Пример — Полосатый текст с помощью CSS

Градиентная рамка

Для создания градиентной рамки, используйте следующий код:

<p class="my-gradient-border">Градиентная рамка</p>
.my-gradient-border {
    border: 5px solid;
    border-image: linear-gradient(to right, #f0f, #ff0);
    border-image-slice: 1;
}

Пример — Градиентная рамка

Прозрачный текст

mix-blend-mode — выбор режима смешивания цветов элемента со слоями ниже. multiply — режим, при котором происходит умножение цвета текста и цвета фона, с последующей заменой фона.

Если браузер не будет поддерживать свойство, то текст будет отображён белым цветом.

<p class="my-transparent-txt">Прозрачный текст</p>
.my-transparent-txt {
    mix-blend-mode: multiply;
    display: inline-block;
    color: white;
}

Пример — Прозрачный текст

Прозрачный текст с обводкой

Чтобы реализовать прозрачный текст с обводкой, поспользуемся css-свойством text-stroke:

.text-border {
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
}

Интересный эффект при наведении

.wow-hover {
    position: relative
}
.wow-hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1.5em;
    width: 110%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.7), transparent) no-repeat;
    background-position: -1em 0%;
    background-size: 2.5em 100%;
    transform: skewX(-45deg);
}
.wow-hover:hover::after {
    transition: 2.2s linear;
    background-position: 100% 0%;
}

Пример — Наведи на меня

Лучшие плагины для VS Code Стилизация чекбокса