Дэн Сидерхолм - CSS3 для веб-дизайнеров

• News
• Things
• Stuff
• Junk
• About

Разумеется, здесь нет ничего нового – лишь подходящая структура, к которой можно начать применять стили.

Сначала сдвинем весь список и добавим небольшой отступ, чтобы разместить меню в правой части страницы; затем сдвинем также каждый элемент списка.

#nav {

float: right;

padding: 42px 0 0 30px;

}

#nav li {

float: left;

margin: 0 0 0 5px;

}

Результат виден на рис. 3.09. Теперь список горизонтален.

Рис. 3.09.Горизонтальный список ссылок, полученный применением нескольких CSS-правил

Теперь добавим отступ на каждую ссылку и сменим цвет на полупрозрачный белый. Воспользуемся цветовой моделью RGBA, чтобы указать белый цвет ( 255, 255, 255) и 70% непрозрачности ( 0.7), чтобы текст впитывал в себя часть расположенного за ним фона ( рис. 3.10).

Рис. 3.10.Теперь ссылки стилизованы с помощью RGBA и текст немного смешивается с фоном

#nav li a {

padding: 5px 15px;

font-weight: bold;

color: rgba(255, 255, 255, 0.7);

}

Рис. 3.11показывает ссылки крупным планом. Непрозрачность в 70% делает фон немного просвечивающим.

Рис. 3.11.Увеличенный вид полупрозрачных ссылок

RGBA – удивительно гибкий способ задания цвета и прозрачности, но он не поддерживается всеми браузерами. Safari, Chrome, Firefox, Opera поддерживают его, равно как и Internet Explorer 9, но что насчет IE6-8?

Здесь пригодится запасная цветовая схема. При пользовании RGBA для указания цветов хорошей практикой является сначала указывать только цвет – для тех браузеров, которые не поддерживают RGBA.

#nav li a {

padding: 5px 15px;

font-weight: bold;

color: #ccc;

color: rgba(255, 255, 255, 0.7);

}

Браузеры, поддерживающие RGBA, проигнорируют это объявление цвета (светло-серый #cccв этом примере), а браузеры, которые не поддерживают RGBA, проигнорируют RGBA-указание.

Итак, важная вещь, которую следует запомнить: указывайте запасные цвета в RGB для всех цветов, задаваемых в RGBA, в отдельном правиле, которое ставится перед RGBA-объявлением.

Как последнее добавление к оформлению ссылок, добавим небольшую тень ( 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каждой ссылки. Мы вновь применим 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

Следующим шагом мы скруглим углы фона, всплывающего в состоянии: 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).