Градиент на нашей стороне

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

Cуть: накладываем на текст нужный градиент или текстуру, точно также как и в любом графическом редакторе.

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

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

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

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

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

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

Пишими текст, к примеру заголовок (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>

Теперь можно посмотреть пример или скачать его в архиве.

Источник: webdesignerwall.com

Оцени публикацию:
  • 3,14
Оценили человек: 3

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • display:block лишний в span, а так понравилось, спасибо!!!
    03 августа 2011, 07:44 коммент полезен : 0 # Павел1
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »