VDS за 300р от нашего партнера SpaceWeb
[57]
04 Фев 2014, 17:48

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

Привет!

Возможно ли средствами CSS реализовать градиент текста? Нужно что-бы текст на странице был именно текстом, а не картинкой.

Комментарии (2)
k-x 05.02.2014 12:15

h1 {
background: -webkit-gradient(linear, left bottom,left top,color-stop(0.2, #336),color-stop(1, #FFF));, black;
-webkit-background-clip: text;
color: transparent;
}

<h1>webonrails.ru</h1>

не знаю как там с кроссбраузерностью у этого примера. Тестил на Хороших браузерах. Также можно тупо png картинку фоном пустить.
0
systes 05.02.2014 13:07

IE и Mozilla на данный момент не поддерживают свойство background-clip: text. Так же IE не поддерживает градиент.

Для браузеров на движке webkit проще всего сделать так:

.webkit-gradient {
background: -webkit-linear-gradient(top, #FFFFFF 0px ,#D90000 100%);
-webkit-background-clip: text;
color: transparent;
}

Как только Mozilla начнет поддерживать background-clip: text кроссбраузерный вариант будет такой:

.cross-gradient {
background: -moz-linear-gradient(top , #FFFFFF 0px, #D90000 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0px ,#D90000 100%);
-moz-background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

Но в IE по прежнему ничего работать не будет.
+3

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 14649]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 10293]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 9628]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 9179]
[125]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 7455]
[315]
11 Авг 2011, 00:21
Спецификация HTML5 от W3C
[просмотров 7371]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 5351]

Вести с Хабра