Пропустить навигацию

Highe® — Веб и стандарты


PNG8 и частичная прозрачность

19.06.08 , ,

Возвращаясь к теме прозрачности PNG изображений и их поддержки в IE5-6. В Fireworks оказывается есть интересная возможность создания частично прозрачных изображений формата PNG8.

Практическая польза заключается в том, что можно создать изображение с частичной прозрачностью, поддерживаемое всеми браузерами, кроме IE5-6. В свою очередь в IE подобное изображение будет без частичной прозрачности вообще, но серого фона, как в PNG24 не будет.

Выглядеть будет это примерно следующим образом:

Все современные браузеры:

PNG8 во всех современных браузерах

IE5-6:

PNG8 во IE5-6

Пример с частично прозрачным изображением PNG8.

В Fireworks делается это созданием двух слоев, выбором Alpha transparency в Optimize и экспортом слоя.

Комментарии

  1. Как всегда IE самый осел...


    — Snowcore    Jun 20, 12:16 PM    #
  2. Если бы Vista была удачнее, пользователи скорее перешли на нее с XP, и IE6 скорее ушел бы в историю.


    — Вильямс    Jun 26, 10:19 AM    #
  3. это делается только в Fireworks?


    — Николай Громов    Jun 30, 09:14 PM    #
  4. В фотошопе точно нет такой возможности.

    Есть еще пара приложений, делающих тоже самое, только через командную строку, это pngquant и pngnq.
    Fireworks, похоже, лучше справляется с этой задачей.


    higher    Jul 2, 12:13 PM    #
  5. более подробно тут – http://www.artlebedev.ru/tools/technogrette/img/png-4/


    — Роман    Sep 18, 05:33 PM    #
  6. > Роман

    Спасибо.


    higher    Sep 18, 09:29 PM    #
  7. Блин я просто терпеть не могу этот ИЕ, если бы его не було бы пользы было бы гораздо больше!


    — Snacke    Oct 5, 06:45 PM    #

 

 

В архив


CSS Styleguide — улучшение читабельности кода

Перевод статьи Improving Code Readability With CSS Styleguides с рекоммендациями по организации СSS файлов и написанию стильгайдов.

дальше →

Media-запросы

Media-запросы это расширение CSS3 для различных media-типов, позволяющее контролировать отображение документа в зависимости от устройства

дальше →

Стандартный режим, режим обратной совместимости и DOCTYPE

Еще раз хочу вернуться к данным режимам, их выбору, переключению и DOCTYPE

дальше →

Полезные CSS хаки

Несколько хаков, которые могут пригодиться

дальше →

Все статьи

бизнес, браузеры, веб-стандарты, верстка, дизайн, мобильные устройства, редакторы, фотогалерея, alistapart, css, css3, email, html email, javascript, photoshop, png, progressive enhancement, svg, textmate, textpattern, usability, validation, vml

Полезные ссылки

23.09.08

  • Using jQuery for Background Image Animations
  • jParallax
  • Test your color IQ
  • 80 Large Background Websites
  • 20 Free Page Analysis Tools