CSS Magic #6. Градиент для текста. | Блог веб-разработчика MaxGraph

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

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

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

HTML

1
2
3
<div class="text">
  My gradiented text
</div>
<div class="text">
  My gradiented text
</div>

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

CSS

1
2
3
4
5
6
7
8
.text {
  font-family: sans-serif;
  font-size: 50px;
  background: linear-gradient(red, yellow);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
.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, который заливает буквы градиентом, который мы прописали ранее. Ну и чтобы буквы не залились обычный цветом — делаем его прозрачным.

 

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

Метки: , ,

Понравилось? Оцени!
12345 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *