От многих веб-дизайнеров со всего мира я слышу одну и ту же фразу: «Не могу дождаться, хочу начать использовать CSS3… когда его закончат».

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

Если в течение последних нескольких лет мы все делали правильно, то работали на основе веб-стандартов (семантическая HTML-разметка и CSS для форматирования, шрифтов, цветов и так далее), оставляя большинство интерактивных эффектов – анимацию, обратную связь, движение – технологиям Flash и JavaScript. Свойства CSS3, которые медленно, но верно появляются в браузерах, нацеленных на будущее, позволяют нам переносить часть такого взаимодействия в таблицы стилей.

Как дизайнер интерфейсов, которому намного ближе визуальная сторона веб-дизайна, а не программирование, чем больше я могу сделать для создания наглядного интерфейса, пользуясь привычными инструментами – HTML и CSS, – тем больше я радуюсь.

CSS3 придумали для веб-дизайнеров – таких, как вы и я, – и мы можем начать пользоваться его частями сегодня – до тех пор, пока мы знаем, когда и как его применять.

В терминах визуального взаимодействия с сайтом можно разбить все на две категории: ключевое и второстепенное (табл. 1.01).

^{Таблица 1.01. Визуальное взаимодействие с сайтом можно разбить на категории ключевое и второстепенное. К второстепенному CSS3 можно применять сегодня}

Такие составляющие, как брендирование, юзабилити, и расположение блоков крайне важны для успеха любого сайта, поэтому для этих элементов пользоваться технологией, которая не полностью поддерживается всеми браузерами, – рискованное предприятие.

Например, в развивающейся спецификации CSS3 появилось несколько элементов для управления форматом – это то, что нам всем крайне нужно.

Уже многие годы мы заставляем свойство float справляться с раскладкой блоков. Мы разобрались, как справляться с задачами с помощью тех средств, которые у нас есть, но настоящий механизм создания раскладки совершенно необходим.

Учитывая все вышесказанное, два из трех модулей CSS3, касающихся раскладки, еще не внедрены ни в один браузер. Эти модули по-прежнему находятся в разработке, и они по-прежнему весьма запутанны, сложны для понимания и, скорее всего, отличаются от окончательного решения, которое мы ищем. Что важнее, для такой важной вещи, как форматирование, CSS3 – просто не тот инструмент.

С другой стороны спектра расположены второстепенные события – взаимодействие (эффекты наведения и фокусировки, оформление форм, гибкая адаптация под любой размер окна) и визуальные эффекты, которые сопровождают такое взаимодействие (включая анимации). Менее важно сохранить одинаковое поведение такого рода в разных браузерах, что дает отличную возможность применять определенные фрагменты CSS3 для тех браузеров, которые поддерживают их сейчас.

На протяжении всей книги мы будем применять CSS3 для этих некритических событий, сохраняя более важные характеристики страницы нетронутыми для всех браузеров, вне зависимости от того, поддерживают ли они CSS3.

Когда мы решаем сконцентрироваться на таких некритических частях визуального взаимодействия, становится намного проще использовать CSS3 поверх CSS2.1 и обогащать взаимодействие с сайтом, не беспокоясь о том, что основной смысл, формат и доступность будут искажены.

Теперь, когда мы точно определили область взаимодействия, в которой можно смело использовать CSS3, нам стоит также определиться, какие свойства CSS3 мы можем использовать. Иными словами, какие фрагменты спецификации достигли того уровня поддержки браузерами, чтобы быть применимыми уже сейчас.

Крупные блоки CSS3 до сих пор не внедрялись ни в один браузер. Какие-то вещи по-прежнему находятся в разработке. Можно любопытствовать о тех блоках, которые находятся в движении, но куда разумнее обратить внимание на то, что на самом деле работает – и, к счастью, такого уже предостаточно.

Давайте рассмотрим сравнительно небольшой набор главных свойств CSS3, которые будут использованы в примерах в этой книги (см. ниже и табл. 1.02). Сейчас приводятся только определения этих свойств; подробное описание синтаксиса и практика применения будут даны позже.

^{Таблица 1.02. Свойства CSS3 и браузеры, поддерживающие их}

Скругляет углы элемента на заданное значение – радиус. Поддерживается в Chrome 3+, Firefox 1+, Opera 10.5+ и IE9 Beta. Пример:

Свойство из CSS2 (выкинутое в версии 2.1, возвращенное в CSS3), которое добавляет тень к тексту; можно указывать направление, количество размытия и цвет тени. Поддерживается в Safari 1.1+, Chrome 2+, Firefox 3.1+ и Opera 9.5+. Пример:

Добавляет тень к элементу. Синтаксис тот же, что у свойства text-shadow. Поддерживается в Safari 3+, Chrome 3+, Firefox 3.5+, Opera 10.5+ и IE9 Beta. Пример:

CSS3 дает возможность поставить несколько фоновых изображений на один элемент (разделяя их запятыми) вместо всего лишь одной картинки согласно спецификации CSS2.1. Поддерживается в Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ и IE9 Beta. Пример:

Определяет непрозрачность элемента. Значение 1 соответствует полной непрозрачности; значение 0 соответствует полной прозрачности. Поддерживается в Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ и IE9 Beta. Пример:

Не свойство CSS, но, скорее, новая цветовая модель, введенная в CSS3, добавляющая возможность задавать уровень прозрачности элемента вместе с его цветом в формате RGB. Поддерживается в Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+ и IE9 Beta. Пример:

Я перечислил несколько свойств, которые будут часто применяться в этой книге, а как же остальные? Я решил не пытаться охватить все в одной книге, а рассказать лишь о том, что применимо прямо сейчас по причине надежной и устойчивой поддержки браузерами.

Есть и другие фрагменты спецификации CSS3, которые уже можно применять, и о которых можно написать отдельную книгу:

1. Медиазапросы (http://www.w3.org/TR/CSS3-mediaqueries/)

2. Многоколоночный текст (http://www.w3.org/TR/CSS3-multicol/)

3. Веб-шрифты (http://www.w3.org/TR/CSS3-webfonts/)

Ранее упоминалось, что спецификация CSS3 – это набор модулей, которые постепенно интегрируются производителями браузеров. Иногда интеграция включает в себя экспериментальную поддержку. Это означает, что пока спецификацию пишут, обсуждают и критикуют в W3C, изготовитель браузера может решить добавить поддержку для каких-то свойств, чтобы опробовать их на практике. В последнее время такая практика стала естественной частью процесса, и обратная связь, получаемая во время экспериментального использования, часто применяется, чтобы внести поправки в спецификацию.

С другой стороны, изготовитель браузера может захотеть ввести экспериментальное свойство, которое не входит ни в какой предложенный стандарт, но может получить такой статус когда-либо.

Для такой экспериментальной поддержки свойств CSS часто вводятся браузерные префиксы – например, так:

– webkit – border-radius

Отбитое дефисом ключевое слово, стоящее перед названием свойства, помечает его как незавершенное, относящееся исключительно к реализации в конкретном браузере и к интерпретации развивающейся спецификации. Если экспериментальное свойство войдет в законченный модуль CSS3, браузер должен поддерживать беспрефиксное название свойства.

У каждого изготовителя браузеров есть свой префикс, которым он в первую очередь помечает собственные экспериментальные свойства. Все остальные браузеры игнорируют правила, содержащие неизвестные им префиксы.

В табл. 1.03 перечислены самые широко используемые браузеры и связанные с ними префиксы. Мы будем использовать префиксы WebKit, Mozilla и Opera в части, касающейся CSS3 в примерах из следующих глав.

^{Таблица 1.03. Наиболее широко используемые браузеры и связанные с ними префиксы}

Вот как CSS работает на практике с браузерными префиксами. Возьмем свойство border-radius в качестве примера. Положим, мы хотим скруглить углы элемента с радиусом 10 пикселей; вот как это делается:

Используя браузерные префиксы, важно не забывать о порядке, в котором перечисляются свойства. Можно заметить, что в предыдущем примере сначала написаны префиксные свойства, за которыми следует беспрефиксное свойство.

Зачем ставить подлинное CSS3-свойство последним? Вероятно, в будущем ваши стилевые файлы будут работать в большем количестве браузеров, постепенно улучшая дизайн. Когда браузер, наконец, будет поддерживать то свойство, которое определено в спецификации, применяться будет подлинное свойство, а не экспериментальная версия, так как оно будет стоять последним в списке. Даже если реализация префиксной версии будет отличаться от настоящего свойства из спецификации, вы заботитесь о том, что окончательный стандарт остается первостепенным.

Первоначальная реакция читателя может быть примерно такой: «Ах, это запутанные и проприетарные штуки!» Но я уверяю вас, это не только шаг вперед, а еще и намного менее запутанное решение в сравнении с раздутыми кусками кода и отсутствием гибкости, которыми сопровождаются решения не на CSS3. Кроме того, это важная часть развития спецификации.

Используя эти свойства сейчас с помощью браузерных префиксов, мы можем прозондировать почву и даже дать ценные комментарии изготовителям браузеров, прежде чем спе-цификация завершена. Также стоит помнить, что префиксы, как правило, добавляются к предложенным стандартам

(а не к утвержденным). В этом заключается большое отличие от разнообразного хакерского CSS, который все мы иногда использовали, чтобы разрешить проблемы с кросс-браузерностью.

Кто-то может сравнить браузерные префиксы с эксплойтами синтаксиса, которые многим из нас приходилось использовать, чтобы дать команду конкретным версиям браузеров (например, синтаксис w\idth: 200px или _width: 200px, который позволяет обращаться к конкретной версии IE). Но, напротив, браузерные префиксы – это важная часть процесса стандартизации, позволяющая развивать свойство, внедряя его для практического применения.

Эрик Мейер, эксперт по CSS, объясняет разницу в статье «Префикс или постхак» на A List Apart (http://bkaprt.com/css3/2/)[3]:

Он продолжает, предполагая, что префиксы – это не только хорошая практика, но они также должны занимать более значимую роль в процессе стандартизации:

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

Можно думать, что довольно глупо повторять трижды или четырежды то, что выглядит как одно и то же свойство, и я могу согласиться.

Но реальность такова, что для решений, построенных на CSS3, скорее всего, потребуется писать негибкий и более сложный код, пусть, может быть, и неповторяющийся.

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

Прежде чем мы начнем делать привлекательные вещи, пользуясь несколькими применимыми свойствами CSS3 и соответствующими браузерными префиксами, давайте познакомимся с переходами в CSS. Понимание переходов и того, как они работают, поможет нам сочетать их с остальными свойствами и создавать замечательные взаимодействия.

Можно существенно упростить объявление перехода (в котором нет задержки), пользуясь свойством transition. Такой синтаксис будет использоваться во всех остальных примерах этой книги.

Если нужно добавить полусекундную задержку в краткую запись перехода, ее продолжительность ставится в конец правила:

В большинстве следующих примеров будет использован выдуманный сайт, который я сделал: шутливый знак уважения ко всем вещам, оставленным на Луне теми космонавтами, которым повезло, чтобы побывать там (рис. 3.01). За этим стоит история, которая напрямую связана с тематикой этой книги, – и я расскажу ее.

^{Рис. 3.01. Наш выдуманный пример: Вещи, которые мы оставили на Луне}

В 1969 году космонавты Нейл Армстронг и Базз Олдрин стали первыми людьми, ступившими на Луну. Я очень поверхностно интересовался путешествиями в космос и программой NASA (National Aeronautics and Space Administration, Национальное управление по воздухоплаванию и исследованию космического пространства. Прим. перев.), но то, что я услышал о миссии Apollo 11 во время ее 40-летнего юбилея, вдохновило меня на то, чтобы прочитать больше об истории и событиях, связанных с этой высадкой. В частности, я был поражен количеством вещей, которые были оставлены на Луне и остаются там по сей день.

Из всех предметов, находящихся там, есть один, который представляет исключительный интерес. Он являет собой прекрасный пример дизайна интерфейсов. Этот предмет – небольшой кремниевый диск размером с полудолларовую монету. На диске выгравированы доброжелательные послания от глав более семидесяти стран со всего мира. Чтобы прочитать послания, нужен микроскоп, но ограничения в отношении того, что космонавты могли взять с собой, определили дизайн памятного предмета, который можно было оставить на Луне для следующих поколений (рис. 3.02).

^{Рис. 3.02. Небольшой (размером с полудолларовую монету) кремниевый диск, оставленный на Луне космонавтами Apollo 11.}

В некотором смысле NASA создала предмет, пользуясь самой современной технологией из доступных в то время, предназначенный для неизвестной аудитории из некоторого обозримого будущего. Звучит знакомо?

Позже, в 1977 году, схожая проблема дизайна была решена для летательных аппаратов Voyager 1 и Voyager 2 с помощью золотой пластинки, содержащей звукозаписи, изображения и диаграммы, описывающие жизнь на планете Земля (рис. 3.03). В каком-то смысле эта пластинка – письмо в бутылке, адресованное цивилизациям, находящимся за пределами Солнечной системы. На алюминиевом футляре, в который упакована пластинка, даны пояснения: как правильно прослушать запись, из какой галактики прибыл этот предмет и др.

^{Рис. 3.03. Позолоченный футляр золотой граммофонной пластинки, находившейся на борту космических кораблей Voyager 1 и 2.}

Как и кремниевый диск, по-прежнему лежащий в лунной пыли, для изготовления золотой пластинки были применены самые передовые технологии, доступные в то время, для неизвестного контекста использования. Смогут ли инопланетяне, которые найдут пластинку, видеть, ощущать и слышать ее содержимое?

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

Будучи веб-дизайнерами, мы тоже шлем послания в бутылке, создавая сайты для веба. Мы можем делать допущения о том, кто будет читать их, что они способны понять и так далее, – но мы никогда не обладаем полной информацией. Это не должно мешать нам использовать самые лучшие технологии из доступных, чтобы донести мысль и связанное с ней взаимодействие, причем так, чтобы взаимодействие подобающим образом упрощалось для владельцев старых или маломощных устройств.

Наша работа – работа дизайнера – состоит не только в том, чтобы изготовить нарядную бутылку, которая будет красиво выглядеть, но, скорее, в том, чтобы найти способы обогатить содержимое и улучшить подачу. CSS3 уже помогает нам в этом.

Теперь вы знаете, почему наш пример отдает дань уважения тем посланиям, которые оставлены на Луне или летят через космос. Настало время поделить этот сайт на части, выделяя небольшие примеры, относящиеся непосредственно к CSS3. Я считаю разумным собрать в одном месте все приемы, которые мы будем обсуждать. Читатель сможет обращаться к этому шаблону и ко всем примерам когда угодно – все собрано в одной живой, дышащей веб-странице. Код этого примера можно скачать с http://CSS3exp.com/code.

Каждая из оставшихся глав затрагивает отдельный набор примеров, связанных с CSS3. Вместо того чтобы пытаться включить все и рассказать все, что можно знать про CSS3, в этой главе я поступлю наоборот: погружусь в очень конкретные примеры, показывая, как они работают в выдуманном контексте. Эти примеры будут небольшими – такими, которые можно немедленно применять и расширять после прочтения следующих страниц.

Применим подход добавления CSS3 к состоянию hover непосредственно в наш пример. Я подробно расскажу каждый шаг на пути создания меню в верхней части сайта (рис. 3.08), в котором сочетаются border-radius, text-shadow, RGBA и CSS-переходы, чтобы построить взаимодействие, которое будет удивлять и восхищать.

^{Рис. 3.08. Меню в нашем примере улучшено в состоянии hover за счет CSS3}

Так как мы приверженцы семантики, то разметка для меню будет состоять из обыкновенного списка.

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

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

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

^{Рис. 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;

-moz-transition:

color 0.3s ease-in-out,

background 0.3s ease-in-out;

-o-transition:

color 0.3s ease-in-out,

background 0.3s ease-in-out;

transition:

color.3s ease-in-out,

background.3s ease-in-out;

Легко заметить, что значение all более компактно и эффективно, когда нужно анимировать несколько изменений одного элемента.

Мы изучили довольно простой пример, добавляя различные свойства CSS3 к элементам нашей страницы, которые относятся исключительно к взаимодействию. Браузеры, поддерживающие эти свойства, будут показывать анимацию полупрозрачного фона со скругленными углами, на котором расположены затененные текстовые ссылки. Браузеры, не поддерживающие CSS3, не отразят улучшенное взаимодействие при наведении на ссылку, но это нормально. Они покажут семантически структурированный список ссылок – и это самое важное в этом примере.

Это маленькое упражнение также показывает, насколько эффективно достигать средствами CSS3 того, для чего раньше требовались Flash и/или JavaScript. Использованные CSS-правила просты, естественны и безвредны для тех браузеров, которые их пока что не поддерживают.

Мы также позаботились о том, что написанный CSS3-код выдержит проверку временем: свойство transition из спецификации включено в список правил последним. Копировать эти правила, помечая их соответствующими префиксами, – это необходимые действия, которые влекут за собой большой выигрыш: мы можем использовать CSS3 прямо сейчас, улучшая взаимодействие для многих пользователей.

Мы постоянно ищем решения, которые экономят время и содержат дополнительную гибкость. CSS3 изобилует такими решениями: эта технология дает возможность написать несколько строчек и получить то, на что раньше уходило больше времени и сил.

В нашем арсенале есть еще одно свойство для улучшения вида элементов в состоянии :hover: opacity. Как упоминалось в первой главе, opacity – это свойство CSS3, которым можно явно указать, насколько непрозрачным будет тот или иной элемент. В сочетании с вышеупомянутым RGBA opacity предлагает еще один способ добавить прозрачность в дизайны, которые мы создаем для веба.

Один из способов применять opacity, который нравится мне, – создавать простое и гибкое состояние: hover для графических ссылок, пользуясь изменением прозрачности для создания нескольких состояний из одного изображения. Прибавим к этому CSS-переход и получим прекрасное, яркое, легко поддерживаемое взаимодействие для графических ссылок на странице.

Посмотрим, как свойство opacity применяется в примере с Луной.

На рис. 3.16 показан футер сайта-примера, в котором – после некоторого юридического текста и шокирующего дисклеймера – расположились три логотипа, на них можно нажать.

^{Рис. 3.16. Футер сайта Вещи, оставленные на Луне}

Воспользуемся свойством opacity не только для того, чтобы определить состояния :hover и :focus, но и чтобы задать начальный уровень прозрачности. CSS-переход сгладит и анимирует это изменение, чтобы довершить эффект.

Как и в предыдущем примере с навигацией, разметка для логотипов в футере проста и семантична – ненумерованный список, состоящий из картинок-ссылок:

Я создал иконки полностью белыми PNG-изображениями, зная, что затем применю свойство opacity, чтобы отрегулировать прозрачность на уровне CSS. Такой подход изменил то, как я в некоторых ситуациях думаю о графических объектах в веб-проектах.

Вместо того чтобы сохранять полупрозрачные PNG, я сохраняю полностью непрозрачные версии (рис. 3.17), которые могу менять в браузере. Кроме того что такой подход экономит время, он также позволяет выставлять разные уровни прозрачности в состояниях :hover, :focus и :active, избавляя от необходимости создавать несколько наборов изображений.

^{Рис. 3.17. PNG-файлы с логотипами – полностью белые}

Первые фрагменты оформления отцентрируют картинки в футере и поместят их горизонтально (рис. 3.18):

^{Рис. 3.18. Белые PNG, отцентрированные в футере}

#footer-logos { 

text-align: center;

}

#footer-logos li {

display: inline;

}

Теперь выставим такие значения свойства opacity, которые затемнят иконки в их обычном состоянии и будут осветлять их в состояниях :hover и:focus.

#footer-logos a img {

opacity: 0.25;

}

#footer-logos a: hover img,

#footer-logos a: focus img {

opacity: 0.6;

}

Мы выставили картинкам непрозрачность в 25%; при наведении или получении фокуса непрозрачность поднимается до 60% (рис. 3.19). Крайне просто, не так ли? И для такого эффекта нужен лишь один набор картинок.

Заметим, что свойство opacity не требует браузерного префикса и работает в Safari, Chrome, Firefox и Opera. IE8 и ниже не поддерживает opacity, но существует хакерское решение для тех, кто не прочь окунуться в дебри проприетарности.

К счастью, opacity поддерживается в Internet Explorer 9 Beta, но мы также можем сымитировать тот же результат в ранних версиях IE, воспользовавшись проприетарным свойством filter от Microsoft.

Обычно я бы не стал предлагать использовать свойство filter, потому что (в отличие от свойств с браузерными префиксами) оно не входит ни в один предложенный стандарт. Также использование filter может повлечь за собой существенные проблемы производительности в зависимости от того, где и как часто оно используется. Это хак – но он решает проблему.

При условии, что вышесказанное понятно, и выделяя это свойство в отдельный стилевой файл или иначе аккуратно комментируя его, filter можно воспринимать как приемлемый метод.

Вот как он работает:

#footer-logos a img { 

border: none;

opacity: 0.25;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */

filter: alpha(opacity = 25); /* IE 5–7 hack */

}

#footer-logos a: hover img,

#footer-logos a: focus img {

opacity: 0.6;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */

filter: alpha(opacity = 60); /* IE 5–7 hack */

}

Синтаксис похож: значение opacity вставляется в альфа-фильтр IE. Обратите внимание: IE8 игнорирует свойство filter и требует префиксное свойство -ms-filter с некоторыми дополнительными некрасивыми значениями.

Воспользовавшись хаками, мы добились такого же результата в IE (рис. 3.20). Повторюсь – если решили использовать хаки, пользуйтесь ими с умом. Но реальность заключается в том, что, скорее всего, вам придется использовать хаки, если какой-либо ваш сайт показывает значительный трафик с IE (так обстоит ситуация с большинством сайтов).

^{Рис. 3.20. Футер в IE7 показывает псевдосвойство opacity с использованием хака filter}

Наконец, наложим переход на свойство opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.

Добавим знакомые строки transition, на этот раз объявляя переход исключительно для свойства opacity. Сделаем его быстрым (0,2 секунды) и выставим временную функцию ease-in-out.

Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (рис. 4.01). Сетка из изображений-ссылок – вполне обыкновенный дизайнерский прием.

^{Рис. 4.01. Сетка из трех фотографий-ссылок}

Для разметки мы вновь воспользуемся привычным ненумерованным списком:

<ul class="gallery">

<li><a href="#"><img src="photo-1.jpg" /></a></li>

<li><a href="#"><img src="photo-2.jpg" /></a></li>

<li><a href="#"><img src="photo-3.jpg" /></a></li>

</ul>

На рис. 4.02 видно, как выглядит список без применения стилей. Обратите внимание, что изображения существенно крупнее, чем нам нужно. Это сделано намеренно: мы воспользуемся CSS, чтобы уменьшить их.

^{Рис. 4.02. Список из крупных фотографий – до применения CSS}

Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый #eee).

Теперь – преобразования. Добавим преобразование scale, чтобы фотография увеличивалась, когда на нее наводят курсор. Помним о том, что исходные изображения больше, чем 200 пикселей в ширину, – значит, фотографии можно увеличивать без потери качества.

Масштабирование поддерживается в Safari, Chrome, Firefox и Opera; везде нужен браузерный префикс. Добавим свойства, которые работают в этих и всех будущих браузерах:

ul.gallery li a: hover img {

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

}

Когда ссылки переходят в состояние hover, мы говорим: «увеличь картинки в полтора раза относительно их изначального размера» (200px в ширину).

Команда scale(2) увеличит фотографию вдвое; scale(0.5) уменьшит ее вдвое.

Результат показан на рис. 4.03 (браузер – Safari). Заметим, что transform не влияет на остальные части документа и увеличивает фотографию относительно центра, не затрагивая расположения элементов вокруг нее.

^{Рис. 4.03. Фото в центре увеличено с помощью CSS-трансформации}

Также, если нужно, можно задать transform-origin, который объявит, относительно какой части картинки ее нужно масштабировать: верх, низ, центр или положение, обозначенное в процентах (см. http://bkaprt.com/css3/8/)[10].

Например, чтобы фотография увеличивалась относительно нижнего левого края, а не относительно центра, пишется такой код:

ul.gallery li a: hover img {

-webkit-transform-origin: bottom left;

-moz-transform-origin: bottom left;

-o-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

}

Можем пойти дальше и оттенять картинку, когда на нее наводят курсор. Это уместное использование CSS3-свойства box-shadow, так как мы заставляем увеличенную фотографию выглядеть так, как будто она приподнимается над страницей.

Заметим: падающая тень – это изысканный эффект, который часто используется сверх меры неразборчивыми дизайнерами. Очень легко увлечься и переусердствовать с получаемым эффектом. Но в этом случае мы пытаемся придать глубины увеличенной фотографии, так что должно получиться вполне хорошо.

Синтаксис box-shadow совпадает с синтаксисом свойства text-shadow, которое мы применяли в третьей главе. Однако в отличие от text-shadow, чтобы box-shadow заработал в Safari, Chrome и Firefox, ему требуются браузерные префиксы (Opera 10+ и IE9 Beta поддерживают беспрефиксное свойство box-shadow). Запишем эти правила.

ul.gallery li a: hover img {

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

Мы добавили свойство box-shadow для браузеров WebKit и Mozilla, дополнив объявление беспрефиксной версией, как и в остальных примерах.

В терминах синтаксиса мы добавляем тень к картинке в состоянии hover. Параметры тени: 4px сверху, 4px слева, размытие радиусом 10px, полупрозрачный черный цвет (чтобы тень смешивалась с любым фоном или элементом, который находится позади нее).

Рис. 4.04 показывает тень в сочетании с масштабированием – эффекты, которые применяются, когда фотография переходит в состояние hover. Получается так, словно увеличенная фотография выскальзывает из страницы.

^{Рис. 4.04. Увеличенная фотография в состоянии hover, под действием box-shadow}

Напоследок, добавив переход на фотографию, мы сгладим масштабирование, навесив на состояние :hover анимированное увеличение и уменьшение фотографии. Такой эффект раньше можно было воспроизвести только на основе Flash или JavaScript; теперь он достигается несколькими строчками кода на CSS3.

Вот код, задающий переход; он добавлен к полному CSS-коду этой небольшой фотогалереи:

Кроме масштабирования, есть еще три преобразования, которыми можно поворачивать, крутить и сдвигать элементы (сдвиг производится по координатам x, y). Добавим каждое преобразование в получившуюся фотогалерею, чтобы быстро разобраться, как они работают.

Допустим, нам нужно поворачивать фотографию, когда на нее наводят курсор, одновременно с этим масштабируя ее, как и ранее. Мы можем добавить преобразование rotate к правилу :hover:

ul.gallery li a: hover img { 

-webkit-transform: scale(1.5) rotate(-10deg);

-moz-transform: scale(1.5) rotate(-10deg);

-o-transform: scale(1.5) rotate(-10deg);

transform: scale(1.5) rotate(-10deg);

-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

Мы по-прежнему увеличиваем фотографию в состоянии hover, но также поворачиваем ее на 10 градусов влево преобразованием rotate (рис. 4.05). Оно работает в Safari, Chrome, Firefox и Opera. Отрицательные значения от –1deg до –360deg поворачивают элемент против часовой стрелки; положительные значения от 1deg до 360deg – по часовой стрелке.

^{Рис. 4.05. Фото в состоянии hover, увеличенное и повернутое влево при помощи преобразования rotate}

Кроме того, можно было бы поворачивать фотографии по-разному (задавая каждой фотографии свой угол поворота), чтобы каждая выглядела так, будто бы ее не глядя кинули на стол. Затем ее точно так же можно поворачивать и масштабировать в состоянии :hover (рис. 4.06).

^{Рис. 4.06. С помощью rotate можно представить фотографии разбросанными по странице.}

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

Например, если браузер не поддерживает преобразование rotate и фотографии выглядят ровными, в этом нет беды. Сайт по-прежнему будет выглядеть работающим.

Хороший пример использования rotate в основном дизайне странице можно найти в блоге компании Panic Software (http://www.panic.com/blog), где применяются крайне малозаметные CSS3-повороты, которые поворачивают записи налево, как будто это листы бумаги, оставленные на столе (рис. 4.07). Такой эффект – не критически важная часть дизайна, и без поворота этот сайт также выглядит прекрасно (рис. 4.08).

^{Рис. 4.07. В дизайне блога Panic Software используются небольшие CSS3– повороты, чтобы добавить реалистичности}

^{Рис. 4.08. Без поворота блог по-прежнему выглядит замечательно}

Другой хороший пример подходящего использования CSS-преобразований – сайт Outside (http://outsideapp.com), прекрасного приложения о погоде для iPhone (рис. 4.09).

^{Рис. 4.09. Outside, приложение для iPhone, использует rotate, чтобы вращать Солнце}

В самом верху страницы показывается изображение Солнца (рис. 4.10), которое вращается на 360° с помощью преобразования rotate. (В этом случае JavaScript используется для анимации поворота в браузерах, работающих на отличном от WebKit движке, но в шестой главе мы поговорим об анимациях, построенных на чистом CSS.) Это изящное улучшение дизайна просто и уместно, так как оно имитирует ту же анимацию Солнца, которая появляется в самом приложении на iPhone. Солнце не вращается в браузерах, которые не поддерживают CSS-преобразования, и это нормально. Ничто не выглядит неработающим в неанимированной версии сайта.

Преобразования в сочетании с переходами в CSS могут помочь поддержать общее сообщение, которое несет дизайн, создаваемый для веба, и это прекрасный инструмент для нас, веб-дизайнеров.

^{Рис. 4.10. Графика на сайте приложения Outside оживает с помощью позиционирования и вращения на CSS}

Преобразование skew берет координаты x, y и прокручивает элемент. Например, если мы хотим применить кручение в нашей фотогалерее, пишется следующий CSS-код. Параметры кручения: –5 градусов по координате x, 30 градусов по координате y (рис. 4.11):

^{Рис. 4.11. Преобразование skew деформирует фотографию}

ul.gallery li a: hover img { 

-webkit-transform: scale(1.5) skew(-5deg, 30deg);

-moz-transform: scale(1.5) skew(-5deg, 30deg);

-o-transform: scale(1.5) skew(-5deg, 30deg);

transform: scale(1.5) skew(-5deg, 30deg);

}

Как и rotate, преобразование skew принимает положительные и отрицательные значения углов. Также можно использовать одно значение и для x, и для y (рис. 4.12):

^{Рис. 4.12. Закручивание фотографии на 30 градусов по обеим осям, x и y}

ul.gallery li a: hover img { 

-webkit-transform: scale(1.5) skew(30deg);

-moz-transform: scale(1.5) skew(30deg);

-o-transform: scale(1.5) skew(30deg);

transform: scale(1.5) skew(30deg);

}

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

Например, skew может использоваться на текстовых блоках, чтобы создавать трехмерные визуализации на основе семантической разметки и CSS3 (рис. 4.13 и 4.14).

^{Рис. 4.13. Демо Пола Хэйза использует skew и переходы для создания трехмерных кубов из простых кусков гипертекста (http://www.paulrhayes.com/experiments/cube/multiCubes.html)}

^{Рис. 4.14. The Web Trend Map использует skew, чтобы разместить аватары на изометрической сетке, таким образом создавая уникальные визуализации данных на основе плоских элементов (http://www.webtrendmap.com/)}

Наконец, преобразование translate позволяет сдвигать элемент относительно его обычного положения на экране, используя координаты x, y.

Например, если в состоянии hover хочется сдвинуть изображение с его начального положения, можно применить преобразование translate. Применив переход, такое движение можно плавно анимировать.

Представленный ниже код сдвинет изображение на 20px вправо и на 40px вниз относительно изначального положения (рис. 4.15):

^{Рис. 4.15. Использование преобразования translate для сдвига изображения в состоянии: hover}

ul.gallery li a: hover img {

-webkit-transform: scale(1.5) translate(20px, 40px);

-moz-transform: scale(1.5) translate(20px, 40px);

-o-transform: scale(1.5) translate(20px, 40px);

transform: scale(1.5) translate(20px, 40px);

}

Если нужно сдвинуть изображение влево и/или вверх, используются отрицательные значения: например, translate (–20px, –40px).

Как и вышеупомянутые преобразования, translate не затрагивает остальные элементы в документе и сдвигает указанный элемент именно туда, куда нужно. Это означает, что не нужно думать о полях, отступах, абсолютном позиционировании и об использовании свойства clear для плавающих элементов. Достаточно дать translate нужные координаты, и элемент встанет на указанное место.

Вернемся к сайту-примеру с Луной, где я использовал различные преобразования и переходы, чтобы оживить взаимодействие с фотогалереей (рис. 4.16).

^{Рис. 4.16. Фотогалерея на сайте Things We Left on the Moon}

Когда наводишь на любую оставленную на Луне вещь, изображение реагирует особенным образом, в зависимости от того, что это за предмет: пончик, газонокосилка, кошка и т. д.

Добавлять подходящие преобразования и переходы на каждый элемент не только приятно и легко, но также никак не влияет на браузеры, которые не поддерживают CSS3-механизмы, благодаря которым такое взаимодействие возможно.

Пройдемся по всем элементам и посмотрим, как scale, rotate, позиционирование и opacity сочетаются с переходами, создавая полноценное взаимодействие.

Если подумать о каждом предмете и в особенности о его значении, можно применить преобразование и/или переход, который поможет раскрыть смысл этого предмета.

Как большой пончик или откидное кресло будут реагировать на взаимодействие? Мы можем выбрать и применить подходящие CSS3-приемы, чтобы улучшить дизайн (рис. 4.17).

^{Рис. 4.17. Предметы, которые будем преобразовывать}

Семантика разметки этой искусственной карусели странных вещей очень проста: обычный упорядоченный список, составленный из картинок-ссылок, с поясняющим заголовком под каждой картинкой.

Теперь добавим основной CSS для каждого элемента списка, содержащего изображения. Следующие стили сдвигают элементы, чтобы они расположились горизонтально, задают относительное позиционирование контекста, в котором мы затем расположим изображения при помощи абсолютного позиционирования, и, наконец, добавляют фоновой рамке полупрозрачные скругленные углы.

ol#things li { 

position: relative;

float: left;

margin: 0 15px 0 0;

padding: 10px;

background: #444; /* backup for non-RGBA */

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

list-style: none;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

}

Зададим фоновое изображение Луны, которая будет отображаться позади каждого предмета, и укажем ширину и высоту каждой ссылки (рис. 4.18):

^{Рис. 4.18. Элементы списка, теперь с изображением Луны на фоне}

ol#things li a {

float: left;

width: 137px;

height: 91px;

background: url(../img/moon-137.jpg)

no-repeat top left;

}

Следующий шаг – написать общее правило, которое абсолютно спозиционирует каждое изображение внутри элемента списка и, соответственно, поверх изображения Луны.

Каждый элемент будет спозиционирован по-своему в зависимости от объекта; также будут использоваться различные преобразования. Но мы можем объявить position: absolute; для всех изображений, так что не придется дублировать это правило для каждого элемента. Мы также добавим переход, пользуясь значением all. Таким образом каждое преобразование или изменение, которое мы хотим применить на каждый предмет, будет сглажено с помощью перехода – вне зависимости от того, какие CSS-свойства мы решим менять.

Большой пончик становится больше при наведении, так что воспользуемся преобразованием scale, чтобы увеличить изображение. Помните, что исходное изображение, заданное в разметке, значительно больше, чем те размеры, которые мы объявили в стилевом файле. Это было сделано намеренно, чтобы изображение можно было увеличить:

ol#things li#things-1 a: hover img {

-webkit-transform: scale(1.25);

-moz-transform: scale(1.25);

-o-transform: scale(1.25);

transform: scale(1.25);

}

Эти правила увеличат пончик на 25% при наведении курсора. На рис. 4.19 показаны оба состояния – обычное и: hover; видно, что пончик становится больше.

^{Рис. 4.19. Большой пончик увеличивается в состоянии: hover с помощью свойства scale}

С газонокосилкой мы сделаем две вещи:

1) увеличим ее с помощью преобразования;

2) сдвинем ее вниз и вправо.

Эти два изменения в сочетании с переходом создадут эффект приближения газонокосилки в сторону зрителя (осторожно!). Он совсем незначительный, но простой и эффективный.

Мы будем сдвигаться на 5 пикселей вниз и на 10 пикселей вправо. Также мы добавим преобразование, чтобы увеличить газонокосилку на 20%.

ol#things li#things-2 a: hover img { 

top: 25px;

left: 60px;

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

transform: scale(1.2);

}

На рис. 4.20 показаны обычное и активное состояния картинки. Иллюзия приближающейся газонокосилки закончена.

^{Рис. 4.20. Позиционирование и масштабирование в сочетании дают псевдотрехмерный эффект}

Мы можем добавить CSS-переход на весь набор свойств (не только CSS3). Достаточно сгладить изменение положения, чтобы космическая кошка выглядела так, будто бы она ускользает от мыши.

Когда свойство left у изображения в состоянии hover изменяется, общий переход будет сглаживать это изменение и кошка будет выглядеть так, будто бы она скользит из стороны в сторону.

Сдвинем ее на 15px вправо, повышая значение left с 30px до 45px (рис. 4.21):

^{Рис. 4.21. Кошка скользит туда и обратно, как она часто делает}

ol#things li#things-3 a: hover img {

left: 45px;

}

Довольно просто. Вся магия здесь осуществляется CSS-переходом (ее сложно изобразить на листе бумаги).

Хорошее кресло откидывается назад. Мы можем имитировать это поведение посредством ранее упомянутого преобразования rotate.

Добавим преобразование, которое будет слегка поворачивать кресло влево. Мы будем использовать браузерные префиксы для WebKit, Mozilla и Opera и завершим объявление свойством transform – для будущих браузеров.

ol#things li#things-4 a: hover img {

-webkit-transform: rotate(-15deg);

-moz-transform: rotate(-15deg);

-o-transform: rotate(-15deg);

transform: rotate(-15deg);

}

Мы использовали отрицательное значение, чтобы сдвинуть изображение влево (против часовой стрелки), и, как прежде, переход сгладит этот небольшой поворот, завершая иллюзию комфортного бархатного кресла на Луне (рис. 4.22).

^{Рис. 4.22. Кресло откидывается влево с помощью отрицательного параметра у преобразования rotate}

Для последнего элемента списка мы возьмем гнома и сделаем так, чтобы он частично исчезал. Почему-то кажется, что для гнома это чрезвычайно естественный поступок.

Будем использовать свойство opacity, чтобы просто и быстро составить стиль для состояния hover этого изображения, делая его существенно более тусклым. Поскольку переход уже определен для изменения всех свойств изображения, изменение значения opacity будет анимироваться в браузерах, которые поддерживают переходы, и будет выглядеть как плавное исчезновение нашего маленького друга.

Объявление просто:

ol#things li#things-5 a: hover img {

opacity: 0.4;

}

На рис. 4.23 показано, как в состоянии :hover гном растворяется в 40% непрозрачности.

Помните: если нужно, чтобы этот эффект точно так же работал в Internet Explorer, можно использовать хак с проприетарным свойством filter, описанный в третьей главе.

^{Рис. 4.23. Гном почти исчезает за счет уменьшения opacity в состоянии: hover}

Как и в примере с фотогалереей, который обсуждался ранее в этой главе, брызги CSS3, которые мы добавляем в этом примере, никак не затрагивают браузеры, которые пока что не поддерживают эти свойства.

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

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

Такие улучшения взаимодействия могут быть знаком по-настоящему искусного веб-мастера: внимание к деталям, которые не все заметят, забота о некритических визуальных событиях и поднятие сообщения на шаг выше привычного уровня. Для браузеров, которые поддерживают эти штуки сейчас, и тех, которые будут поддерживать их в будущем, небольшое количество кода и размышлений вполне стоит того.

Постарайтесь и будьте аккуратны, работая с CSS-преобразованиями. Очень легко увлечься ими, но когда используешь их с умом, они будут играть решающую роль в том, как читатель воспринимает мысль, которую передает сайт.

Говоря о том, что можно увлечься: в следующий раз, когда ваш клиент или босс скажет «Этому дизайну нужно больше “вау”», просто добавьте следующие строки в стилевой файл (и убедитесь, что человек будет просматривать сайт в Safari, Chrome, Firefox или Opera):

*:hover { 

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

Этот маленький кусок CSS3-кода говорит: «Когда наводишь на любой элемент на странице, он развернется на 180 градусов». Попробуйте. Это гарантированный способ произвести сильное впечатление (рис. 4.24).

Грустная часть заключается в том, что некоторым клиентам и начальникам это может понравиться.

– Это превосходно! Выкладывайте это!

Эх.

^{Рис. 4.24. Попытка передать на бумаге тот хаос, который порождается приемом «переворачивать все элементы, которые попадают в состояние hover»}

Я использую четыре полупрозрачных PNG-изображения, чтобы создать космический фон, используемый на сайте с Луной. Все они накладываются на элемент body, одно поверх другого, чтобы создавать ощущение пространства, когда пользователь меняет размеры окна браузера.

На рис. 5.03 показаны все используемые изображения:

1) облака пыли (clouds.png);

2) сине-розовый градиент (space-bg.png);

3) звездный слой (stars-1.png);

4) еще один слой случайно разбросанных звезд (stars-2.png).

^{Рис. 5.03. Четыре полупрозрачных фоновых PNG-изображения, которые расположены на фоне сайта с Луной}

Поставить эти четыре изображения в качестве фона элемента body очень просто с использованием нового синтаксиса CSS3:

body {

background:

url(../img/stars-1.png) repeat-x fixed -130% 0,

url(../img/stars-2.png) repeat-x fixed 40% 0,

url(../img/space-bg.png) repeat-x fixed -80% 0,

url(../img/clouds.png) repeat-x fixed 100% 0;

background-color: #1a1a1a;

}

Четыре изображения наслаиваются – облака в самый низ, звезды на самый верх – в виде списка, разделенного запятыми (обратите внимание, что перечисление начинается с того изображения, которое «ближе» к пользователю). Каждое изображение дублируется по горизонтали, и им выставлены различные положения по горизонтали (используя положительные и отрицательные значения), чтобы каждый слой двигался со своей скоростью, когда меняется размер окна браузера. Наконец, их положение на странице зафиксировано с помощью значения fixed.

Почти черный цвет #1a1a1a добавлен отдельным правилом background-color в самом конце.

Это все (рис. 5.04). Замечательно, что удалось обойтись без лишней разметки. Все эти изображения выставляются на элемент body, так что они будут находиться позади содержимого страницы, но нам не потребовалось обертывать их в лишние вспомогательные слои.

^{Рис. 5.04. Четыре PNG-изображения наслоены одно поверх другого, равно как и темно– серый цвет фона}

Как упоминалось в первой главе, множественные фоны поддерживаются в Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ и IE9 Beta. Так что они находятся наравне с многими другими CSS-свойствами, которыми мы пользовались в этой книге.

Мы выбрали использовать эту замечательную возможность CSS3 в некритичной части дизайна из-за несовершенной поддержки: чтобы улучшить фон страницы, чтобы создать новое взаимодействие при изменении размеров окна – эффект параллакса для тех, кто может испытать его.

Браузеры, которые пока что не поддерживают множественные фоны, проигнорируют свойство background целиком. Вот почему мы определили свойство background-color отдельно.

На рис. 5.05 показано, как сайт выглядит в IE7: множественные фоны игнорируются, и отображается только темно-серый фон, заданный свойством background-color.

^{Рис. 5.05. IE7 игнорирует свойство, в котором определены множественные фоны, и показывает только темно-серый фон, заданный свойством background-color}

Конечно, все работает должным образом, но то, что объемный фон потерялся, нехорошо. Решение заключается в том, чтобы сначала задать единый запасной фон – для браузеров (таких, как IE7 и 8), которые не поддерживают множественные фоны. Затем можно снова объявить это свойство – на этот раз с множественными фонами (IE проигнорирует его).

body {

background: url(../img/space-bg.png) repeat-x fixed -80% 0;

background:

url(../img/stars-1.png) repeat-x fixed -130% 0,

url(../img/stars-2.png) repeat-x fixed 40% 0,

url(../img/space-bg.png) repeat-x fixed -80% 0,

url(../img/clouds.png) repeat-x fixed 100% 0;

background-color: #1a1a1a;

}

Для запасного варианта с одной картинкой можно выбрать одно из изображений, которые используются во множественном объявлении, а можно пойти дальше и создать одну картинку, в которой объединялись бы все четыре изображения.

Для сайта с Луной я решил использовать space-bg.png – цветной градиент (рис. 5.06), таким образом показывая вариант фона без звезд и облаков в тех браузерах, которые пока что не поддерживают множественные фоны. Очень уместно.

^{Рис. 5.06. Благодаря запасному варианту картинки на фоне в IE7 частично восстановлено ощущение пространства}

Первые фрагменты CSS, которые мы добавим, чтобы начать построение этой формы, будут обрабатывать элементы fieldset и label – лишь немного пространства между строками.

#thing-alerts fieldset {

margin: 0 0 10px 0;

}

#thing-alerts label { 

display: block;

font-weight: bold;

line-height: 1.4;

color: #666;

color: rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px #fff;

}

Глядя на рис. 6.03, можно увидеть, что мы добавили отступ в 10px под каждой строкой fieldset и задали подписям свойство display: block, чтобы они отображались на отдельной строке. Мы также выставили черному тексту непрозрачность в 60% и указали запасной серый цвет для тех браузеров, которые пока не поддерживают RGBA. Мы также добавили небольшую белую подсветку свойством text-shadow, чтобы текст выглядел так, будто бы он вставлен на фон.

^{Рис. 6.03. К элементам fieldset и label применены стили}

Теперь у нас есть хороший интервал в 10px между элементами fieldset, но из-за поля внутри серого блока нам не нужен отступ в 10px под последней строкой (содержащей кнопку «подписаться»).

Это часто встречающаяся ситуация: есть список элементов, к каждому из которых применяется один и тот же стиль, но нужно применить другой стиль к последнему элементу списка.

Вместо добавления class="last" к последнему элементу почему бы не воспользоваться CSS3-псевдоклассом: last-child, чтобы убрать отступ снизу, не трогая разметку:

#thing-alerts fieldset { 

margin: 0 0 10px 0;

}

#thing-alerts fieldset label {

display: block;

font-weight: bold;

line-height: 1.4;

color: #666;

color: rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px #fff;

}

#thing-alerts fieldset: last-child {

margin: 0;

}

Помните, что :last-child не поддерживается в IE8 и ниже, но для небольших визуальных изменений, подобных этому, такое решение намного лучше, чем дополнительный класс в разметке.

На рис. 6.04 показано, что мы успели сделать: теперь нижний отступ на последнем элементе fieldset убран с помощью псевдокласса :last-child.

^{Рис. 6.04. Форма выглядит лучше, когда у последнего элемента fieldset нет отступа снизу}

Теперь, когда мы успешно воспользовались :last-child, пора отметить, что в CSS3 есть много других чрезвычайно удобных селекторов.

Я очень рекомендую прочитать статью Роджера Йоханссона на эту тему – CSS selectors explained (http://bkaprt.com/css3/11/)[14], – в которой он показывает, что они представляют собой и как работают. Поддержка этих селекторов различается между браузерами, так что обязательно сверьтесь с доскональными таблицами CSS contents and browser compatibility Питера-Пола Коха (http://bkaprt.com/css3/12/)[15] и CSS Compatibility and Internet Explorer от Microsoft (http:// bkaprt.com/css3/13/)[16], чтобы узнать, что где поддерживается.

На примере кнопки очень легко показать, как сильно можно преображать вид элементов с помощью CSS3. Сочетая различные приемы, которые мы обсуждали на протяжении этой книги, превратим обычную кнопку в что-то намного более интересное – используя исключительно CSS (рис. 6.09).

Вся прелесть применения CSS3 для оформления кнопки заключается в том, что без использования изображений получается куда более гибкое решение. Если браузер не поддерживает те свойства, которыми мы воспользуемся для оформления кнопки, это нормально. Кнопка будет выглядеть так, как она выглядит по умолчанию в том браузере, который использует посетитель сайта.

Давайте пройдем через все шаги, которые нужно проделать, чтобы обычная кнопка превратилась в прекрасную сияющую кнопку, которая показана справа на рис. 6.09.

^{Рис. 6.09. Слева – вид кнопки по умолчанию (в Safari); справа – кнопка, оформленная средствами CSS3. Никаких изображений!}

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

#thing-alerts input[type="submit"] {

padding: 8px 15px;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

line-height: 1;

color: #444;

border: none;

background-color: #fff;

}

То, что получилось после применения этих простых стилей, показано на рис. 6.10. Уже есть что-то сильно отличающееся от кнопки по умолчанию.

^{Рис. 6.10. Кнопка, с которой убраны обводка и фон по умолчанию}

Теперь добавим свойство border-radius, чтобы скруглить углы кнопки (рис. 6.11).

#thing-alerts fieldset input[type="submit"] {

padding: 8px 15px;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

line-height: 1;

color: #444;

border: none;

background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

border-radius: 23px;

}

^{Рис. 6.11. Скругление углов кнопки свойством border-radius}

Поэкспериментировав с разными значениями, мы остановились на радиусе в 23px.

Теперь применим линейный градиент с переходом цвета от светло-серого (#bbb) к белому (#fff), снизу вверх. Мы вновь воспользуемся инструментом Оллсоппа, чтобы получить верный код для Safari, Chrome и Firefox.

#thing-alerts input[type="submit"] {

padding: 8px 15px;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

line-height: 1;

color: #444;

border: none;

background-image: – webkit-gradient(linear,0% 0%, 0% 100%, from(#fff), to(#bbb));

background-image: – moz-linear-gradient(0 100% 90deg, #bbb, #fff);

background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

border-radius: 23px;

}

На рис. 6.12 показан полученный результат – так, как его отображает Safari. Теперь у нас есть кнопка со скругленными углами и градиентом. До сих пор не было использовано ни одного изображения и мы добавили лишь несколько строк кода в стилевой файл.

^{Рис. 6.12. К кнопке применен CSS-градиент}

Теперь добавим почти белую тень под текстом, которая создаст эффект того, что текст вдавлен в кнопку.

#thing-alerts input[type="submit"] { 

padding: 8px 15px;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

line-height: 1;

color: #444;

border: none;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);

background-image: – webkit-gradient(linear,0% 0%, 0% 100%, from(#fff), to(#bbb));

background-image: – moz-linear-gradient(0 100%90deg, #fff, #bbb);

background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

border-radius: 23px;

}

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

На рис. 6.13 крупным планом показана тень и то, как кнопка выглядит сейчас.

^{Рис. 6.13. Увеличенное изображение небольшой text-shadow, добавленной, чтобы создать эффект тиснения}

Последний фрагмент CSS3, который мы добавим к этой прекрасной кнопке, – небольшая тень (box-shadow), которая даст еще немного объема. С такой тенью кнопка будет выглядеть лучше на сером фоне.

Вот код, который добавляет свойство box-shadow, работающее в браузерах, в которых оно сейчас поддерживается, как и в будущих браузерах:

#thing-alerts input[type="submit"] {

padding: 8px 15px;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

line-height: 1;

color: #444;

border: none;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);

background-image: – webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));

background-image: – moz-linear-gradient(0% 100% 90deg, #bbb, #fff);

background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

border-radius: 23px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}

На рис. 6.14 показан результат, отображаемый в Safari, после добавления кнопке box-shadow, которая расположена на 1px относительно верха, и с размытием в 2px. Мы используем полупрозрачный черный цвет с помощью RGBA, так что фон просвечивает сквозь полупрозрачную тень.

^{Рис. 6.14. Увеличенное изображение небольшой тени, добавленной к кнопке: благодаря ей кнопка чуть-чуть приподнимается над фоном}

На этом мы заканчиваем работу не только с нашей кнопкой, но и со всей формой целиком. Некоторым количеством кода на CSS3 мы преобразили кнопку в том виде, в котором она отображается по умолчанию, в хорошо оформленный элемент, который должным образом сочетается с дизайном всей страницы. Мы предпочли использовать CSS3 вместо изображений, что нормально и безвредно для тех браузеров, которые не поддерживают эти новые свойства. Давайте убедимся в этом самостоятельно.

Можно пойти еще дальше со свойством box-shadow: что если тень также будет анимированной – например, пульсирующей, показывая, что ожидается ввод. Давайте кратко погрузимся в мир CSS-анимаций, чтобы создать такой эффект в браузерах, основанных на движке WebKit.

Я говорю о браузерах на WebKit в этом случае, потому что CSS-анимации (равно как и CSS-преобразования и переходы) были изначально разработаны командой WebKit и затем включены в предложенный стандарт W3C (http://bkaprt.com/css3/16/)[19]. Однако в отличие от преобразований и переходов анимации пока что не поддерживаются никакими другими браузерами. Сейчас они работают в Safari и Chrome, но не в Firefox или Opera; поддержка в IE9 также не планируется. По этой причине я не уделяю слишком много внимания анимациям (по крайней мере сейчас). Хоть они действительно мощные и захватывающие, еще предстоит увидеть, окажется ли их внедрение таким же исчерпывающим и быстрым, как это произошло с преобразованиями и переходами, у которых уже есть достойная (и растущая) поддержка.

Тем не менее концепция и синтаксис CSS-анимаций – довольно понятные и для некритических улучшений, которые будут видны только в браузерах на WebKit, прекрасно вставлять их в подходящие места. Добавим простую анимацию для состояния: focus полей ввода, чтобы узнать, как все это работает.

Первая часть построения CSS-анимации заключается

в объявлении ключевых кадров. Читатель, знакомый

с программированием, может воспринимать это как создание функции, к которой затем можно обращаться из любого места стилевого файла.

keyframe – особенное @-правило CSS. Оно похоже на обычное CSS-объявление, но позволяет назначить ему собственный идентификатор и задать CSS-свойства и изменения их значений вместе со списком значений в процентах (или же использовать ключевые слова «to» и «from»).

Будет разумнее увидеть анимации в действии, так что давайте создадим простую анимацию, которая будет плавно показывать и убирать тень, которую мы раньше создали для полей ввода в состоянии: focus.

Мы назовем его «pulse» и зададим три немного различающихся правила: вначале (0%), посередине (50%) и в конце (100%). Каждое правило задает уровень прозрачности синей тени (box-shadow), от 20 до 90% и обратно на 20%. Это изменение, распределенное по времени и зацикленное, создаст эффект того, что поле ввода пульсирует, когда фокус находится на нем (только в браузерах, работающих на движке WebKit).

Вторая часть CSS-анимации заключается в том, чтобы сослаться на keyframe по его имени, пользуясь свойством animation.

В этом случае мы хотим, чтобы пульсация box-shadow начиналась тогда, когда пользователь переводит фокус на текстовое поле в форме. В этот момент мы можем обратиться к keyframe по его имени, задать длительность анимации, зациклить ее и определить временные функции перехода. Можно видеть, что синтаксис анимаций похож на синтаксис переходов.

#thing-alerts input[type=»text»]: focus {

-webkit-animation: pulse 1.5s infinite ease-in-out;

}

Таким образом мы обеспечиваем, чтобы анимация пульсирования запускалась только тогда, когда пользователь наводит фокус на текстовое поле формы.

Результат довольно впечатляющий. Если бы технология позволяла мне показать его на листе бумаги, я бы сделал это. Вместо этого рис. 6.17 должен передать ощущение того, что происходит: медленное анимированное затухание и появление box-shadow, как будто бы поле ввода ждет, когда с ним начнут взаимодействовать.

^{Рис. 6.17. Если быстро перемещать глаза вверх и вниз по этой картинке, можно получить ощущение той анимации, которую мы добавили к полям ввода в состоянии: focus}

Использовалось краткое свойство animation, чтобы задать значения для обращения к анимации в одном месте. Вместо этого можно задавать каждое значение в отдельном свойстве:

#thing-alerts input[type="text"]: focus {

-webkit-animation-name: pulse;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

}

Одна из приятных особенностей ключевых кадров состоит в том, что их можно повторно использовать внутри нескольких блоков кода в стилевом листе. Например, применить ту же анимацию «pulse» к кнопке в состояниях hover и focus, добавляя Wii-подобное пульсирующее синее свечение.

Это очень просто: к кнопке в состояниях hover и focus добавляется то же самое свойство animation – точно так же, как мы проделали с текстовыми полями:

#thing-alerts input[type="submit"]: hover,

#thing-alerts input[type="submit"]: focus {

-webkit-animation: pulse 1.5s infinite ease-in-out;

}

Благодаря анимации pulse, которую мы ранее создали для текстовых полей, синяя тень (box-shadow) появляется и затухает. Мы можем заново использовать эту анимацию для кнопки, на которой этот эффект также работает хорошо (рис. 6.18), мягко мерцая, когда на нее наводят курсор или переводят фокус, – будто бы ожидая, пока пользователь нажмет на нее.

^{Рис. 6.18. Попытка проиллюстрировать пульсацию тени вокруг кнопки, когда на нее наведен курсор}

Добавление CSS-анимации – это первый раз в этой книге – когда мы улучшали пользовательский опыт только для одного производителя браузеров: WebKit. Одна из основных причин, по которой CSS3 используется все больше и больше, – новые свойства принимаются браузерами Firefox, Opera и IE9. Вы можете задаваться вопросом, стоит ли добавлять CSS-анимации на сегодняшний день. Это определенно то, что стоит рассматривать.

CSS-анимации либо останутся технологией исключительно для браузеров на движке WebKit, либо пойдут по стопам переходов и преобразований и будут приняты всеми остальными. В любом случае CSS-анимации – простые, не требуют большого труда и спокойно игнорируются браузерами, которые их не понимают. То, что я показал в этом примере, довольно примитивный способ использования анимаций, призванный проиллюстрировать, что возможно создать, пользуясь исключительно разметкой и стилевыми таблицами. Это замечательно, и по этой причине с анимациями стоит экспериментировать.