Re:boot. Что такое PNG формат? PNG в IE.
Теперь seleckis.lv будет иметь вид и формат журнала. Посты посвящённые web-дизайну, айдентике, полиграфии, флэш-анимации и Action-скрипту, программированию, а так же различным новостям в области дизайна, программирования и мира Web 2.0.
Старые записи останутся (куда же они денутся) в том виде, в котором вы привыкли видеть блог-посты, но будут доступны в разделе Архив. Редизайн коснулся и их, и сделал посты более читабельными.
В скором времени планирую добавить отдельный раздел для портфолио, где будут представлены мои лучшие работы.
Теперь любой пост или статью журнала вы сможете занести в закладки любимого сервиса. У меня по этому поводу будет просьба, если вы не увидели иконки вашего любимого сервиса, сообщите об этом и я с радостью её добавлю.
Это конечно сырой вариант журнала, ещё много чего предстоит сделать такого нужного, как, например, подключение удобных Ajax-фишек, которые я лучше буду писать сам, нежели ставить плагины.
Почему такой дизайн?
Я перешёл на 18-й размер шрифта. Дело в том, что в связи с глобальным увеличением размеров мониторов, есть резон увеличивать и размер шрифта и ориентироваться на владельцев мониторов с разрешением больше, чем 1024х768, совсем забыв про 800х600. Опять же, с 18 размера шрифта включается анти-альясинг во всех популярных браузерах.
И это я рекоммендую делать всем, ибо на мой взгляд, такое искуственное стимулирование пользователей убедит перейти на более новые модели с большим экранным разрешением, а стало быть развяжет руки девелоперам.
На главной панели меню в шапке сайта, вместе с логотипом, который я придумал ещё месяца три назад, и на дополнительных панелях внизу я использую глянец и отражение, как дань моде Web 2.0.
Вебдванольные звёздочки на панелях содержащие белые иконки достоточно понятно излагают суть модуля.
Облако тэгов получило горизонтальный вид, и я отделил относящиеся к журналу тэги от архивных блоговских.
Что характерно, в этом дизайне я использовал только png-формат картинок. И некоторые из них с прозрачностью. И заметьте, в Internet Explorer версий 5.5 и 6.0 работает идеально. В самом глючном популярном браузере прозрачность подключается с помощью особых фильтров, о которых расскажет статья “PNG в IE”.
Что такое PNG-формат?
PNG – это формат изображения, сочетающий лучшие черты GIF и JPG/JPEG, традиционных и более распрастранённых графических форматов, используемых в World Wide Web. PNG поддерживается практически всеми крупными и мелкими браузерами, которые сегодня используются.
- В JPEG формате обычно хранятся фотографии, причём в зависимости от качества можно добиться либо большего сходства с оригиналом, либо уменьшить его объём для быстрого скачивания с интернета, также позволяет изображению быть значительно меньше размера файла, эквивалентного необработанному изображению (pixmap или Windows bitmap).Файлы JPEG не поддерживают прозрачность, но изображение может иметь до 16 млн. цветов. Метод сжатия использует аппроксимацию, для реальных фотографии.
Аппроксимация или приближение — замена одних математических объектов другими, в том или ином смысле близкими к исходным. Аппроксимация позволяет исследовать числовые характеристики и качественные свойства объекта, сводя задачу к изучению более простых или более удобных объектов (например, таких, характеристики которых легко вычисляются или свойства которых уже известны). В геометрии рассматриваются аппроксимации кривых ломанными…
via, Wikipedia
Этот метод сжатия обычно создаёт наименьший размер файла, по сравнению с другими стандартными графическими форматами, с качеством практически неотличимым от оригинала для невооружённого глаза. JPEG не разрешает сохранять в графический файл несколько слоёв с графикой, т. е. анимация не доступна, но ничего не мешает вам использовать формат MPEG и импортировать JPEG файлы в него.
- GIF формат уменьшает размер файла оригинала, за счёт определения цветового шаблона в исходном изображении, создавая заархивированный вариант изображения. Это означает, что отображаемая картинка идентична исходной, но количество цветов ограниченно 256 уникальными цветами. GIF формат позволяет содержать ещё один дополнительный цвет со 100% прозрачностью (бинарная прозрачность). GIF чаще используется, когда изображение содержит большие участки одного цвета. GIF также поддерживает несколько графических слоев, а стало быть разрешает анимацию, принцип которой заключается в показе слоёв с определённым интервалом.
- PNG формат сжимает изображения так же, как GIF, но изображение может иметь до 280 триллионов уникальных цветов (если быть точным – 248 = 281 474 976 710 656. Как правило, используются чуть более 16 млн. цветов). PNG также поддерживает простую бинарную прозрачность, и полный Alpha-канал, что означает, что каждый пиксел изображения на экране монитора может иметь один из 256 различных уровней прозрачности (или 65 тыс. уровней, если вам действительно это нужно). Файлы в PNG формате получаются примерно с таким же размером, как и у эквивалентного GIF изображения, если предположить, что они имеют одинаковое количество цветов. PNG не поддерживает несколько графических слоев, но предпологается их использование в формат MNG.
PNG в IE.
Microsoft Internet Explorer получил популярность не за, то что такой хороший, а за маркетинговую деятельность Microsoft, в результате которой компания интегрировала браузер во все версии Microsoft Windows. Антиглобалисты поздно спохватились когда IE стал самым используемым браузером в мире. Но, как говорится, поздно пить Боржоми, когда почки отлетели. Пришлось web-девелоперам подстраиваться под прихоти и так называемые “недекларированные фичи” этого браузера.
А теперь, собственно, решение вопроса связанного с прозрачностью в IE. В Internet Explorer 5.5 и 6.0 оказывается есть поддержка прозрачности, но работает она исключительно при использовании так называемых DX-фильтров.
Хитрый javascript-код, осуществляющий поиск картинок в html-коде и применяющий к ним соответствующий фильтр прислал мне мой бывший ученик Василий Жуков (растёт смена), который нашёл решение, оптимизировал его и использует в своих проектах. Спасибо ему за это.
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters) && version < 7){
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = "id=\""+img.id+"\""
var imgClass = "class=\""+img.className+"\""
var imgTitle = "title=\"" + img.title + "\""
var imgStyle = img.style.cssText
var imgStyleNew = "display:inline-block;"
if (img.align == "left") imgStyleNew = "float:left;" + imgStyleNew
if (img.align == "right") imgStyleNew = "float:right;" + imgStyleNew
if (img.parentElement.href) imgStyleNew = "cursor:hand;" + imgStyleNew
var strNewHTML = ""
img.outerHTML = strNewHTML
i = i-1
}
}
}
Подключаете код строкой:
<script defer src="pngfix.js" type="text/javascript"></script>
Где defer означает, что скрипт не будет генерировать какое-либо содержание (например, “document.write”), и браузер может продолжать чтение и вывод html-документа не отвлекаясь на скрипт.
Но это ещё не всё. Данный скрипт ищет в html-коде тэги <img> заключает их в тэги <span> и применяет фильтр уже непосредственно к ним. Но как быть, если вы используете png-картинку в качестве фона блочного тэга и описываете его в css файле? Здесь есть два варианта:
-
Копировать в описание каждого элемента фильтр. Например:
div#element{ height: 100px; width: 200px; background: url(images/element.png); background: expression("none"); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/element.png", sizingMethod="scale") }- Ширину и высоту указывать обязательно если вы хотите добавить дополнительный параметр sizingMethod
- background: url(images/element.png); будет работать для всех.
- background: expression(“none”); – отключаем любые скрипты применённые к background.
- Подключаем фильтр и в параметре src указываем адрес картинки.
- Параметр sizingMethod=”scale” указывает на то, как будет отображаться картинка. В данном случае, scale означает растягивание изображения по размеру элемента.
Один ньюанс для Wordpress-themes-девелоперов – в src нужно указывать абсолютный путь, например: “/wp-conent/themes/my_theme/images/element.png”. Относительный не работает.
- Использовать php-скрипт, добавляющий фильтр описаный в первом варианте в css-файл налету. Если найдёте такой скрипт или напишите, дайте знать. ))
]]>pmaster]]>Йоу! Круто =)
»]]>Andrew Tch]]>OMFG, Никитон.
»С меня, однако, джин, отжег с переменами…
]]>mikolka]]>Мама, ребутнолся так ребутнулся….
»Клево, только разобраться надо… =)
]]>CJ Dax]]>прикольно
»]]>Игорь]]>зачем так сложно, разве .htc больше не в ходу?
»]]>Игорь]]>Дизайн интересный, но, как ко всему новому, надо привыкнуть, ибо пока не очень удобно, молодец
»]]>Никита]]>Игорь,
img {behavior: url("pngbehavior.htc");
}
К картинке да, можно так.
А к бэкграунду тэга <a>?
Спасибо всем за комменты, над дизайном буду ещё работать.
»]]>Борзов Серёжа]]>сорри за мат, но дизайн просто охуительный! Респект и уважуха, завидую =)))
»]]>Максуд]]>Прикольно! На 1024 смотрится супер.
»В понедельник в моей съемной квартире будет коннект, тогда посмотрю на 21”.
Смотрю и стыжусь: когда я свой блог в порядок приведу? Как выставил в тестовом варианте, так и стоит уже черт знает сколько
]]>Никита]]>Борзов Серёжа, спасибо.
»Максуд, мда, я тоже посмотрел на 1024, забавно. Текст по всей ширине экрана. Хотя почему бы и нет. Но добавлю несколько гаджетов, что облегчить просмотр.
]]>Andrey Zhinzher]]>Самое смешное заключается в том, что якак раз решал эту проблему
)) Написали мы креативный сайт с прозрачностями в 8-разрядном png, а теперь спложные проблемы со старыми Ослами.
Проверим ваш скрипт, благодарю!
Новый дизайн – очень качетсвенный со всех сторон, мегареспект!
»]]>Andrey Zhinzher]]>Позволю себе комментарий про форматы. PNG как и GIF – растровые форматы файлов для оптимизации для Internet векторной графики, точнее изображений с областями однородной заливки.
Только между ними есть серьезная разница в использовании цветовых пространств, поэтому при использовании в slices рядом одноцветных кусочков этих разных форматов, будет заметна разница.
»]]>Никита]]>Спасибо за комментарий, Андрей.
Да, несовпадение цветов имеет место быть, но оно возможно лишь только если вы очень сильно сжимаете используя PNG-8 или сравниваете картинки в IE. Это косяк исключительно IE, но не как формата PNG. Сдвиг цветовой гаммы в IE может быть обойдён использованием только png, не только в качестве картинок, но и взамен кодовому предствалению цветов фона элемента на web-странице. Т.е. написав background-color: #f7afe2 какому-либо элементу, и поставив рядом png-картинку сделанную в photoshop того же цвета, вы заметите ощутимую разницу.
»]]>Andrey Zhinzher]]>совершенно верно, просто gif и png используют разные наборы образцов для оптимизации.
вообще тема цветовых движков браузеров достаточно интересна, можно попробовать расрыть ее исрользуя оба наших блога
в виде затравки могу сказать что пока только Safari умеет использовать встроенные профили в растровые картинки (точнее они на данный момент все растровые swg не прижился). другими словами у него в ядро встроен модуль CMM, думаю за этим – будущее.
хотя с другой стороны, Internet это sRGB а оно настолько мало http://dtpcraft.info/2007/07/2.....ces-part-2 , что не понятно что могут дать профили?
»]]>Andrey Zhinzher]]>кстати, приведенный вами цвет (f7afe2) не web safe ( http://dtpcraft.info/2007/06/05/safe-colors/ ) поэтому он “имеет право” отображаться в разных браузерах и на разных мониторах по-разному.
p.s. сорри за длинные ссылки, если они мешаются, их можно убить
»]]>Никита]]>тема весьма интересная. Попробую порыться.
хм, вот насчёт “имеет право” очень правильные кавычки. Насчёт монитора не согласен. Даже если это не web safe color. Если монитор не может показать определённый цвет, то он его не покажет ни в случае использования кода, ни при использовании картинки. Тут софтварная проблема.
p.s. ставим пробелы с обоих сторон ссылки и она превращается в нормальную ссылку.
»]]>Максуд]]>Вот дома появилась сеть и, как обещал, отписываюсь: на MacOS X в Firefox2 и Safari, на 1600х1200 и на 1400х1050 –
»все прекрасно смотрится. Если нужно, могу поставить ИЕ для теста. Не хочу, но могу.
]]>Никита]]>Спасибо, Максуд. Думаю не стоит тебе засорять Мак всякими ослами. Тем более что я проверял в IE6 и IE7 на разрешениях 1680х1050 и 1024х768. ))
»]]>Евгений]]>Кстати, проблема с несовпадением цвета фона и цвета в png связана с тем что IE некорректно работает с гамма коррекцией (а может вообще с ней не работает) и фиксится элементарно, нужно удалить блок гамма коррекции из файла png с помощь специальной утилитки TweakPNG
Про PNG рекомендую прочесть статью Креативное использование полупрозрачных PNG в веб-дизайне, и дисскуссию PNG8 против GIF
Никита, дизайн у вас, конечно, уникальный, но вот внизу тесновато, убрать бы последние посты отсюда, форма для комментов уж слишком маленькая, писать в ней, что-то осмысленное тяжело.
»]]>Алексей]]>Долго рыскал по всему интернету в поисках хака для возможности работы с полупрозрачными png-файлами, указанными в качестве background-image в CSS.
Ваше решение оказалось рабочим, но возникли другие не описанные у Вас проблемы. В моем проекте png-бэкграунд применяется к div-контейнеру, в который заключено навигационное меню сайта (список, выведенный в строку. Элементы списка ссылки). Когда я применил ваш метод для обработки прозрачности контейнера, в IE перестали работать ссылки меню навигации. Они оказались как бы под картинкой.
Вот так выглядит html-код:
О компании
Каталог
Новости
Контакты
Оставить заявку
Вот так CSS:
#headmenu {
margin:0;
padding:0;
width:691px;
height:113px;
background: url(/themes/geret/images/navigation.png);
background: expression(“none”);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/themes/geret/images/navigation.png”)
}
#navigation {
list-style-type:none;
margin: 0 0 0 2em;
padding:70px 0 0 0;
width:70%;
white-space:nowrap;
}
#navigation li {
display:inline;
margin: 0 1em 0 0;
font-size:140%;
}
#navigation li a:link, #navigation li a:visited {
color:#fff;
}
#navigation li a:hover {
color:#FFCCFF;
}
огромная просьба, помогите разобраться.
»]]>Никита]]>В какой версии IE у вас проблема?
»]]>Алексей]]>Проблема в IE 6.0
»]]>Никита]]>напишите мне через форму в разделе контакты.
»]]>Axon]]>Алексей, надо для ссылок поставить position: relative;
http://www.tigir.com/alpha_png.htm
»]]>kinder]]>Привет =)
Статья познавательная, когда-то мне очень помогла. Но пришло время возникли другие задачи и появился вопрос. А можно каким нибудь шаманством/плясками с бубном/молитвами Ктулху заставить выводить png-картинку с прозрачностью повторяющимся фоном в слое? Так как описаной тобой метод прекрасно работает с тегами img. Если посидеть и понять смысл происходящего то видно, что если взять блок (div прекрасно подойдёт) задать ему высоту и ширину, то используя фильтр можно задать фон с прозрачностями…
Пока писал коментарий, решил поэксперементировать. Выяснил достаточное условие чтобы рисунок начал повторяться это задание у блока высоты. И тогда наступает вселенское счастье. И в принципе решил свою проблему. Только не могу понять одного момента. Если у нас есть блок допустим высоты 500px а вложенному блоку мы говорим, что height: 100%, то вложенный блок будет высотой 500px. В моем случае у меня такие коды доступа к зеону:
…нафигация…
…непонятно…
Способ расшифровки кодов доступа:
#menu {
float: left;
width: 218px
}
#menu .wrapper {
height: auto !important;
height: 208px
}
#menu .block {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/block.png’, sizingMethod=’scale’, true)
}
Фон должен показаться у блоков с классом block, но всилу дальновидности команды разработчиков IE6 этого не происходит. Делаем волшебные пасы руками, добавляем height: 100% к [#menu .block] и вуаля у нас появляется фон, но размер блоков остаётся прежним.
Итоговый главный вопрос: почему высота блоков осталась прежней?
»]]>kinder]]>эээ… смотрю коды доступа к зеону скушало, секретные же =), придётся повториться
<div id="menu">
»<div class="wrapper">
<div class="block">…нафигация…</div>
<div class="block">…непонятно…</div>
</div>
</div>
]]>Никита]]>Высота блоков изменится только в IE6. В остальных браузерах останутся прежними из-за:
#menu .wrapper {
height: auto !important;
height: 208px
}
И не нужно устанавливать высоту блоку, чтобы фон заработал, достаточно следующего:
»#menu .block {
background-image: url(images/block.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/block.png’, sizingMethod=’scale’, true);
}
]]>WWWBlog: Layouts & IPB Skins » Архив]]>[...] Креативное использование полупрозрачных PNG в веб-дизайне PNG-прозрачность в IE 5.5-6 Что такое PNG формат? PNG в IE. [...]
»]]>kinder]]>Никит,
»несовсем, в “нормальных” браузерах я не извращюсь и всё работает как надо, проблема была с IE 6 код для него и написан. Когда я ставлю height: 100% у класса block эти самые блоки ведут себя так как-будто height: auto. И если в IE 6 не задать высоту у блока отличную от auto, то фильтр повторять однопиксельную картинку с полупрзрачностью отказывался и полностью игнорировал все мои мольбы =).
]]>Скины IPB и макеты сайтов » Архив]]>[...] PNG Быстро и просто внедряем PNG в дизайн сайта Что такое PNG формат? PNG в IE. PNG-прозрачность в IE [...]
»]]>Серега]]>Пасип , долго использовал картинки место фонов в ие , до сих пор не получалось делать фоном , блин с этими фильтрами … Наконец =)
»]]>Михаил]]>Спасибо! Очень пригодилась информация
»