CSS3 для веб-дизайнеров — страница 6 из 14

Мы постоянно ищем решения, которые экономят время и содержат дополнительную гибкость. CSS3 изобилует такими решениями: эта технология дает возможность написать несколько строчек и получить то, на что раньше уходило больше времени и сил.

В нашем арсенале есть еще одно свойство для улучшения вида элементов в состоянии :hover: opacity. Как упоминалось в первой главе, opacity – это свойство CSS3, которым можно явно указать, насколько непрозрачным будет тот или иной элемент. В сочетании с вышеупомянутым RGBA opacity предлагает еще один способ добавить прозрачность в дизайны, которые мы создаем для веба.

Один из способов применять opacity, который нравится мне, – создавать простое и гибкое состояние: hover для графических ссылок, пользуясь изменением прозрачности для создания нескольких состояний из одного изображения. Прибавим к этому CSS-переход и получим прекрасное, яркое, легко поддерживаемое взаимодействие для графических ссылок на странице.

Посмотрим, как свойство opacity применяется в примере с Луной.

Прозрачность на кликабельных картинках

На рис. 3.16 показан футер сайта-примера, в котором – после некоторого юридического текста и шокирующего дисклеймера – расположились три логотипа, на них можно нажать.

^{Рис. 3.16. Футер сайта Вещи, оставленные на Луне}

Воспользуемся свойством opacity не только для того, чтобы определить состояния :hover и :focus, но и чтобы задать начальный уровень прозрачности. CSS-переход сгладит и анимирует это изменение, чтобы довершить эффект.

Разметка

Как и в предыдущем примере с навигацией, разметка для логотипов в футере проста и семантична – ненумерованный список, состоящий из картинок-ссылок:

alt="SimpleBits logo" />

alt="RSS feed" />

alt="BitMan" />

Прозрачность и эффективность картинки

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

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

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

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

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

opacity: хак для IE

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

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

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

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

#footer-logos a img {
 border: none;
 opacity: 0.25;
 -ms-filter: "progid: DXImageTransform.Microsoft.
Alpha(Opacity=25)"; /* IE 8 hack */
 filter: alpha(opacity = 25);/* IE 5–7 hack */
 }

#footer-logos a: hover img,
#footer-logos a: focus img {
 opacity: 0.6;
 -ms-filter: "progid: DXImageTransform.Microsoft.
Alpha(Opacity=60)"; /* IE 8 hack */
 filter: alpha(opacity = 60);/* IE 5–7 hack */
 }

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

Воспользовавшись хаками, мы добились такого же результата в IE (рис. 3.20). Повторюсь – если решили использовать хаки, пользуйтесь ими с умом. Но реальность заключается в том, что, скорее всего, вам придется использовать хаки, если какой-либо ваш сайт показывает значительный трафик с IE (так обстоит ситуация с большинством сайтов).

^{Рис. 3.20. Футер в IE7 показывает псевдосвойство opacity с использованием хака filter}

^{Добавим переход}

Наконец, наложим переход на свойство opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.

Добавим знакомые строки transition, на этот раз объявляя переход исключительно для свойства opacity. Сделаем его быстрым (0,2 секунды) и выставим временную функцию ease-in-out.

#footer-logos a img {
 opacity: 0.25;
 -ms-filter: "progid: DXImageTransform.Microsoft.
Alpha(Opacity=25)"; /* IE 8 hack */
 filter: alpha(opacity = 25); /* IE 5–7 hack */
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition: opacity 0.2s ease-in-out;
 -o-transition: opacity 0.2s ease-in-out;
 transition: opacity 0.2s ease-in-out;
 }

#footer-logos a: hover img,
#footer-logos a: focus img {
 opacity: 0.6;
 -ms-filter: "progid: DXImageTransform.Microsoft.
Alpha(Opacity=60)"; /* IE 8 hack */
 filter: alpha(opacity = 60); /* IE 5–7 hack */
 }

С использованием перехода мы получили простой метод использования opacity для создания гибкого взаимодействия в состоянии hover на основе лишь одного набора изображений.

Вперед, к новому hover