Информер курса валют ЦБ РФ   •   Магазин расширений
420 просм
1 комм
Поделиться:

Накладываем градиент на текст с помощью CSS3

В свое время на одном из моих сайтов было необходимо нанести градиент на некоторые участки текста. Первое, что приходит в голову – это просто наложить градиент на текст в каком-нибудь текстовом редакторе, например, в Photoshop, сохранить как картинку и разместить на сайте.

Минусы: это картинка (то есть лишний вес страницы, отсутствие возможности индексирования контента; если вы допустили ошибку или захотели изменить содержимое текста – необходимо проделать всю работу с графикой вновь).

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

Поэтому я покажу вам, как с помощью CSS3 и небольшой «магии» добиться лучшего решения этой задачи.

Все, что вам необходимо – это нужному блоку с текстом присвоить следующие стили:

-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 

И, соответственно, само свойство градиента:

background: linear-gradient(#fff, #000);

Итоговый пример будет выглядеть следующим образом:

Накладываем градиент на текст с помощью CSS3

О том, какие типы градиента и возможности их настройки существуют, вы можете почитать в этой статье.

Реализация корректно работает в браузерах Opera, браузерах на движке Chromium (Google Chrome, Яндекс.Браузер, Амиго и других), FireFox и Microsoft Edge.

Internet Explorer, к сожалению, не радует в этом вопросе, но тут решать вам. Удачных вам разработок.

1
комментарий
Дмитрий
13.06 в 14:17
Здорово !!!
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария