CSS Magic #6. Градиент для текста

Нередко дизайнеры используют градиент для текста, и нам, верстальщикам, приходится все это дело реализовывать. Пока еще не придумано нормальных вариантов сделать градиент для текста, поэтому у нас есть лишь вариант, который поддерживают не все браузеры. Смотрим!

HTML

<div class="text">
  My gradiented text
</div>

Самый обычный html-див.

CSS

.text {
  font-family: sans-serif;
  font-size: 50px;
  background: linear-gradient(red, yellow);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

Немного магии. Свойства желательно писать именно в таком порядке — background, background-clip, color. Собственно, основную магию как раз и дает background-clip:text, который заливает буквы градиентом, который мы прописали ранее. Ну и чтобы буквы не залились обычный цветом — делаем его прозрачным.

В сущности, это все, друзья. Посмотреть пен можете тут:

До скорого!