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

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

Элементы форм редко бывают критическими элементами бренда, и поэтому формы – прекрасная область применения CSS3-свойств.

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

Теперь спустимся на Землю и посмотрим назад.

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

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

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

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

Еще один вопрос, который мне часто задают о CSS3, – как я использую новые свойства, работая с заказчиками. Как объяснять им преимущества использования CSS3 по сравнению с другими решениями? Обучать своих заказчиков – самое

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