Рис. 3.04. Боковое меню и реакция на наведение мыши – сайт Фарука Атеса
То, что выглядит обычным сдвинутым вправо списком, состоящим из текста и картинок, оказывается намного более интересным объектом, когда начинаешь взаимодействовать с ним. Это важнейший пример обогащенного взаимодействия, и Фарук использует разнообразные свойства CSS3, чтобы достичь этого эффекта.
Рис. 3.05 показывает, как выглядят состояние при наведении и обычное состояние в Internet Explorer 7, который никак не поддерживает CSS3. Можно заметить, что хоть состояние при наведении и небезупречно, сайтом по-прежнему можно пользоваться, информацию можно прочитать – сайт остается функциональным; не говоря о том, что основное состояние выглядит почти неизменно.
Рис. 3.05. В браузере IE7 сайт Фарука Атеса не демонстрирует тех же визуальных эффектов, но это в порядке вещей
Наведение на элемент (или фокусировка) – прекрасное место сайта, которое можно улучшать средствами CSS3. Пользователи Internet Explorer получат иное взаимодействие (пока в этот браузер не войдет поддержка свойств CSS3). Но это взаимодействие ничем не хуже, и, откровенно говоря, пользователи IE не узнают о том, что они упускают.
То есть – до тех пор, пока не откроют сайт на компьютере друга, где установлен браузер Safari, Chrome, Firefox или Opera (и почувствуют подступающую зависть).
Должны ли сайты выглядеть полностью одинаково в каждом браузере?
Это важный вопрос (и вполне подходящий для того, чтобы задать его сейчас), и я пробую ответить на него на сайте с невероятно длинным доменным именем (рис. 3.06): http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.
Рис. 3.06. Необычно названный http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
Как и пример Фарука, этот сайт становится интересным лишь тогда, когда начинаешь взаимодействовать с ним. На поверхности он выглядит практически одинаково во всех браузерах, но когда начинаешь двигать мышкой, прикасаясь к тексту и к фону, применяется набор свойств CSS3, переходов и трансформаций, чтобы сделать взаимодействие особенным и запоминающимся.
Опять-таки мы улучшаем дизайн именно внутри слоя взаимодействия. Основное содержимое, читаемость, юзабилити и разметка остаются одинаковыми и неизменными.
Рис. 3.07. Обогащенное взаимодействие раскрывается, когда начинаешь взаимодействовать с сайтом. Все благодаря CSS3
Навигация на Луне
Применим подход добавления CSS3 к состоянию hover непосредственно в наш пример. Я подробно расскажу каждый шаг на пути создания меню в верхней части сайта (рис. 3.08), в котором сочетаются border-radius, text-shadow, RGBA и CSS-переходы, чтобы построить взаимодействие, которое будет удивлять и восхищать.
Рис. 3.08. Меню в нашем примере улучшено в состоянии hover за счет CSS3
Сначала разметка
Так как мы приверженцы семантики, то разметка для меню будет состоять из обыкновенного списка.
<ul id="nav">
<li><a href="#">News</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Junk</a></li>
<li><a href="#">About</a></li>
</ul>
Разумеется, здесь нет ничего нового – лишь подходящая структура, к которой можно начать применять стили.
Сдвинем элементы
Сначала сдвинем весь список и добавим небольшой отступ, чтобы разместить меню в правой части страницы; затем сдвинем также каждый элемент списка.
#nav {
float: right;
padding: 42px 0 0 30px;
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
Результат виден на рис. 3.09. Теперь список горизонтален.
Рис. 3.09. Горизонтальный список ссылок, полученный применением нескольких CSS-правил
Определение цвета ссылки – RGBA
Теперь добавим отступ на каждую ссылку и сменим цвет на полупрозрачный белый. Воспользуемся цветовой моделью RGBA, чтобы указать белый цвет (255, 255, 255) и 70% непрозрачности (0.7), чтобы текст впитывал в себя часть расположенного за ним фона (рис. 3.10).
Рис. 3.10. Теперь ссылки стилизованы с помощью RGBA и текст немного смешивается с фоном
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
Рис. 3.11 показывает ссылки крупным планом. Непрозрачность в 70% делает фон немного просвечивающим.
Рис. 3.11. Увеличенный вид полупрозрачных ссылок
Запасной вариант для RGBA
RGBA – удивительно гибкий способ задания цвета и прозрачности, но он не поддерживается всеми браузерами. Safari, Chrome, Firefox, Opera поддерживают его, равно как и Internet Explorer 9, но что насчет IE6-8?
Здесь пригодится запасная цветовая схема. При пользовании RGBA для указания цветов хорошей практикой является сначала указывать только цвет – для тех браузеров, которые не поддерживают RGBA.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
Браузеры, поддерживающие RGBA, проигнорируют это объявление цвета (светло-серый #ccc в этом примере), а браузеры, которые не поддерживают RGBA, проигнорируют RGBA-указание.
Итак, важная вещь, которую следует запомнить: указывайте запасные цвета в RGB для всех цветов, задаваемых в RGBA, в отдельном правиле, которое ставится перед RGBA-объявлением.
Добавим text-shadow
Как последнее добавление к оформлению ссылок, добавим небольшую тень (text-shadow). Вновь воспользуемся RGBA, чтобы задать цвет тени: полупрозрачный черный цвет будет смешиваться с цветом фона.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
Рис. 3.12 показывает сравнение ссылок без свойства text-shadow (слева) и с ним (справа), как это выглядит в Safari. Эта деталь почти неразличима, и все же крошечная тень приподнимает текст над фоном ровно настолько, насколько нужно.
Рис. 3.12. Сравнение ссылок без свойства text-shadow (слева) и с ним (справа)
Помните, что свойство text-shadow работает в текущих версиях Safari, Chrome, Firefox и Opera. Браузеры, не поддерживающие text-shadow (читай: IE), спокойно проигнорируют это правило. Нет тени – нет проблем.
С готовым text-shadow мы можем переходить к оформлению состояния :hover. И здесь мы будем в большей мере опираться на CSS3.
Оформление состояний hover и focus
Добавим изменение цвета текста и фона для состояния :hover каждой ссылки. Мы вновь применим RGBA, чтобы задать тексту полупрозрачный белый фон.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
#nav li a: hover,
#nav li a: focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
В состоянии :hover цвет текста меняется на непрозрачный белый; добавляется фон белый фон с непрозрачностью в 15%. Тот же стиль задается для состояния: focus. Посетители сайта, пользующиеся клавиатурой для перемещения между элементами, увидят изменение цвета текста, когда переводят фокус на ссылку.
Рис. 3.13 показывает ссылки в новом состоянии :hover (и :focus). Браузеры, поддерживающие RGBA, отобразят полупрозрачный белый фон позади яркого белого текста.
Рис. 3.13. Состояние: hover – теперь с полупрозрачный фоном, полученным с применением RGBA
Скругление углов: border-radius
Следующим шагом мы скруглим углы фона, всплывающего в состоянии: hover, – воспользуемся свойством border-radius.
Вспоминая изученное в первой главе о свойстве border-radius и о браузерных префиксах, которые позволяют нам использовать это свойство сегодня, мы можем добавить следующие строки к существующим правилам для ссылок:
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
#nav li a: hover,
#nav li a: focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);