Градиентный текст с помощью CSS
Уважаемые читатели, простите меня, что давно не писал, будем считать что эта статья будет считаться за несколько, потому как это просто гениально!
Смысл прост — оформляем обыкновенный текст как конфетку с помощью css.
Cначала просто посмотрите пример и поймите, что это Вам реально пригодиться!
Принцип этого приема
Принцип по своему прост и гениален, накладываем на ваш текст нужный градиент или текстуру, точно также как и в любом графическом редакторе.
Градиент должен быть прозрачной 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>Всё! Всем удачного дня!
По мотивам
Получается неудобно выделять текст
Ну а если это же сделать картинкой или флэшем, то будет удобней?
В IE почему-то каша :/
Спасибо! Полезная статья. А про айфон сильно ;)
Версия IE – 6ая.
Просто этот пример, не весь для ie6, только предпоследний пример для шестого.
Каюсь, не увидел, что написано :)
Великолепно! Способ прост и гениален одновременно.
Гм… автор настолько торопился? Ошибки в тексте достаточно детские :(
А прием интересный.
Да, а я было поверил, что градиент одним css сделан… А тут оказывается еще имэдж нужен.
А вообще, да, неплохой подход, хоть можно применять на произвольный текст одной высоты, с градиентом одного цвета :)
Насчет SEO это вы преувеличиваете. Правильный alt к картинке ничуть не хуже.
Заголовок или alt к картинке, да, Вы чертовски правы :-)
В тему про SEO – не забывайте еще про «серп» (если не используется дескрипшн).
Т.е. если это будет альтом к картинке, на странице результатов не будет этого текста. Иногда это может снижать CRT. :)
В гугле будет, но все равно нельзя сравнивать полноценный текст и альт.
Класс! Спасибо!
Жаль, правда, что не подходит для неоднородного фона…
А за что айфончег-то так?)_
Он под руку попался :-)
Спасибо за статейку. И с iPhon’ом повеселили :)
К слову, на сайте применён приём без использования графики