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

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

Градиент текста 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
07/05/2019 09:48