Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Текст с градиентым фоном на CSS

Дата добавления: 19.12.2017 - 21:35
Добавил: Buger
Количество просмотров: 283
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Текст с градиентым фоном на CSS
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
Поделись с друзьями:
Многие пользователи задаются вопросом, как сделать градиент для текста, так вот в данном материале мы рассмотрим как можно применить к тексту в качестве фона градиент с использованием CSS.

Давайте для начала укажем заголовок на HTML:
Код
<h1>Текст с градиентным фоном</h1>

после чего зададим для элемента H1 стили:
Код
h1 {  
  font-family: sans-serif;  
  font-weight: 700;
  font-size: 5em;
  text-transform: uppercase;
background: -webkit-gradient(linear,  
  left top, left bottom,  
  from(#cedbe9),
  color-stop(17%, #aac5de),
  color-stop(50%, #6199c7),
  color-stop(51%, #3a84c3),
  color-stop(59%, #419ad6),
  to(#26558b));
background: linear-gradient(to bottom,  
  #cedbe9 0%,
  #aac5de 17%,
  #6199c7 50%,
  #3a84c3 51%,
  #419ad6 59%,
  #26558b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Вот и всё, не так уж это сложно ;)
Добавлять комментарии могут только зарегистрированные пользователи.