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

^{Рис. 2.03. Обычное состояние ссылки и состояние: hover}

a.foo {
 padding: 5px 10px;
 background: #9c3;

– webkit-transition: background.3s ease, color 0.2s linear;

– moz-transition: background.3s ease, color 0.2s linear;

– o-transition: background.3s ease, color 0.2s linear;
 transition: background.3s ease, color 0.2s linear;
 }

a.foo: hover,
a.foo: focus {
 color: #030;
 background: #690;
 }

Переход всех возможных состояний

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

Заменим перечисление background и color на значение all. Теперь эти переходы получат одинаковую продолжительность и временную функцию.

a.foo {
 padding: 5px 10px;
 background: #9c3;
– webkit-transition: all 0.3s ease;
– moz-transition: all 0.3s ease;
– o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

a.foo: hover,
a.foo: focus {
 color: #030;
 background: #690;
 }

Использование all – удобный способ отследить все изменения, происходящие в состояниях :hover, :focus, :active, который избавляет от необходимости перечислять каждое свойство, нуждающееся в обозначении перехода.

К каким свойствам применим переход

Мы применили переход к свойствам background и color. Но есть много других свойств, на которые можно наложить переход, включая width, opacity, position и font-size. Таблица всех свойств (и их типов значений) опубликована на сайте W3C [7] .

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

7

http://www.w3.org/tR/css3-transitions/#properties-from-css-

Почему бы не воспользоваться JavaScript?

Читатель может подумать: раз не все браузеры поддерживают CSS-переходы, почему бы не использовать решение на JavaScript, чтобы показывать анимацию? Популярные фреймворки – jQuery, Prototype, script.aculo.us – уже давно предоставляют кросс-браузерные анимации.

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

Используйте с умом

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

Больше мыслей о подходящих скоростях переходов и анимаций можно узнать в публикации Трента Уолтона: http:// bkaprt.com/css3/7/ [8] .

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

3. Hover по-новому

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

8

http://trentwalton.com/2010/03/22/Css3-in-transition/

Повторим самое важное, что мы уже успели узнать.

1. Существуют основные свойства CSS3, которые применимы уже сегодня.

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

3. Браузерные префиксы позволяют нам продвигать технологию прямо сейчас, помогая проверять неустоявшиеся свойства на реальных задачах.

4. CSS-переходы перестали быть проприетарными экспериментами – они стали частью спецификации, которую перенимают другие браузеры. Их стоит использовать!

Теперь самое время применить все эти прекрасные новые инструменты в дизайне настоящей веб-страницы.

Наш пример

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

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

Сообщения в космосе и в вебе

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