Привет!
Возможно ли средствами CSS реализовать градиент текста? Нужно что-бы текст на странице был именно текстом, а не картинкой.
#css
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>
.webkit-gradient { background: -webkit-linear-gradient(top, #FFFFFF 0px ,#D90000 100%); -webkit-background-clip: text; color: transparent; }
.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; }
Для отправки комментария вам необходимо авторизоваться.
Вести с Хабра
не знаю как там с кроссбраузерностью у этого примера. Тестил на Хороших браузерах. Также можно тупо png картинку фоном пустить.
Для браузеров на движке webkit проще всего сделать так:
Как только Mozilla начнет поддерживать background-clip: text кроссбраузерный вариант будет такой:
Но в IE по прежнему ничего работать не будет.