Отправляет email-рассылки с помощью сервиса Sendsay

Web - полезные советы по веб-строительству

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "От Винта - Раскрутка сайта. Способы. Сравнительный анализ." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Владимирис

Статистика

8.145 подписчиков
-7 за неделю
←   Все выпуски   →

Web - полезные советы по веб-строительству Использование PNG-графики в веб


Партнерская программа Wizards World - заработай вместе с крупной онлайновой игрой. Размести ссылку на своем сайте и получай проценты от платежей привлеченных пользователей.

Формат PNG (Portable Network Graphics) изначально создавался в качестве замены устаревающего формата GIF. Основными преимуществами PNG являются:

  1. Неограниченное количество цветов в изображении (в отличие от того же GIF, где цветовая палитра ограничена 256 цветами)
  2. Возможность использования альфа-канала (т.е создание полупрозрачных изображений)
  3. Гамма-коррекция
  4. Двумерная чересстрочная прогрессивная развертка.

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

Предположим, что подлый дизайнер изобразил на странице некий элемент, обладающий красивой мягкой тенью, под которой виден другой элемент. Конечно, реально на практике такие случаи происходят довольно редко, но в качестве примера подходит идеально. Соответственно, нужный нам графический элемент сохраняется в формате PNG-24 с прозрачным фоном. В коде страницы может быть что-то вроде:

<div id=”alpha”>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ullamcorper nunc eu odio. Donec quam. Integer eu dolor. Duis faucibus, lectus in egestas laoreet, sem risus suscipit turpis, et tincidunt lorem odio et erat. </p>
  </div>

 В стилях мы пишем, что:

 #alpha {
            background: url(bg.png) no-repeat;
            width: 255px;
            height: 150px;
}
 

Данный код позволит получит нам прекрасное полупрозрачное изображение на странице. Но не в Internet Explorer 6.0 и ниже. Для получения аналогичного эффекта в IE можно прибегнуть к следующей хитрости. Для этого нужно добавить в наш css строчки:

_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='crop');

Получаем следующий код:

#alpha {
            background: url(bg.png) no-repeat;
            width: 255px;
            height: 150px;
           _background: none; /* специально для IE */
           filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='crop');
}

Необходимо отметить, что указание ширины и высоты элемента кроме выполнения своей непосредственной функции является также своеобразным переключателем для Internet Explorer, т.к для работы фильтра требуется, чтобы элемент имел свойство layout, включение которого производится либо через указание высоты и ширины элемента, либо через присвоение position: absolute, или же через присвоение display: inline-block (что очень выручает в случаях, когда указание ширины-высоты и абсолютное позиционирование не подходят). В результате у нас на странице должно появится  аккуратное полупрозрачное изображение.

Надо отметить, что данный способ не единственный, позволяющий полноценно отображать png-файлы в Internet Explorer, но все известные мне способы основаны на использовании AlphaImageLoader Filter. В зависимости от ситуации и поставленной цели можно выбирать различные из них.

Описание работы фильтра AlphaImageLoader Filter

 



 

 

Бесплатный каталог Webfile - музыка, видео, картинки!
Подпишись на обновления и получай по почте прямые ссылки на новые файлы!
Подпишись на обновления каталога:
В избранное