CSS градиент

Автор: http://anton.shevchuk.name/

CSS Gradient

Вы хотите добавить эффект градиента для заголовков на страницах вашего сайта, но не хотите заморачиваться с Photoshop’ом? Ну тогда данная статья для Вас…

Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам потребуется - это добавить пустой тэг <span> в ваши заголовки (имеется ввиду <h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает практически во всех браузерах.

Начнем с HTML - добавляем пустой тэг <span> в заголовок:

<h1><span></span>CSS Gradient Text</h1>

 Ну и естественно изменяем 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/



Опубликовал admin
10 Мар, Понедельник 2008г.



Программирование для чайников.