Градиент на css - CSS-верстка - Портфолио Тараса - создание сайтов визиток в Харькове

Градиент на css

Пример реализации градиента заголовков с использованием CSS и PNG изображения.

Контейнер <span></span> позиционируется поверх текста и в его фон помещается полупрозрачный градиент, который закрывает текст наполовину.

<h2>Пример заголовка<span></span></h2>

С использованием CSS определяем параметры отображения заголовков H2. Важным является указание позиции: relative

h2 {
/* стили отображения, делаем как нам нравится */
font-size:220%;
color:#0079b6;
font-weight:normal;
letter-spacing:-.05em;
margin:.6em 0;

/* важно */
position:relative;
}

Мы положить полупрозрачное изображения-градиент в формате PNG как фоновое изображение поверх текста.

h2 span{

	position:absolute;

	display:block;

	top:0;

	left:0;

	height:100%;

	width:100%;

	background:url(gradient-na-css-1.png) repeat-x;

}

К сожалению, мы живем не в идеальном мире, и не все браузеры поддерживают прозрачность PNG. Так что для этих браузеров, укажите это хорошо.

* html h2 span{

	background-color:#fff;

	background-color:transparent;

	background-image: url(none.gif);

	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-na-css-1.png", sizingMethod="scale");

}

8-01-09 20:01:00

Deanit - 10-06-11 10:06:45

Иногда надо такие заголовки составлять динамически, и тут уже картинку невыгодно рендерить на сервере, пусть уж лучше браузер рисует градиенты :)
А для статики, конечно, картинка предпочтительнее

Веб-дизайнер - 26-02-10 10:02:29

gich, если вы делаете вёрстку для того, чтобы показать себе и другим кодерам, что вы соблюдаете семантику — то лучше, конечно, отказаться от этой идеи. Но если вы верстаете для заказчика и пользователя — лучше добиться нужного дизайнерского решения. Сами подумайте, какого пользователя или заказчика будет интересовать структурность кода? А вот красивые кнопочки с тенью — это важно.

gich - 24-03-09 14:03:39

А вот как вы считаете, что лучше использование неструктурных элементов либо изображения с нужным текстом и градиентом?

Написать комментарий

ВНИМАНИЕ: Все поля необходимо заполнить