Скачать для фотошопа и создания сайта

Для фотошопа и сайта

Регистрация Вход

Главная сайта

Форум Для фотошопа и сайта

Страница 1 из 1
1

Градиентный текст с помощью CSS.

Kenik

Дата: Среда, 03.02.2010, 00:13 | Сообщение # 1

Администратор

Сообщений:: 2300

Замечания:: 0

Offline

Смысл прост — оформляем обыкновенный текст как конфетку с помощью css. Cначала просто посмотрите пример и поймите, что это Вам реально пригодиться!

Принцип по своему прост и гениален, накладываем на ваш текст нужный градиент или текстуру, точно также как и в любом графическом редакторе.

Градиент должен быть прозрачной png картинкой.

Плюсы этого способа

* Минимум графики
* Кросс-браузероность
* SEO(Это ТЕКСТ, а не графика, так что его будут учитывать ПС)
* Опциональнасть (Текст можно легко конфигурировать — менять шрифт, цвет, да что угодно…)

Реализация способа

Пишими текст, к пример заголовок(h1) Вставляем в него блок с нашим будущим градиентом().

Код:

Code

<h1><span></span>Привет, Я градиентный текст</h1>

Теперь оформляем текст и самое главное блок.

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;
}

К сожалению Internet Explorer ниже седьмого, не признает прозрачность png, исправим это добавив следующий код между тегами <head></head>.



Если Вам надоело вставлять блок с градиентом(span) в текст, это можно легко исправить с помощью 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>

Градиентный текст с помощью CSS.

Страница 1 из 1
1