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