CSS3 для веб-дизайнеров - [10]
>Добавим 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;
> 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);
> }
Помните, что свойства перехода выставляются для обычного состояния элемента, на который накладывается переход. Переходы построены таким способом, чтобы они реагировали не только на состояние >:hover, но и на >:focus и >:active.
В коде анимации используется значение all, чтобы отследить все свойства, которые изменяются в состояниях >:hover и >:focus, – в этом примере color и background. Ту же анимацию можно было бы получить другим способом, перечислив все свойства через запятую:
>-webkit-transition:
> color 0.3s ease-in-out,
> background 0.3s ease-in-out;
