CSS3 для веб-дизайнеров

Добавим изменение цвета текста и фона для состояния :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);

}

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

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

Возможно, читатель спросит: почему объявление border-radius ставится в правило для #nav li a, а не #nav li a: hover (где скругленные углы появляются на экране)? Ответ кроется в CSS-переходе, который мы сейчас добавим как последний штрих.

Добавим анимацию

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

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

В этом примере мы напишем код перехода, работающий в Safari, Chrome, Firefox (4.0) и Opera, и самым последним добавим свойство transition без префикса – для свежих версий существующих браузеров и для новых браузеров.

#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;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

#nav li a: hover,

#nav li a: focus {

color: #fff;

background: rgba(255, 255, 255, 0.15);

}