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

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

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

<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;
}

На момент написания статьи градиентный текст поддерживается 90% браузеров.

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

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

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

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

Полосатый рейс

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

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

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

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

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

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

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

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

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

.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%;
}

Наведи на меня

Изучаем английский
EnglishRussian
Mix-blend-modeРежим смешивания
MultiplyУмножать
SkewНаклон
admin