СSS3 градиент на буквах

15 Авг
2011

image Все уже давно привыкли к такому уже обычному явлению, как CSS3 градиент, но далеко не все варианты его применения известны широкому кругу вебпрограммеров. Вспомните отлично выглядящие градиентные заголовки на сайте Apple. С CSS 3 у нас есть шанс сделать их без использования картинок! Вот так выглядит код который позвоит сделать градиент текста:
 <h1>Градиентовый текст</h1>
<style>
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;
}
</style>
И вот так этот код будет отображаться в браузере: image Рассмотрим каждое свойство отдельно: background — Тут просто обыкновенный CSS3 градиент, а через запятую свойство black, оно будит отображатся если градиент в вашем браузере не поддерживается и текст станет черным.< b>-webkit-background-clip — Это свойство ставит где должен выводится background, в нашем случае это text, значит фон выводится на тексте. color: transparent; — Делает прозрачным родной цвет текста И послесловие. Постарался объяснить все кратко, полагаю краткость всем по нраву. Этот пример будит работать под браузерами на WebKit, для прочих браузеров тоже наверняка после неких добавлений кода это будет работать!
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх