Чтение онлайн

на главную - закладки

Жанры

CSS3 для веб-дизайнеров
Шрифт:

Простой и гибкий hover с использованием opacity

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

В нашем арсенале есть еще одно свойство для улучшения вида элементов в состоянии

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

Один из способов применять

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

Посмотрим, как свойство

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

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

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

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

Воспользуемся свойством

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

Разметка

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

<ul id="footer-logos">

<li><a href="#"><img src="img/logo-sb.png"
alt="SimpleBits logo" /></a>

</li>

<li><a href="#"><img src="img/icon-feed.png"
alt="RSS feed" /></a>

</li>

<li><a href="#"><img src="img/icon-bitman.png"
alt="BitMan" /></a>

</li>

</ul>

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

Я создал иконки полностью белыми 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
можно воспринимать как приемлемый метод.

Поделиться:
Популярные книги

Автобиография

Твен Марк
Документальная литература:
биографии и мемуары
6.25
рейтинг книги
Автобиография

Кодекс Охотника. Книга XVII

Винокуров Юрий
17. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XVII

Я еще барон. Книга III

Дрейк Сириус
3. Дорогой барон!
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Я еще барон. Книга III

Романов. Том 1 и Том 2

Кощеев Владимир
1. Романов
Фантастика:
фэнтези
попаданцы
альтернативная история
5.25
рейтинг книги
Романов. Том 1 и Том 2

Бродяга. Книга вторая

Первухин Андрей Евгеньевич
2. Бродяга
Фантастика:
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Бродяга. Книга вторая

Охотник на демонов

Шелег Дмитрий Витальевич
2. Живой лёд
Фантастика:
боевая фантастика
5.83
рейтинг книги
Охотник на демонов

Драконы

Мартин Джордж Р.Р.
Фантастика:
фэнтези
8.08
рейтинг книги
Драконы

Двойник короля 15

Скабер Артемий
15. Двойник Короля
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Двойник короля 15

Кодекс Охотника. Книга XXIV

Винокуров Юрий
24. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XXIV

Французская новелла XX века. 1900–1939

Пруст Марсель
Проза:
классическая проза
6.25
рейтинг книги
Французская новелла XX века. 1900–1939

Твое сердце будет разбито. Книга 1

Джейн Анна
Любовные романы:
современные любовные романы
5.50
рейтинг книги
Твое сердце будет разбито. Книга 1

Законы Рода. Том 8

Мельник Андрей
8. Граф Берестьев
Фантастика:
юмористическое фэнтези
аниме
фэнтези
5.00
рейтинг книги
Законы Рода. Том 8

Охотник за головами

Вайс Александр
1. Фронтир
Фантастика:
боевая фантастика
космическая фантастика
5.00
рейтинг книги
Охотник за головами

Газлайтер. Том 40

Володин Григорий Григорьевич
40. История Телепата
Фантастика:
альтернативная история
аниме
попаданцы
5.00
рейтинг книги
Газлайтер. Том 40