Категории раздела

Форма входа

Главная » Статьи » Создание сайта

Градиентный текст с помощью CSS
Когда опубликовано: 2009 Январь 29

Купили ребенку ноутбук? и не знаете что ему предложить? Жалко денег на диски с мультфильмами?бесплатные мультфильмы онлайн - предложение для вас. Пусть смотрит мультфильмы в любое время и радуется.


Смысл прост — оформляем обыкновенный текст как конфетку с помощью 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>

Пример



Источник: http://chernev.ru/gradientnyj-tekst-s-pomoshhyu-css.html
Категория: Создание сайта | Добавил: BisHome (2009 Январь 29)
Просмотров: 3337 | Комментарии: 1 | Рейтинг: 4.2/10
Всего комментариев: 1
+1  
1 Игорь   (2009 Апрель 12 22:53) [Материал]
Идея сайта интересная. Но её реализация бездарная (на мой взгляд). Вы не Умеете правильно и понятно, для новичков преподнести материал (продвинутые и Вас доучат). Поставьте себя на место человека который только-только освоил html и css. Вы увидите куски кодов которые неизвестно куда, как , и в какой последовательности прописывать. В примере Вы показываете конечный результат, а как он получается - головоломка. Я бы посоветовал пример сделать таким образом: конечный результат / полный код в сборе. И к Вам отбоя не будет. А так это называется "рака за камень заводить. С уважением. Игорь.





Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Статистика




Copyright MyCorp © 2025
Хостинг от uCoz