Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS градиент текста Категория: CSS
Название: CSS градиент текста
Дата добавления: 11-11-2012
Раз просмотрено: 637
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

CSS градиент текста

Хотите создавать модные заголовки, не рисуя каждый вручную в Photoshop? В этой статье вы узнаете про простой CSS трюк, позволяющий создавать вам эффект градиента текста с помощью PNG изображения (только CSS, никакого JavaScript или Flash). Все что вам нужно — это добавить пустой элемент <span> в заголовок, задать ему изображение задним фоном и позиционировать абсолютно. Этот способ отлично работает во всех браузерах и даже в Internet Explorer 6.

В результате выполнения этого урока вы получите вот такой эффект CSS градиента текста. Вы можете поэкспериментировать с различными типами изображения-градиента, чтобы получить различные результаты.

CSS градиент текста
CSS градиент текста

Преимущества

Недостатки

Как это работает?

Для того, чтобы создать CSS градиент текста, вам всего лишь надо добавить PNG градиент шириной в 1 пиксель и альфа-прозрачностью к вашему тексту:

Принцип создания CSS градиента текста

HTML

<h1><span></span>CSS градиент текста</h1>

CSS

Основным ключевым моментом в коде является относительное позиционирование заголовка и абсолютное позиционирования элемента <span>:

h1 {
	font: bold 330%/100% 'Lucida Grande', sans-serif;
	position: relative;
	color: #464646;
}
h1 span {
	background: url('gradient.png') repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

Хак для Internet Explorer 6

Internet Explorer 6 версии не может корректно работать с форматом PNG-24. И поэтому, для отображения CSS градиента текста в нем, нам потребуется этот хак для прозрачного PNG изображения. Вставьте его где-нибудь в теге <head>:

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

Упрощение с помощью jQuery

Для любителей семантики и тех, кто не хочет каждый раз вставлять в заголовки сайта теги <span>, существует простой jQuery способ, который автоматически будет добавлять теги <span> к заголовкам для создания эффекта градиента текста. Таким образом, ваша HTML разметка упроститься еще больше. Подключите библиотеку jQuery к вашему сайту и вставьте следующий скрипт на ваши страницы:

$(document).ready(function(){
	$('h1').prepend('<span></span>');
});

Это интересно: «Интересное меню».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.