|
Это простенький CSS трюк, покажет Вам как можно добавить эффект
градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a,
только CSS). Всё что Вам потребуется – это добавить пустой тэг
<span> в ваши заголовки (имеется ввиду <h1>,<h2> и
т.д.) и указать фоновое изображение. Этот способ работает практически
во всех браузерах.
Начнем с HTML – добавляем пустой тэг <span> в заголовок:
1.<h1><span></span>CSS Gradient Text</h1>
Ну и естественно изменяем CSS:
01.h1 {
02. font: bold 330%/100% "Lucida Grande";
03. color: #464646;
04.
05. position: relative;
06.}
07.h1 span {
08.
09. background: url(gradient.png) repeat-x;
10.
11. position: absolute;
12.
13. display: block;
14. width: 100%;
15. height: 31px;
16.}
И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).
Чуть не забыл, надо еще повоевать с IE6, для этого в HTML код вставляем следующее:
1.<!--[if lt IE 7]>
2.<style>
3.h1 span {
4. background: none;
5. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
6.}
7.</style>
8.<![endif]-->
Кстати, если Вы не хотите править горы HTML кода, за Вас это может сделать jQuery:
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.$(document).ready(function(){
4. //prepend span tag to H1
5. $("h1").prepend("<span></span>");
6.});
7.</script>
И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).
Источник: http://anton.shevchuk.name/html-and-css/css-gradient/ | 
22 Апреля 2018, Воскресенье
19:03
>Г Л А В Н А Я
>Ф А Й Л Ы
>С Т А Т Ь И
>Р Е Ф Е Р А Т Ы
>Ф О Р У М
>О Т З Ы В Ы
>Т Е С Т Ы
>F l a s h И Г Р Ы
>Ф О Т О Ш О П
