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

Автор: Aport Вторник, Январь 27th, 2015 Нет комментариев

Рубрика: Разное

Градиентный текст с помощью 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>

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты