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

Градиентный текст для браузеров Webkit

<style>
.raz {
  background: linear-gradient(green, red);  /* подробнее про градиенты */ 
  -webkit-background-clip: text;  /* подробнее про background-clip */ 
  color: transparent;
}
</style>

Образец

<div class="raz">Образец</div>

Переход от одного цвета в другой происходит для всего блока, но отображается только на месте букв.

Первая строка
Вторая строка
Третья строка

<div class="raz">
  Первая строка<br>
  Вторая строка<br>
  Третья строка
</div>

Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.

Картинка прозрачна в тех местах, где нет текста

Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).

Разноцветный градиент

Переливающееся слово
<style>
.dva { 
  background: linear-gradient(green, red);
}
.dva h1 { 
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>

<div class="dva">
  <h1>Переливающееся слово<h1>
</div>

Картинка как фон у текста

Изображение внутри буквы
<style>
.dva { 
  background: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) 100% 50%;
  background-size: cover;
}
.dva h1 { 
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>

<div class="dva">
  <h1>Изображение внутри буквы<h1>
</div>

Внимание: примечателен пример из комментария 11 после статьи.

Градиент у текста для остальных браузеров

Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.

Образец

<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.0));
}
</style>

<div class="dva">Образец</div>

Заполняющийся текст

Навести
<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%;
  background-size: 100% 100%;
}
.dva:hover:after {
  transition: 12s linear;
  background-size: 0 100%;
}
</style>

<div class="dva">Образец</div>

Пробегающий по буквам блик

На мой вкус, лучше анимацией сделать как у Сбербанка.

Навести

<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  transform: skewX(-50deg);
}
.dva:hover:after {
  transition: 2s linear;
  background-position: 100% 0%;
}
</style>

<div class="dva">Образец</div>
в f t
наверх ↑

13 комментариев:

Marina Voronova
очень круто! спасибо
Marina Voronova
"Градиент у текста для остальных браузеров" не работает((
NMitra
Покажите, что вы делаете, ваш тестовый вариант.
Джодржио Бертони
"Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports."
Объясните, пожалуйста, как?
NMitra
@supports (-webkit-background-clip: text;) {
.raz {
background: linear-gradient(green, red);
-webkit-background-clip: text;
color: transparent;
}
}
Igor Zeleny
"Градиент у текста для остальных браузеров", таки, не работает.
Если поменять цвет градиента то вот что получается - http://jsfiddle.net/3t7ehcdf/
Или я что то не так делаю
NMitra
В том то и дело, что в этом случае градиент может быть только тем же цветом, что и фон
Igor Zeleny
Так не интересно) А не подскажите как еще сделать градиент для текста посредством только css
NMitra
С помощью Canvas посмотрите (тоже с поддержкой так себе) или картинкой в Фотошопе. Больше идей нет пока.
Анонимный
Добрый день. Как вам такой пример https://cloud.mail.ru/public/EdP1/pUfE26Uh7
NMitra
Добрый день, продублирую ваш пример http://codepen.io/akwright/pen/raBdOO
На мой взгляд так проще http://jsfiddle.net/NMitra/gbmtcvfk/4/
Игорь Тетерин
Оч крутой последний эффект, просто заглядение.. Применить!
NMitra
Спасибо за отзыв!