Png прозрачность и вообще прозрачность в web-дизайне

Я часто рисую в дизайнах что-то полупрозрачное на планшете или занимаюсь фигурным вырезанием чего-нибудь из фотографии и накладыванием на разноцветный фон. Если я хочу, чтобы это вырезанное было в моей верстке отдельным слоем над фоном, gif-прозрачность c его полезным, но всегда однотонным матированием (в фотошопе при сохранении для web это, как известно, matte) мне в этом случае не помогает.

Помогают две вещи. Одна из них — png формат, который поддерживает более умную прозрачность, правда, весит чаще всего поболее gif-а. Но тут возникает проблема: IE6, как и IE5, png-формат не поддерживают. Тем не менее, эта проблема сейчас легко решается с помощью java script (jquery) без хаков и бехавиоров, спасибо andreaseberhard.

Чтобы png-фон стал прозрачным, заливаем себе 2 файла:

jquery-latest.pack.js (или любой другой jquery поновее);

jquery.pngFix.js.

Путь к этим файликам соотвественно вставляем в head.

И активируем там же.

И все. Png-image работает в IE6 и в IE 5.5.

Другой — и для меня лично более предпочтительный способ — это flash. Adobe Flash для меня программа, созданная для анимации в той же степени, насколько она создана для наиболее умного сохранения прозрачности. Самый большой плюс для меня swf-файла с прозрачным фоном в том, что настройками его публикации можно задать ему практически любой размер без потери качества, в отличие от png. Весит мало, грузится быстро, сразу грузится с прозрачным фоном. А то, что не у всех в браузере включен flash, решается заглушкой. Просто вставляем прозрачный gif или тот же png на крайний случай для тех, у кого не загрузится флешка.

В валидный код вставки swf файла в xhtml прописываем прозрачный фон (wmode) и заглушку (img).

Наверх