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

Открывая форму в Internet Explorer 7 – браузере с нулевой поддержкой CSS3, – мы видим вполне приемлемую рабочую форму (рис. 6.15). Это замечательно! Все улучшения, добавленные свойствами CSS3, были проигнорированы; остался скелет формы, работающий так, как нужно. Цель достигнута.

^{Рис. 6.15. В IE7 форма выглядит и работает как обычная. Это хорошо}

Использование 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 также не планируется. По этой причине я не уделяю слишком много внимания анимациям (по крайней мере сейчас). Хоть они действительно мощные и захватывающие, еще предстоит увидеть, окажется ли их внедрение таким же исчерпывающим и быстрым, как это произошло с преобразованиями и переходами, у которых уже есть достойная (и растущая) поддержка.

Тем не менее концепция и синтаксис 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% {