В состоянии

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

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

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

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

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

.

Вспоминая изученное в первой главе о свойстве

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

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

 – теперь со скругленными углами, полученными с использованием свойства . Так страница выглядит в браузерах Safari, Chrome, Firefox, Opera, равно как и в IE9. Помните, что беспрефиксное свойство поставлено в списке последним, чтобы оно получилось приоритет над всеми остальными. Например, Safari 5 поддерживает как беспрефиксное свойство , так и , поддерживаемое в Safari 4.

Рис. 3.14. Как скруглить углы, пользуясь свойством border-radius

Возможно, читатель спросит: почему объявление

ставится в правило для , а  (где скругленные углы появляются на экране)? Ответ кроется в CSS-переходе, который мы сейчас добавим как последний штрих.

Вспомним изученное во второй главе и добавим переход в состояния

и  у ссылок в меню. Такой эффект смягчит появление фона: он будет постепенно всплывать позади текста. Переход также сгладит смену цвета текста от полупрозрачного белого до полностью белого (рис. 3.15).

Рис. 3.15. Представьте себе, как постепенно изменяются значения свойств, когда действует переход

В этом примере мы напишем код перехода, работающий в Safari, Chrome, Firefox (4.0) и Opera, и самым последним добавим свойство

без префикса – для свежих версий существующих браузеров и для новых браузеров.