Смысл прост — оформляем обыкновенный текст как конфетку с помощью css. Cначала просто посмотрите пример и поймите, что это Вам реально пригодится!
Принцип по своему прост и гениален, накладываем на ваш текст нужный градиент или текстуру, точно также как и в любом графическом редакторе. Градиент должен быть прозрачной png картинкой.
Плюсы этого способа:
Пишем текст, к пример заголовок h1, и вставляем в него блок с нашим будущим градиентом (<span></span>):
<h1><span></span>Привет, я градиентный текст</h1>
Теперь оформляем текст и самое главное блок:
h1 { font: bold 330%/100% "Lucida Grande"; position: relative; color: #464646; } h1 span { background: url(gradient.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }
К сожалению, Internet Explorer ниже седьмого не признает прозрачность png, исправим это добавив следующий код между тегами <head></head>.
<!--[if lt IE 7]> <style > h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); } </style> <![endif]-->
Если Вам надоело вставлять блок с градиентом(span) в текст, это можно легко исправить с помощью jQuery:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //prepend span tag to H1 $("h1").prepend("<span></span>"); }); </script>
© 2008 - 2024 Все права защищены