|
Автор: http://anton.shevchuk.name/
Вы хотите добавить эффект градиента для заголовков на страницах вашего сайта,
но не хотите заморачиваться с Photoshop’ом? Ну тогда
данная статья
для Вас…
Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при
помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам
потребуется - это добавить пустой тэг <span> в ваши заголовки (имеется ввиду
<h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает
практически во всех браузерах.
Начнем с HTML - добавляем пустой тэг <span> в заголовок:
Ну и естественно изменяем CSS:
h1 {
font: bold
330%/100%
"Lucida Grande";
color: #464646;
/* тут соль */
position: relative;
}
h1 span {
/* указываем изображение с градиентом */
background: url(gradient.png)
repeat-x;
/*позиционируем абсолютно */
position: absolute;
/*отображаем блоком на всю ширину заголовка */
display: block;
width:
100%;
height: 31px;
}
И всё, множество примеров можете найти на
это странице. Сам
пример можете скачать по данной
ссылке (в архиве вы найдете все градиенты, готовые к применению).
Чуть не забыл, надо еще повоевать с IE6, для этого в HTML код вставляем
следующее:
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png',
sizingMethod='scale');
}
</style>
<![endif]-->
Кстати, если Вы не хотите править горы HTML кода, за Вас это может сделать
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>
Вольный перевод :
http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
|
