• Страница 1 из 1
  • 1
Форум » Ucoz » Скрипты » Градиентный текст
Градиентный текст
TicTac
Добавлено 17.05.2011 в 03:53 · Пост #1
Группа: Администраторы
Сообщений: 103
Печатаем любой текст, например, название сайта заголовком h1 и вставляем в него теги <span></span>, это и будет нашим градиентом.
[Table]<h1><span></span>Наш градиентный текст</h1>[/Table]
Теперь давайте оформим наш текст и, главное, блок span с помощью CSS.
Code
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;
}

Всё, готово, но IE ниже 7 не поддерживает прозрачность png. Это можно исправить, вставив следующий код между тегами <head> и </head>:
Code
<style>
h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>




 

Форум » Ucoz » Скрипты » Градиентный текст
  • Страница 1 из 1
  • 1
Поиск:


Copyright UWinSoft © 2011
Хостинг от uCoz
Хостинг от uCoz