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;