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
, который заливает буквы градиентом, который мы прописали ранее. Ну и чтобы буквы не залились обычный цветом — делаем его прозрачным.
В сущности, это все, друзья. Посмотреть пен можете тут:
До скорого!