Имя:
Пароль:
Выслать пароль?  Регистрация
Google

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

Уроки веб дизайна.

Шаблоны wordpress new

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

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

Коммерческие объявления:
Последние статьи:


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

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

Все что вам понадобится - это пустой тэг <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 3.14/5

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

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

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

    Оставить комментарий
    Ваше имя:

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

    Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


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