Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Эффект текстового градиента в CSS

Хотите ли вы создавать модные заголовки, не прибегая к рендерингу каждого в Photoshop? Вот простой прием CSS - он покажет вам, как создавать эффект текстового градиента при помощи изображения формата PNG (чистый CSS, никакого Javascript или Flash).

Новое в рубрике:

5 простых, но полезных атрибутов CSS

Создаем аккуратную семантическую верстку

Знакомство с CSS спрайтами изображений

30 важнейших HTML правил для новичков

Использование прозрачных PNG в IE6

Все что вам понадобится - это пустой тэг <span> в заголовке и применить наложение фонового изображения используя свойство CSS position:absolute. Этот прием уже тестировался на большинстве браузеров: Firefox, Safari, Opera, и даже Internet Explorer 6. Прочитайте статью до конца, чтобы узнать, как это сделать.

Просмотреть демо

Скачать демо в ZIP архиве

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

Этот прием чистый CSS, никакого Javascript или Flash. Работает на большинстве браузеров, включая IE6 (нужен фикс PNG)

Прием идеален для дизайна заголовков. Вам не придется рендерить каждый заголовок в Photoshop. Это сохранит ваше время и интернет-канал.

Можно применять на любых веб-шрифтах. При этом шрифт остается масштабируемым.

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

Сам прием очень прост. Фактически мы всего лишь накладываем однопиксельное градиентное изображение PNG (с альфа прозрачностью) поверх текста.

Разметка HTML

<h1><span></span>CSS Gradient Text</h1>

Код CSS

Ключевой момент здесь: h1 { position: relative } и h1 span { position: absolute }


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;
}

Вот и все! Вот мы и закончили. Кликните здесь,чтобы просмотреть мою демо-страницу

Как заставить это работать в IE6

Так как IE6 не способен правильно отображать формать PNG, необходим следующий фикс для того, чтобы отображать прозрачный PNG (добавьте в любом месте между тэгом <head>):


<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

Вот почему мы ненавидим IE 6!

Вставочная версия jQuery (для любителей семантики)

Если вы не хотите иметь пустой тэг <span> в заголовке, вы можете использовать Javascript, чтобы присоединить тэг <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>

Еще примеры

Хотите сделать Web 2.0 блестящий текст?

Действительно, вы можете применять этот прием на любом сплошном фоновом цвете (только если цвет вашего градиента такой же, как и фоновый цвет).

Узор / Текстура

Также можно применять этот прием мозаичным фоновым изображением. Смотрите, вот пример узора зебры. Так что, будьте креативны!

Ограничения и другое…

Этот прием работает только со сплошными элементами фона. Цвет вашего градиента (изображение PNG) должен быть таким же, как и цвет вашего фона.

Необходим фикс PNG, если вы планируете работать с IE 6.

Если ваше градиентное изображение выше заголовка, текст нельзя будет выделить.

Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

Оцените, пожалуйста, эту статью:

Currently 2.88/5
1
2
3
4
5

Рейтинг: 2.9/5 (голосов: 17)

Опубликовано: 27 апреля 2009 | Просмотров: 17311 | Страница для печати

Читать комментарии [10] на форуме.

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

Подписаться на RSS,
чтобы всегда
быть в курсе!

О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте

© 2024 При перепечатке и/или другом использовании материалов сайта - активная ссылка на сайт обязательна.
Сайт свёрстан на движке www.danneo.com [ PG.t : 0.03 | DB.q : 11 | DB.t : 0.01 ]

Последние новости:

Эффект текстового градиента в CSS

Новое в рубрике:

Проверка на человечность: