Я создал иконки полностью белыми PNG-изображениями, зная, что затем применю свойство

, чтобы отрегулировать прозрачность на уровне CSS. Такой подход изменил то, как я в некоторых ситуациях думаю о графических объектах в веб-проектах.

Вместо того чтобы сохранять полупрозрачные PNG, я сохраняю полностью непрозрачные версии (рис. 3.17), которые могу менять в браузере. Кроме того что такой подход экономит время, он также позволяет выставлять разные уровни прозрачности в состояниях

, и , избавляя от необходимости создавать несколько наборов изображений.

Рис. 3.17. PNG-файлы с логотипами – полностью белые

Первые фрагменты оформления отцентрируют картинки в футере и поместят их горизонтально (рис. 3.18):

Рис. 3.18. Белые PNG, отцентрированные в футере

 

Теперь выставим такие значения свойства

, которые затемнят иконки в их обычном состоянии и будут осветлять их в состояниях и.

Мы выставили картинкам непрозрачность в 25%; при наведении или получении фокуса непрозрачность поднимается до 60% (рис. 3.19). Крайне просто, не так ли? И для такого эффекта нужен лишь один набор картинок.

Заметим, что свойство

не требует браузерного префикса и работает в Safari, Chrome, Firefox и Opera. IE8 и ниже не поддерживает , но существует хакерское решение для тех, кто не прочь окунуться в дебри проприетарности.

К счастью,

поддерживается в Internet Explorer 9 Beta, но мы также можем сымитировать тот же результат в ранних версиях IE, воспользовавшись проприетарным свойством от Microsoft.

Обычно я бы не стал предлагать использовать свойство

, потому что (в отличие от свойств с браузерными префиксами) оно не входит ни в один предложенный стандарт. Также использование может повлечь за собой существенные проблемы производительности в зависимости от того, где и как часто оно используется. Это хак – но он решает проблему.

При условии, что вышесказанное понятно, и выделяя это свойство в отдельный стилевой файл или иначе аккуратно комментируя его,

можно воспринимать как приемлемый метод.

Вот как он работает:

 

Синтаксис похож: значение opacity вставляется в альфа-фильтр IE. Обратите внимание: IE8 игнорирует свойство

и требует префиксное свойство с некоторыми дополнительными некрасивыми значениями.