варианты градиента текста на CSS

Привет, друзья. Используя свойство градиент gradient можно не только сделать красивый фон или стили рамок, но и применить его к тексту. Нам не нужно использовать изображения для отображения текста с цветовой градацией. Просто поиграемся со стилями CSS, и такой текст не будет увеличивать загрузку блога.

Градацию CSS можно применить к заголовку блога, заголовку сообщения или другому тексту, чтобы он отличался от другого . Мы можем использовать в заголовке блога, заголовке сообщения, h1, h2, h3, h4, h5 или h6 или в другом тексте,чтобы он стал более ярким.

Посмотрите ниже, гда показываю просто пример с градацией текста из трёх цветов.

Вот такой красивый текст получаем используя свойство градиент

<style>.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}</style>

Вы можете заменить фон, отмеченный в коде розовым цветом на желаемый. Потом, когда будете писать сообщение добавьте класс gradient-text.

Так примерно

<h3 class="gradient-text">Вот такой красивый текст получаем используя свойство градиент</h3>

А сейчас возьмём градиент рамки (ссылка выше) и текста

Градиентные границы и текст

Код

<div class="gradient-all">Градиентные границы и текст</div>

<style>
.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}</style>

Играемся дальше и сделаем наш текст полосатым

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

Код

<p class="striped-text">Полосатый текст</p>

<style>.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 40px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #006633 2px, #006633 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #006633;
  display: table;
  margin: 20px auto; 
}</style>

Можно и тень в полосочку сделать

Полосатая тень

Код

<p class="striped-shadow">Полосатая тень </p>

<style>.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #006633, #006633 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}</style>

Мудрим дальше и делаем изображение в тексте

Изображение внутри текста

<style>
.izo {
  background: url(https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A%0A) 100% 50%;
  background-size: cover;
}
.izo h2 {
  color: #CC0000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>

<div class="izo">
  <h2>Изображение внутри текста</h2>


Меняйте на своё усмотрение шестизначные значения цветов  #12BCB0 текста, тени, рамки. Воспользуйтесь этим редактором.Тут бы только фантазии хватило.

Коды, как обычно вставляем в редакторе сообщения в режиме HTML. Я выше говорила, что можно применить к тегам заголовков. Но это уже через вкладку Тема. Если кто не знает пока то статья для вас. Или спрашивайте в комментариях.

Всем добра и до встречи. 

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email