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

 

Результат виден на рис. 3.09. Теперь список горизонтален.

Рис. 3.09. Горизонтальный список ссылок, полученный применением нескольких CSS-правил

Теперь добавим отступ на каждую ссылку и сменим цвет на полупрозрачный белый. Воспользуемся цветовой моделью RGBA, чтобы указать белый цвет (

) и 70% непрозрачности (), чтобы текст впитывал в себя часть расположенного за ним фона (рис. 3.10).

Рис. 3.10. Теперь ссылки стилизованы с помощью RGBA и текст немного смешивается с фоном

 

Рис. 3.11 показывает ссылки крупным планом. Непрозрачность в 70% делает фон немного просвечивающим.

Рис. 3.11. Увеличенный вид полупрозрачных ссылок

RGBA – удивительно гибкий способ задания цвета и прозрачности, но он не поддерживается всеми браузерами. Safari, Chrome, Firefox, Opera поддерживают его, равно как и Internet Explorer 9, но что насчет IE6-8?

Здесь пригодится запасная цветовая схема. При пользовании RGBA для указания цветов хорошей практикой является сначала указывать только цвет – для тех браузеров, которые не поддерживают RGBA.

 

Браузеры, поддерживающие RGBA, проигнорируют это объявление цвета (светло-серый

в этом примере), а браузеры, которые не поддерживают RGBA, проигнорируют RGBA-указание.

Итак, важная вещь, которую следует запомнить: указывайте запасные цвета в RGB для всех цветов, задаваемых в RGBA, в отдельном правиле, которое ставится перед RGBA-объявлением.

Как последнее добавление к оформлению ссылок, добавим небольшую тень (

). Вновь воспользуемся RGBA, чтобы задать цвет тени: полупрозрачный черный цвет будет смешиваться с цветом фона.

 

Рис. 3.12 показывает сравнение ссылок без свойства

(слева) и с ним (справа), как это выглядит в Safari. Эта деталь почти неразличима, и все же крошечная тень приподнимает текст над фоном ровно настолько, насколько нужно.

Рис. 3.12. Сравнение ссылок без свойства text-shadow (слева) и с ним (справа)

Помните, что свойство

работает в текущих версиях Safari, Chrome, Firefox и Opera. Браузеры, не поддерживающие (читай: IE), спокойно проигнорируют это правило. Нет тени – нет проблем.

С готовым

мы можем переходить к оформлению состояния . И здесь мы будем в большей мере опираться на CSS3.

Добавим изменение цвета текста и фона для состояния

каждой ссылки. Мы вновь применим RGBA, чтобы задать тексту полупрозрачный белый фон.

В состоянии

цвет текста меняется на непрозрачный белый; добавляется фон белый фон с непрозрачностью в 15%. Тот же стиль задается для состояния: focus. Посетители сайта, пользующиеся клавиатурой для перемещения между элементами, увидят изменение цвета текста, когда переводят фокус на ссылку.

Рис. 3.13 показывает ссылки в новом состоянии

(и ). Браузеры, поддерживающие RGBA, отобразят полупрозрачный белый фон позади яркого белого текста.

Рис. 3.13. Состояние: hover – теперь с полупрозрачный фоном, полученным с применением RGBA

Следующим шагом мы скруглим углы фона, всплывающего в состоянии: hover, – воспользуемся свойством

.