Книга: CSS3 для веб-дизайнеров

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

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

Первые фрагменты оформления отцентрируют картинки в футере и поместят их горизонтально (рис. 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, но существует хакерское решение для тех, кто не прочь окунуться в дебри проприетарности.

Оглавление книги