расставляй правильно приоритеты и не отвлекайся на мелочи

Использование прозрачности PNG формата в веб дизайне

Великолепная статья от Джефф Крофт (Jeff Croft) с моим вольным переводом, небольшим исследованием и дополнением ввиде еще одной сводной статьи.

PNG, GIF и JPEG

PNG формат не получает должного внимания от сообщества веб-дизайнеров и тому есть вполне понятная причина. До недавнего времени небыло возможности использовать все преимущества формата и обеспечивать его надежную работу во всех браузерах. Но с появлением поддержки PNG в Internet Explorer 7 и некоторых подручных JavaScript и CSS трюков для устаревших браузеров, мы можем использовать PNG изображения значительно расширив наш дизайнерский лексикон.

Что такое PNG?
Что если я хочу поместить мое персональное лого на все мои фотографии? Да, это возможно — открыв каждое изображение в Photoshop, применив лого и пересохранив картинку. Однако, это будет тяжело сделать когда будут постоянно обновляться тысячи изображений, к тому-же, иногда, я могу вообще оказаться далеко от компьютера (к примеру, когда посылаю фотографии с моего сотового на Flickr). Было бы замечательно, если лого могло добавляться автоматически? PNG может сделать это.
Обычно PNG произносится как «пинг» и означает Portable Network Graphics. Это формат с минимальными потерями на сжатии. Другими словами он сохраняет графическое изображение с минимальными размерами файла без уменьшения качества картинки. Он был разработан на смену вездесущего GIF формата, легальное использование которого требовало наличие лицензии у производителей графического софта (сейчас действие патента на GIF/LZW истекло). PNG это международный стандарт (ISO IEC 15948:2003) в официальных рекомендациях W3C.

Более того, являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:
Лучшее сжатие: Для большинства изображений PNG достигает меньшего размера файла чем GIF
Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
Прозрачность альфа канала: Когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал

Уместно заметить, что PNG не позволяет делать анимацию, как это делает GIF. Но существует стандарт Multiple-image Network Graphics (MNG), который это позволяет, но он не так широко поддерживается веб браузерами и графическими редакторами.

Итак, почему же GIF все еще так популярен?

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

Из-за того, что Internet Explorer 6 и более ранние версии не поддерживают полный спектр PNG возможностей (включая прозрачность альфа канала) людям остается верить (хотя это неверно), что Internet Explorer не поддерживает PNG вовсе или как минимум не поддерживает прозрачность. В действительности Internet Explorer 5 и 6 поддерживают достаточно спецификаций PNG, делая его функционально эквивалентным (или более того) неанимированным GIF изображениям. Все другие упоминаемые браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari, и Camino полностью поддерживают PNG прозрачность.

Кроме этой неверной концепции о поддержке браузером, встроенная в GIF анимация была (и продолжает быть) основной причиной его успеха. Хотя, за несколько лет, использование GIF становится все менее популярным по сравнению с другими технологиями (к примеру Flash), которые становятся более пригодными для анимации.

Прозрачность — ключевая характеристика GIF и PNG, которая часто является причиной выбора используемого формата веб дизайнера. Хотя PNG предлагает более исчерпывающую поддержку прозрачности, веб дизайнерам часто требуется создать GIF версию изображений для подгонки к старым браузерам. Используя CSS это возможно (и отчасти банально), через отсылку GIF изображений для старых браузеров и высококачественных PNG в браузеры которые их понимают. Но это двойная работа для веб дизайнера и как результат люди идут по меньшему сопротивлению и продолжают использовать GIF изображения.

Итак, мы рассмотрели несколько причин почему GIF все еще так популярен, но большинство из них основаны на непонимании концепций или использовании привычного сценария работы. Вооруженные некоторыми ключевыми знаниями в работе с PNG и тем, как он может надежно использоваться в браузерах, Вам предоставляется возможность воспользоваться всеми преимуществами которые он предлагает.

А что об JPEG?

JPEG другой повсеместный веб формат и в большинстве случаев, таких как фотографии (или иже с ними), он даже лучше чем PNG или GIF. PNG не предназначен для конкуренции с JPEG. JPEG компрессия делает значительно меньшие по размеру файлы чем PNG, когда работает с фото. С другой стороны, PNG производит меньшие файлы когда внутри изображений присутсвует текст, художественные линии, лого, «ровные» цвета и т.д.

Несколько замечательных примеров использования скромного PNG

Теперь давайте посмотрим на то, как использовать PNG в веб дизайне. Я собрал все файлы для каждого примера в отдельную папку, доступную на friends of ED (handyblogger: оригинальная там менюшка, но исходников я не нашел).

Градиент

За последние несколько лет, градиент — плавный переход между двумя или более цветами, стал лучшим другом веб дизайнеров. Особенно популярны утонченные, едва различимые градиентные заливки, которые не бросаясь в глаза создают ощущение глубины и фактурности.
Иногда GIF это лучший выбор для градиента. Если градиент это простой двух-цветный переход, GIF в нем работает безукоризненно. Однако, ограниченность GIF только 256 цветами часто создает заметную и неряшливую «полосатость» среди более сложных градиентных переходов. JPEG, с другой стороны, может выводить довольно прятные градиенты, но часто ценой большего размера файла. И пока JPEG градиенты, как правило, достаточно хороши, нужно помнить, что JPEG использует сжатие с потерями, которое означает, что полученное изображение никогда не будет дотягивать до качества несжатой картинки.

Рассматриваемый типичный стиль фонового градиента используется для кнопок, блоков или просто где-то еще. Это может выглядеть как на Рисунке 5-1. По часовой стрелке, от верхнего левого угла, мы видим оригинальное (несжатое) изображение, GIF версию, PNG версию и JPEG. Вы видите, что PNG в результате имеет наименьший размер (515 байт). Это в четыре раза меньше, чем GIF изображение. JPEG немногим больше чем PNG на 637 байт и он к тому-же ниже качеством из-за сжатия с потерями (правда возможность человеческого глаза определить различие в качестве в этом простом примере остается под вопросом).

Рисунок 5-1
Панель Photoshop’а — Save For Web, показывающая различия файлового размера для одного и того-же изображения в различных форматах

Изображение, которое должно работать на любом фоне

Иногда необходимо создать изображение которое работает одинаково на различных подложках. Некоторые общие примеры — это лого и иконки. В таких ситуациях традиционно доминировали GIF файлы, но есть несколько причин почему PNG может быть более лучшим выбором в этой ситуации. PNG, как правило, выигрывает в размере файла для логотипов или какого-либо другого простого «художества». К тому же, врожденная PNG прозрачность делает простым создание одиночных файлов, которые работают поверх любого фона. PNG предлагает двоичную прозрачность, как в GIF, но также предоставляет намного более желанный вариант с альфа-каналом, в котором пиксели могут быть частично прозрачными, вместо того, что-бы быть просто включенными или выключенными. Использование последнего увеличивает размер файла, иногда даже больше чем GIF с двоичной прозрачностью, но это позволяет делать сглаживание на границах вашего изображения и делать более элегантным его размещения поверх фона.

Для веб сайта KTKA Channel 49 News in Topeka, Kansas изготовили прекрасную погодную иконографику, которая отображает свое текущее состояние в заголовке сайта. Спасибо за ловкий програмный трюк, который там используется, когда заголовок меняет цветовые схемы в зависимости от времени суток и изображению погоды необходимо быть одинаковым на различных подложках. Взгляните на Рисунки 5-2 и 5-3.

Рисунок 5-2
Заголовок 49abcnews.com — дневное время

Рисунок 5-3
Заголовок 49abcnews.com — ночное время

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

Если бы вместо этого я выбрал GIF, я был бы ограничен двоичной прозрачностью GIF. Результат этого Вы можете увидеть на Рисунке 5-4. Я думаю мы все согласимся, что это несовсем хорошо выглядит.

Рисунок 5-4
Заголовок 49abcnews.com — ночное время,
GIF вместо PNG

Полупрозрачное HTML покрытие

Очень популярная техника в графическом дизайне — покрытие фото или какого-либо изображения частично просвечивающейся областью, с использованием текста. Такая техника позволяет выводить текст без необходимости скрывать под ним часть изображения. Дизайнер Wilson Miner использует ее для создания красивого эффекта на сайте ювелирных украшений Gingeroot, который Вы можете увидеть на Рисунке 5-5.

Рисунок 5-5
Gingeroot, спроектированный таланливым Wilson Miner

Вилсон (Wilson) собрал полупрозрачную область и текст в JPEG изображение. Он заранее сделал его в Photoshop. Это прекрасно работает и покрывает все потребности дизайна сайта. Но что если текст в этой просвечивающейся области необходимо менять очень часто и возможно даже для каждого посетителя? В этом случае, будет более практичным поместить текст в изображение. Текст необходимо будет встраивать с помощью HTML и CSS. Используя прозрачность альфа канала PNG мы можем эмулировать стиль Вилсона без необходимости размещать текст в изображении.

Я начну с фотографии моей дочери, Haley Madysan, размещенной в простой XHTML страничке с некоторым базовым стилем CSS. Замечу, что я использую встроенный стиль CSS только для целей демонстрации. В реальной ситуации использование внешних ссылок на страницу стилей более предпочтительно из-за большей гибкости, меньшей повторяемости кода и большей практичности в управлении самим файлом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Haley''s web site</title>
    <style>
      body {
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif; 
        background-color: #304251; 
        color: #304251; 
        margin: 20px auto; 
        width: 720px;
      } 
      #feature {
        position: relative; 
        width: 720px; 
        height: 439px;
      } 
      #feature-content {
        position: absolute;
        bottom: 0; 
        left: 0; 
        height: 125px; 
        width: 720px; 
        background-color: #dfdfdf;
      } 
      #feature-content h1 {
        margin: 0;
        padding: 0;
        line-height: 125px;
        padding: 0 30px;
        font-weight: normal;
        font-size: 2.3em;
      } 
      #feature-content a {
        float: right; 
        font-size: .6em; 
        color: #fff; 
        text-decoration: none; 
        text-transform: uppercase; 
      }
    </style>
  </head>
 <body>
   <div id="feature">
     <img src="haley.jpg" alt="Haley Madysan Croft" />
      <div id="feature-content">
        <h1>Sweet. Smart. Beautiful. 
          <a href="/haley" title="Haley Madysan Croft">Learn more &raquo;</a></h1>
      </div>
   </div>
 </body>
</html>

Вот так, я более или менее сдублировал то, что Вы видели на сайте Вилсона Gingeroot, за исключением (пока) какой-либо прозрачности, как показано на Рисунке 5-6.

Рисунок 5-6
Эмуляция стиля Gingeroot с помощью HTML и CSS, (пока) без прозрачности

Теперь я создам аналогичное, пиксель в пиксель, изображение в Photoshop. Я заполняю изображение светло-голубым оттенком и ставлю непрозрачность слоя на 70%. В завершении, я сохраняю картинку в Photoshop используя установки PNG-24 с включенной прозрачностью. Затем я просто использую изображение как фон для покрытия, вместо сплошного серого, как Вы видели на Рисунке 5-6.

#feature-content {

  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 125px; 
  width: 720px; 
  background-image: url('transparent.png');

Результат довольно схожий с оригиналом, но с HTML и CSS текстом он стил более гибким, посмотрите на рисунок 5-7

Рисунок 5-7
Добавление прозрачности через формат PNG, которое дублирует стиль Gingeroot

Вилсон Майнер (Wilson Miner) теперь использует схожую концепцию в другой области сайта Gingeroot. На страницах, которые показывают доступные товары, прозрачность PNG используется для отображения в левом верхнем углу фотографий обозначения On Sale, как показано на Рисунке 5-8. Единожды создав изображение On Sale, и сохранив его с прозрачным фоном как PNG картинку, Вилсон устранил необходимость в создании различных версии изображений товаров, с флагом-обозначением и без него.

Рисунок 5-8
Gingeroot — секция с ожерельями использует PNG изображение с прозрачным фоном, которое покрывает верхнюю часть изображения товара и выставляет обозначение On Sale в левом верхнем углу

Я также использовал эту технику на Explore Steamboat — сайте о событиях, мероприятиях и достижениях в Steamboat Springs, Colorado.

В другом творческом примере, дизайнер Брайн Велосо (Bryan Veloso) (handyblogger: это тот самый, который создал набор стандартных шаблонов блогов для Google Blogger и который на самом деле является реальным локомотивом веб дизайнерского сообщества) использует прозрачность PNG изображения прикрепленного к верху страницы для создания эфекта «увядания», в котором текст как-бы проявляется когда Вы прокручиваете страницу вниз. Эффект найденый на Revyver.com (см. Рисунки 5-10 и 5-11) выглядит даже лучше, чем он описан, поэтому не упустите шанс взглянут на него (handyblogger: сейчас Брайн сменил дизайн и этой фенечки уже нет :( ). Кроме этого, дерево, установленное впереди текстового содержимого страницы производит неожиданный визуальный эффект, своеобразный «вау!» фактор для тех, кто видит это впервые.

Рисунок 5-10
На Revyver.com, дизайнер Bryan Veloso использует прозрачность PNG для создания эффекта “увядания”, когда Вы прокручиваете вниз страницу, и размещает свой художественный замысел поверх текстового содержимого страницы.

Рисунок 5-11
Просматривая PNG изображение Брайна в Photoshop, мы видим идею, как с помощью прозрачности альфа канала получается задуманный эффект.

Водяные знаки

Другая распространенная техника графического дизайна — это искусные водяные знаки, покрывающие изображение сверху. Она может быть использована чисто для визуального стиля, но может и послужить способом указать на права обладателя или на источник изображения.

На моем персональном вебсайте (Рисунок 5-12), я демонстрирую большую галерею фотографий (сейчас там более двух тысяч фотографий). В реалии эти фотографии загружены на Flickr, популярный онлайновый ресурс публикации фото, и затем отображаются локально на моем сайте с помощью API Flick’ера.

Рисунок 5-12
Страница детализации фотографии с сайта jeffcroft.com.

Что если я хочу поместить мое персональное лого на все мои фотографии? Да, это возможно — открыв каждое изображение в Photoshop, применив к нему лого и пересохранив картинку (handyblogger: далее Джефф повторяется). Однако это становится ужасно непрактичным с тысячами изображений, которые постоянно обновляются — и иногда обновляются когда у меня нет поблизости компьютера (к примеру я отсылаю фотографии на Flickr с моего сотового). Было бы замечательно, если бы лого могло добавляться автоматически? PNG может сделать это.

HTML используемый для показа фото на странице выглядит вот так:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">

  <img class="full-size-photo" src=http://static.flickr.com/2/2622915_8b78c1207d.jpg
    alt="CTA, a photo by Jeff Croft" />
</a>

Я создал в Photoshop версию моего лого в белом, как изображение 80х80 пикселей и установил у него непрозрачность 50%. Сохранил его в стандартных установках PNG-24, и в итоговой картинке она сохранилась как 50% прозрачность. Затем я просто добавил это изображение в мой HTML вот так:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">

  <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
    alt="CTA a photo by Jeff Croft " />
  <img class="watermark" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_watermark.png" 
    alt="Watermark" />
</a>

И немного правильно спозиционировал его с помощью CSS:

a.photo-container {

  position: relative;
  display: block;

img.watermark {
  position: absolute;
  top: 2em;
  left: 1em;
}

В результате водяная метка будет встроена в фото, но в действительности это лишь отдельное PNG изображение, которое «сидит» сверху него (Рисунок 5-13). Применяя это в моем шаблоне для моей системы управления контентом я получаю водяной знак на каждом изображении без необходимости делать это больше двух тысяч раз.

Рисунок 5-13
Искусное лого сайта jeffcroft.com появляется с помощью прозрачности PNG в левом верхнем углу фотографии.

Если Вы хотите отличиться, Вы можете использовать DOM написав скрипт для вставки дополнительного (X)HTML и выполняя разметку водяными знаками на лету. (handyblogger: обратите внимание, что Джеф использует этот прием лишь для того, что-бы указать посетителю на copyright изображения, но ни как для того, чтобы защитить его от копирования)

Маска

Другое подручное использование PNG изображения и прозрачности альфа канала — это маска. Технически это очень похоже на то, что Вы только что видели на изображениях с водяными знаками, но этим добиваются другого визуального эффекта. В этот раз я сделаю в Photoshop версию моего большого лого. Вместо того, чтобы делать лого белым, я сделаю его прозрачным а остаток изображения — белым, потому что фон моей страницы — белый (Рисунок 5-14).

Рисунок 5-14
Создание изображения в Photoshop для использования его в качестве PNG маски

Как я говорил, технический аспект этого очень похож на водяные знаки из предыдущей секции. Начнем с HTML:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">

  <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg"
    alt="CTA, a photo by Jeff Croft" />
  <img class="mask" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png"
    alt="Mask" />
</a>

А затем CSS:

a.photo-container {

  position: relative;
  display: block;

img.mask {
  position: absolute;
  top: 0;
  left: 0;

Посмотрите на результат Рисунок 5-15

Рисунок 5-15
PNG маска покрыла фото и создала эффект перфорации.

Иконки с изменяемым цветом

Используя концепцию маски, которую Вы видели в предыдущем примере, некоторые люди создали иконки, которые могут изменять свой цвет используя только CSS. Идея как проста, так и гениальна: поместить прозрачное изображение с трафаретом символа иконки в квадратную, прямоугольную или другую область с фоновым цветом из CSS. Теперь просто меняя цвет фона через CSS Вы будете наслаждаться изменяемым цветом иконок.

Возможно нам необходим набор иконок изображающих виды спорта (Рисунок 5-16)

Рисунок 5-16
Некоторая спортивная иконография.

Я создал белые изображения — трафареты с символами иконками также, как я делал лого с маской в предыдущем примере (Рисунок 5-17)

Рисунок 5-17
Создание трафаретов масок PNG для каждой иконки.

После подгонки размеров изображений (я выбрал 48х48 пикселей), я сохранил их используя в Photoshop настройки по умолчанию для PNG-24 с прозрачностью. Затем я создал простой XHTML файл, в котором описал каждое изображение:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OMG Sports Icons!</title>
    <style>
      img {
        background-color: #cc0000;
      }
    </style>
  </head>
  <body>
    <img src="running.png" alt="Running" />
    <img src="biking.png" alt="Biking" />
    <img src="skiing.png" alt="Skiing" />
    <img src="soccer.png" alt="Soccer" />
  </body>
</html>

Я определил #cc0000 (насыщенный красный) как цвет фона для изображений в этом файле. Результат — красное сияние через трафарет (Рисунок 5-18). Заметьте замечательную сглаженность границ — спасибо за поддержку антиалиасинга PNG для частично прозрачных пикселей.

Рисунок 5-18
Прозрачные PNG изображения — как веб иконки. Заметьте, что цвет фона CSS (красный) показывается сквозь изображение.

Как Вы можете видеть на Рисунке 5-19 я могу изменить цвет иконок просто поменяв значение цвета в моем CSS.

img {

  background-color: #000066;
}

Рисунок 5-19
Изменение цвета фона в CSS соответствующим образом меняет цвет иконок.

Этот вид простого изменения цвета может быть очень удобен, когда Вам необходимо переработать дизайн Вашего сайта. Вместо того, что-бы переделывать все изображения иконок, Вы просто изменяете цвет в CSS. Прием можно также замечательно использовать при наведении мышью на изображения со ссылками. Для примера, Вы можете использовать красный для обычного цвета и голубой при «наезде» мышью:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OMG Sports Icons!</title>
    <style>
      a:link img, 
      a:visited img, 
      a:active img {
        background-color: #cc0000;
      } 
      a:hover img {
        background-color: #000066;
      }
    </style>
  </head>
  <body>
    <a href="/running/"><img src="running.png" alt="Running" /></a>
    <a href="/biking/"><img src="biking.png" alt="Biking" /></a>
    <a href="/skiing/"><img src="skiing.png" alt="Skiing" /></a>
    <a href="/soccer/"><img src="soccer.png" alt="Soccer" /></a>
  </body>
</html>

Вы даже можете использовать дополнительный CSS для более творческих вещей, таких как добавление обрамления (Рисунок 5-20)

img {

  background-color: #000066;
  padding: 2px;
}

Рисунок 5-20
Использование CSS для большего улучшения вывода иконок с добавкой обрамления.

Dan Cederholm писал об очень похожей технике в своем блоге еще в 2003, и PJ Onori раздавал замечательный набор иконок (названный Sanscons) базирующийся на этой технике на своем вебсайте.

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

И Dan и PJ использовали прозрачный GIF вместо PNG. Это полностью покрывало их потребности, и под стиль иконок им приходилось создавать пиксельные изображения. Используя PNG, Вы можете получать похожую технику, но с некоторым превосходством ввиде антиалиасинга и частичной прозрачности для использования ее в более детализированных иконках.

Хорошо, но в каких браузерах это работает?

Я знаю, что Вы думаете: вся эта PNG прозрачность хорошо выглядит, но практична ли она?

Хорошие новости заключаются в том, что все современные браузеры полностью поддерживают PNG изображения, включая прозрачность альфа канала, преимущества которого я показал в примерах. Safari (все версии), Firefox (все версии), Opera (версии 6 и выше), Netscape (версии 6 и выше), и Mozilla (все версии) будут на ура отрабатывать все, что я у них попрошу. Но есть и одна плохая новость — единственный браузер, который я еще не упомянул и который имеется у большинства Ваших пользователей: Internet Explorer.

Internet Explorer 6 и ниже не поддерживает прозрачность альфа канала встроенную в PNG формат. С тех пор как для большинства многочисленных веб серферов был сделан выбор (или не выбор) браузера, эта зияющая дыра сдерживала веб дизайнеров далеко от PNG. Но, с выходом Internet Explorer 7 мы получили полную поддержку альфа прозрачности PNG во всех значимых браузерах. Что дальше, есть ли пути для работы с альфа-прозрачностью PNG в Internet Explorer 6 и ниже? Итак, если Вы хотите использовать данный эффект, ничто не остановит Вас. Internet Explorer 6 и его ранние версии требуют к себе большего, чем того надо, внимания, но это определенно возможно.

Хак для Internet Explorer: AlphaImageLoader

В составе Internet Explorer имеются различные собственные фильтры. Они используются в CSS, но они не являются какой-либо частью официальной спецификации CSS. Другими словами, они не стандартизированы в веб. К сожалению Internet Explorer 6 и ниже не полностью поддерживают формат PNG (который рекомендован W3C), у Microsoft’а имеется фильтр который устраняет этот недостаток: AlphaImageLoader.

В соответствии с разделом на официальном сайте Microsoft, AlphaImageLoader «отображает изображение в пределах границ объекта и между фоном объекта и его содержимым». Другими словами, AlphaImageLoader загружает PNG изображение с его полной прозрачностью, но он загружает его как собственный слой, снизу которого находится содержимое объекта на котором он применяется. PNG изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности «сидят» сверху фона объекта).

Вобщем, Вы просто можете применить AlphaImageLoader в CSS на элементах img и наслаждаться результатом. Сперва будет загружено изображение, прозрачность остается, но затем изображение будет загружено снова — как переднее содержимое объекта — с непрозрачными областями (таким образом «затеняется» Ваша прозрачная версия).

Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для <div>) и ожидать, что AlphaImageLoader сделает эту работу в Internet Explorer как надо. Помните, что AlphaImageLoader вставляет Ваше изображение между фоном и передним планом объекта. Поэтому, пока он будет грузить Ваше изображение во всей своей прозрачной красе, он также будет продолжать грузить его как фоновое изображение CSS, и без Ваших замечательных полупрозрачных пикселей.

Реальное использование AlphaImageLoader

Давайте вернемся назад к одному из ранних примеров и попробуем правильно загрузить его в Internet Explorer. Помните Channel 49, TV станцию в Topeka? Уверен — да. Рисунок 5-21 показывает как выглядит сайт в Internet Explorer 6.

Рисунок 5-21
Заголовок 49abcnews.com, выведенный в Internet Explorer 6 для Windows, с нетронутой прозрачностью PNG.

HTML для верхней части, связанной с погодой, выглядит как Вы возможно уже предположили:

<div id="weather">

  <a href="/weather/"><img id="weatherImage" 
      src="http://media.49abcnews.com/img/weather/overcast-night.png" 
        alt="Overcast" /></a>
  <p>
    <a href="/weather/">Currently in Topeka, KS:<br />
    <strong>82&deg; Overcast</strong><br />
    <span>Get the forecast and more...</span>
    </a>
  </p>
</div>

Вы видите изображение, и безусловно это PNG, даже Internet Explorer загружает его безукоризненно. Секретный ингредиент этого — JavaScript. В действительности я использовал немного DOM скриптинга для того, чтобы убрать элемент img на лету и заменить его элементом div, который — Вы догадались — использует AlphaImageLoader. JavaScript описан внутри условных комментариев, другая подручная, но полностью нестандартизированная идиома от Microsoft встроенная в Internet Explorer. Условные комментарии позволяют Вам испольлзовать код только для заранее известной версии Internet Explorer. Код игнорируется всеми другими браузерами, поэтому он никак их не затрагивает. В элементе <head> сайта www.49abcnews.com, Вы найдете:

<!--[if lte IE 6]>

  <script src="http://media.49abcnews.com/js/fixWeatherPng.js" type="text/javascript"></script>
<![endif]-->

Спасибо первой строчке, if lte IE6, этот скрипт будет включен в отрисовываемый документ только если он будет показан в версии Internet Explorer меньше или равной (это указывается с помощью lte) 6. Все другие браузеры, включая новоприбывшего Internet Explorer 7, будут это полностью игнорировать.

Итак, что же в файле JavaScript fixWeatherPng.js? Взглянем:

window.attachEvent("onload", fixWeatherPng); 


function fixWeatherPng() {
  var img = document.getElementById("weatherImage");
  var src = img.src;
  img.style.visibility = "hidden";
  var div = document.createElement("DIV"); 
  div.style.filter = "progid:DXImageTransform.Microsoft.
    AlphaImageLoader(src='" + src + "', sizing='scale')"; 

  // <i>Some 49abcnews.com-specific CSS styling omitted for brevity. </i>

    img.replaceNode(div);

Давайте проанализируем, шаг за шагом, что делает скрипт. Сперва, мы говорим браузеру, что мы хотим выполнить функцию fixWeatherPng, когда загружается страница. Оставшаяся часть скрипта — сама функция.

Начинаем, сперва мы ищем изображение с которым мы будем работать по его id атрибуту и сохраняем его в переменной img. Сохраняем атрибут src (URL на файл изображения) в переменной src. Затем мы прячем элемент img выставляя CSS свойство visibility в hidden.

Далее создаем новый элемент div и сохраняем его в переменной div. Применяем к нему фильтр AlphaImageLoade, используя URL из переменной src, который мы сохранили ранее.

В итоге мы заменяем оригинальный элемент img (который скрыт) на вновь созданый элемент div, к которому удачно прицеплен AlphaImageLoader.

Использование DOM скриптинга для вставки Вашего AlphaImageLoader — фильтрующего биты на лету, имеет свою нелицеприятную, но необходимую сторону — некорректный CSS. Более того, вне Вашей (X)HTML разметки будут содержаться несемантические div элементы. И пока все это описано внутри условных комментариев, для других браузеров нет шанса быть испорченными кодом от Microsoft. (handyblogger: Здесь Джефф пытается тонко указать на «корявое» решение от Microsoft)

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

В заключении

PNG, как графический формат, предлагает много технических преимуществ помимо тех, которые широко используются в GIF. В действительности, премущества настолько велики, что PNG давным — давно мог бы занять доминирующее положение как графический формат несвязаный с фото изображениями. Недостаточная поддержка со стороны Internet Explorer некоторых более значимых возможностей PNG, таких как прозрачность альфа канала, как результат отпугивает многих веб разработчиков. Но существуют две очень хорошие причины того, почему Вы не должны бояться PNG.

Первая: даже Internet Explorer 6 и его более ранние версии практически полностью поддерживают PNG в части того, что может GIF (конечно за исключением анимации). PNG практически всегда показывает меньший размер файлов позволяя быстрее их загружать и расходовать меньше ресурсов.

Вторая: Internet Explorer 7 предлагает полную поддержку для альфа прозрачности PNG. Эффекты, которые могут быть получены с полной гаммой полупрозрачных опций практически безграничны. Я ожидаю, что дизайнерам, которые найдут интересные пути использования прозрачности PNG, по принципу тех, что описаны в этой статье, будут открыты двери на новый уровень стилей еще невиданных до этого. Я дал Вам полезные идеи того, что Вы можете создавать с помощью прозрачности PNG, но не останавливайтесь на этом. Ищите себя!

Отрывок из Web Standards Creativity от Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, и Rob Weychert; опубликовано friends of ED. Copyright Jeff Croft 2007. Использовано с разрешения Apress, Inc.

P.S.
Вы всегда читаете комментарии к статьям? Нет? А я читаю, и довольно въедливо, и из этого появляются идеи: Использование PNG в IE6 и в современных браузерах.

Почитать еще по данной теме :
11 комментариев на статью:
  1. Кристина:

    Очень полное, раскрывающее все вопросы разжевывание материала, достаточно внимательно прочесть и извлечь из этого пользу. Я пару раз перечитывала, спасибо за статью!

  2. Анжела:

    Помойму это не статья а учебное пособие, по размерам схожее с мини книжкой с уроками по фотошопу) очень понравилось обучение, спасибо выкладывайте чтонибудь еще!

  3. bridennis:

    Да, статья хороша, но к сожалению, действительно стоящий материал всегда редкость :(

  4. Anonymous:

    помогите, имеется логотип, в два слова. Первое слово черного цвета, второе красного, надо что бы при наведении мыши, цвета менялись

  5. bridennis:

    Попробуйте сделать это на спрайтах.
    Я публиковал записку: http://handynotes.ru/2008/04/css-sprites-png-ie.html
    в которой есть пример.
    Либо, Вам в помощь, будет необходим JavaScript.

  6. wlad:

    Что мечтаю, так это овладеть многокадровой технологией .png.

  7. Egostile:

    Молодцы, хорошо рассказали, искали как раз такую статью, нужен был инфо по прозрачным элементам в веб-дизайне.

  8. Александр:

    Добавил в избранное
    спасибо

  9. Витос:

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

  10. VeX:

    Интересная статья но инфа уже устарела. Сейчас у меня IE11 есть проблемма — некоторые png отображаются, а некоторые нет. вот это реально непонятно.

  11. nemezida.su:

    а новая информация по использованию прозрачности в ie11 не появилась?

Ответить
Обязательные поля помечены *