CSS3 для веб-дизайнеров

Сидерхолм Дэн

_{Использование box-shadow для создания состояния focus}

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

box-shadow

на тех элементах, которые находятся в состоянии

:focus.

Это быстро, легко

и, как и прежний CSS3-код, не затрагивает старые браузеры.

Требуется лишь создать новое объявление псевдокласса

:focus

относительно селектора по параметру для текстовых полей ввода.

(Кстати, предыдущий абзац – беспроигрышная фраза для знакомств, если она вам вдруг нужна. Благодарности – позже.)

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

– webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);

– moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);

box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);

}

Эти

строки добавляют свойство

box-shadow

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

Что насчет браузеров, которые не поддерживают

box-shadow

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

^{Рис. 6.16. Свойство box-shadow применяется к состоянию: focus текстовых полей}

Добавление CSS-анимаций для улучшения взаимодействия с формой

Можно пойти еще дальше со свойством

box-shadow

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

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

19

http://www.w3.org/tR/Css3-animations/

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

Ключевые кадры

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

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

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

keyframe

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

использовать ключевые слова «to» и «from»).

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

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

box-shadow

), от 20 до 90% и обратно на 20%. Это изменение, распределенное по времени и зацикленное, создаст эффект того, что поле ввода пульсирует, когда фокус находится на нем (только в браузерах, работающих на движке WebKit).

@-webkit-keyframes pulse {

0% {

– webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);

}

50% {

– webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);

}

100% {

– webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);

}

}

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

– webkit-

.

Ссылки на keyframe

Вторая часть 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 {