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

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

Admin
12 августа 2008

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

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

Минимум графики
Кросс-браузероность
SEO (это текст, а не графика, так что его будут учитывать поисковые системы)
Опциональнасть (текст можно легко конфигурировать — менять шрифт, цвет, да что угодно...)

Реализация градиентного текста

Пишем текст, к пример заголовок h1, и вставляем в него блок с нашим будущим градиентом (<span></span>):

<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>.

<!--[if lt IE 7]>
<style >
    h1 span {
        background: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
    }
</style>
<![endif]-->

Если Вам надоело вставлять блок с градиентом (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>

Комментарии 0

Новый комментарий

Для редактирования комментария осталось 10 минут

Комментарии отсутствуют