Читаем 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);

}


Перейти на страницу:

Похожие книги

Секреты приложений Google
Секреты приложений Google

Даже продвинутые пользователи Интернета не подозревают о тех огромных возможностях, которые предоставляют сервисы Google. Автор рассказывает о таких «секретах» сервисов, которые просто немедленно хочется использовать! Создавать сайты и презентации, бродить по улочкам Парижа, изучать звездное небо – все это доступно каждому, кто сидит у экрана монитора и имеет доступ в Интернет. Книга научит вас работать с веб-приложениями и тысячекратно увеличить свои возможности с помощью новейших технологий. Она написана легким, доступным языком и не требует от читателя наличия каких-либо специальных знаний. Книга содержит множество примеров, иллюстраций и будет полезна всем, кто не стоит на месте и стремится сделать свою жизнь более насыщенной и интересной.

Денис Балуев , Денис Игоревич Балуев

Программирование, программы, базы данных / Интернет / Программное обеспечение / Книги по IT
Самоучитель современного пользователя ПК
Самоучитель современного пользователя ПК

В самоучителе рассмотрены темы, актуальные для современного пользователя ПК: цифровое фото, запись, оцифровка, обработка и воспроизведение звуковых и видеофайлов; Web-камеры, запись компакт-дисков, а также сканирование и печать изображений, работа с дигитайзерами, подключение плазменных панелей и телевизоров к ПК. Для начинающих пользователей в необходимом объеме изложены основные сведения об устройстве компьютера и видах программ, описаны настройка и работа в инструментальных и сервисных программах (диагностика и проверка ПК, файловые менеджеры, программы-антивирусы и архиваторы). Дополнительно изложены вопросы восстановления работоспособности ПК. Рекомендуется широкому кругу читателей — начинающих пользователей и работающих на ПК, которые интересуются возможностями новой аппаратуры и программного обеспечения.

В. В. Мельниченко , Н. В. Калиниченко

Интернет / Компьютерное «железо» / ОС и Сети / Программное обеспечение
Как заработать в Интернете. 35 самых быстрых способов
Как заработать в Интернете. 35 самых быстрых способов

В современном мире новые технологии играют решающую роль, а с помощью Интернета любой человек в короткое время может стать миллионером! И самое главное, что для этого вам даже не нужно выходить из дому – лишь тратить несколько часов времени на работу в Сети…Способов заработать в Сети довольно много, но не все они идеальны, и не все будут одинаково полезны и эффективны. Эта книга написана специально для тех, кого интересует заработок в Интернете. На ее страницах вы найдете обзор методов: известные и не очень, старые и новые способы заработка в Сети, варианты открытия своего дела и способы работать «на себя» без создания ООО или ИП. Подробное описание каждого метода позволит вам сделать вывод о том, какой способ заработка подходит лично вам, а может быть, вы придумаете что-то новое. После прочтения этой книги вы будете обладать всеми знаниями, необходимыми для заработка в Сети – читайте и начинайте зарабатывать!

Ольга Фомина

ОС и Сети, интернет / Интернет / Личные финансы / Финансы и бизнес / Книги по IT