GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Подбор гармоничных цветов(39129)
Колористика(21941)
Основы веб-дизайна(17476)
Шрифт. История шрифта(15875)
Пиктограммы для сайта - это просто!(15467)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Основы дизайна » PNG. Забытый формат веб-графики

PNG. Забытый формат веб-графики


Арсений Веснин
ars_art@mail.ru

Начну с того, что формат .PNG мог бы сделать революцию в веб-дизайне, если бы Microsoft Internet Explorer поддерживал его формат. Не буду вдаваться в подробности, почему Microsoft не хочет поддерживать png, поскольку по этому вопросу давно уже создана целая организация, которая пытается "заставить" их сделать это. Но мы пойдем другим путем. Попробуем решить эту проблему.

Если вы думаете, что .gif и .jpg при создании вами веб-сайта не ограничивают вашу фантазию, и вас устраивает постоянно "дорезать" тенюшку в .gif`е вместе с фоном, то вы можете смело забыть про возможности .png, а точнее про 24-bit`ную глубину цвета , анти-альясинг и прозрачность.

Если вы так не думаете, то давайте попробуем решить проблему с поддержкой .png в MSIE.

И так, имеем в исходнике .psd вот такой кусок сайта:

Предполагается, что в html-файле тэг body имеет полосато-серый фон, и он как бы просвечивает сквозь тенюшку и прозрачность. Первый выход, "как оптимизируем?" - инстинктивно .gif, преимущественно вот такой:

Но этот способ всем известен, и не о нем речь. Начнем с того, что в исходнике .psd убираем не нужные слои из-под тени и заливки.

=>

Сохраняем этот кусок как .png-24 с прозрачностью (transparency). В потоке html прописываем свой красивый фон (здесь полосато-серый) и вставляем наш .png. Открываем наш html-файл в Эксплорере (кстати если вы работаете в дримвивере он в режиме просмотра может показать .png корректно. Не верьте!)

Эксплорер автоматически подкладывает серый фон. Затем открываем его же (файл) в Mozille ( или Netscape6):

Поддержка есть. Но, статистику браузеров не обманешь.

Первый выход из такой ситуации предлагает Microsoft, уже "затравленный" той самой организацией: AlphaImageLoader filter. Их предложение таково:

Создать прозрачный .gif размером 1x1px и изменить тэг img следующим образом:

<img src="прозрачный.gif" width="x" height="y" 
style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ваш.png');">

Где x, y координаты именно PNG файла! И, ура, Эксплорер прекрасно видит нашу прозрачность.

В порыве радости (не забывая про кросс-браузерность) открываем Mozillа и... готовы разбить монитор кулаком.

Да, да. Ровным счетом ничего, Mozilla отображает только наш "прозрачный.gif", который собственно и прозрачный. Лично я после этого "сюрприза" от Microsoft, забросил эту затею.

Но подумав, решил взяться снова, ведь по идее можно описать скриптом определение браузера и если в потоке html есть png, то будь это MSIE - добавляется их фирменный фильтр, а будь кто другой все остается на своих местах. Обойдя все поиcковики и пару-тройку импортных форумов, выудил следующую информацию:

  1. Создаем опять же прозрачный.gif и называем его blank.gif
  2. Скачиваем вот этот скрипт png.htc
  3. Он то и описывает процесс определения браузера и подмены тэга img, если это требуется на такой же, но с фильтром для ИЕ.(Остальные браузеры отображают .png как он есть) Важно: внутри скрипта есть такая строчка: <pre>var blankSrc = "blank.gif";</pre> Надеюсь понятно, что изменив название файла прозрачного .gif-a, не забудем и в скрипте это указать.

  4. Сохраняем blank.gif и png.htc в корне сайта
  5. Внутри html тэг img для нашего PNG выглядеть должен стандартно, но обязательно с прописаными width и height.
    <img src="наш.png" width="100" height="150" border="0" alt="">
  6. В свой CSS или прямо в потоке html в тэг style добавляем следующее:
    <style>img {behavior: url("png.htc");}</style>

В итоге мы получаем поддержку прозрачности PNG в Microsoft IE без потерь для Mozilla. А это именно то, что нам и было нужно.

  

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

Ссылки по теме:

 
19.02.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.