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

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

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

^{Рис. 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, но существует хакерское решение для тех, кто не прочь окунуться в дебри проприетарности.

Данный текст является ознакомительным фрагментом.