CSS для веб-дизайнеров.

Оформление списка.

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

CSS для веб-дизайнеров

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

#footer-logos { 

text-align: center;

}.

#footer-logos li {

display: inline;

}.

Теперь выставим такие значения свойства opacity, которые затемнят иконки в их обычном состоянии и будут осветлять их в состояниях :hover и:focus.

#footer-logos a img {

opacity: 0.25;

}.

#footer-logos a: hover img,

#footer-logos a: focus img {

opacity: 0.6;

}.

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

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