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

>Использование 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 (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).

@-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;
 }

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