Создание HTML5 приложений: Эффекты, переходы и анимации CSS3

У вас как у веб-разработчика есть три инструмента, с помощью которых вы можете воплощать свои замыслы в реальность: HTML, CSS и JavaScript. Так было не всегда. В прошлом кажущиеся простыми эффекты вроде теней от текста или градиентов заставляли вас прибегать к редакторам графических изображений вместо использования CSS и HTML. И хотя вы располагали JavaScript, чтобы сделать веб-приложение адаптивным и динамичным, обычно приходилось писать значительные объемы кода. Эти методики усложняли не только создание изначального приложения, но и его дальнейшее изменение.

К счастью, CSS3 и HTML5 исключают необходимость в былой гимнастике с графическими редакторами и JavaScript. Вы можете добиться впечатляющих результатов простой декларативной разметкой.

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

Тени

Начнем с простого и посмотрим на некоторые базовые эффекты теней. Для меня весь смысл эффектов в изменении восприятия какого-либо объекта. Например, взгляните на текст с тенью и на рамочную тень на рис. 1.

Рис. 1. Эффекты теней

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

Добавить тень нетрудно, так что сделаем тень для текстового заголовка:

h1 {
  text-shadow: black 2px 2px 12px 2px;
}

Ниже перечислены различные свойства, управляющие тенями от текста.

• Цвет тени (необязательное) Вы можете задать цвет по названию или использовать обозначения цветов по HSL или RGBA.
• Смещение по горизонтали (обязательное) Указывает смещение тени по горизонтали. Положительные значения смещают тень вправо от объекта, а отрицательные — влево.
• Смещение по вертикали (обязательное) Указывает смещение тени по вертикали. Положительные значения смещают тень вниз, а отрицательные — вверх.
• Радиус размытия (Blur Radius) Это значение определяет, насколько четкой будет тень от текста. Значение 0px — сам шрифт; последующее увеличение значений приводит ко все большему размытию края объекта. Отрицательные значения запрещены.
• Расстояние рассеивания (Spread Distance) Это значение задает расстояние от тени — насколько форма тени расширяет вовне (положительное значение) или сужается вовнутрь (отрицательное значение).

Рамочные тени (box shadows) работают так же, как и тени от текста, и имеют те же параметры:

box-shadow: red 10px 10px 0px 0px;

Тени используются весьма часто. Они применяются к таким элементам, как кнопки, чтобы придать им объемность и подсказать пользователю их предназначение. Они также помогают указывать пользователю на тот факт, что конкретный объект чем-то отличается от других объектов, видимых в UI. В прошлом вы скорее всего прибегли бы к Photoshop и создали бы PNG-изображения, представляющие кнопки; теперь вы можете делать это прямо в разметке. Конечно, здесь я лишь крайне поверхностно описал некоторые возможности. Вы можете создавать гораздо больше впечатляющих эффектов, регулируя прозрачность, радиус скругления границ, градиенты, общее оформление и т. д.

Преобразования

CSS-свойство transform позволяет «на лету» преобразовывать внешний вид указанного элемента. Для демонстрации настроим изображение так, чтобы при задержке курсора мыши над ним это изображение увеличивалось в два раза:

#myImg:hover {
  transform: scale(2);
}

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

#myImg:hover {
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o- transform: scale(2);
  transform: scale(2);
}

Кроме того, вы захотите воспользоваться преимуществами распознавания функций (feature detection). Это действительно одно из важнейших достижений, широко реализуемых сегодня на веб-сайтах. Вместо того чтобы базировать поведение сайта на пользовательских агентах, вы должны применять такой инструмент, как Modernizr (modernizr.com), который позволяет запрашивать браузер о его возможностях. Если браузер не поддерживает конкретную функцию, нужную вам, можно переключиться на так называемое поли-заполнение (polyfill) — специальную прослойку, которая реализует недостающую функцию за браузер. Такое возможно даже для CSS. Подробности см. в статье «No Browser Left Behind: An HTML5 Adoption Strategy» msdn.microsoft.com/magazine/hh394148. А теперь вернемся к преобразованиям.

Помимо масштабирования, вы также можете применять преобразования в двух- или трехмерном пространстве (3D). В случае двухмерного пространства вы перемещаете элемент по его осям X и Y. Давайте возьмем какой-нибудь текст и повернем его на 45 градусов:

.transform2d {
  transform: translate(0px, 0px)
             rotate(45deg)
             scale(1.45)
             skew(0deg, 0deg);
}

На рис. 2 показан квадрат, повернутый на 45 градусов.

Рис. 2. Преобразование элемента в двухмерном пространстве

Преобразования в двухмерном пространстве интересны, но в наши дни последний писк — 3D. Нет, мы не станем просить наших пользователей одевать специальные очки, а сделаем так, чтобы им казалось, будто наши окна выступают из плоскости экрана. Вот код, позволяющий проделать нечто подобное:

.transform3d {
  transform-origin-x: 50%;
  transform-origin-y: 50%;
  transform: perspective(110px) rotateY(45deg);
}

Результаты приведены на рис. 3.

Рис. 3. Трехмерное преобразование

Переходы

Теперь исследуем переходы (transitions), которые позволяют менять стиль или состояние элемента. Я начну с псевдокласса hover. Исторически сложилось так, что мы использовали CSS для задания состояний элемента, например его начального состояния и состояния после некоего события. Кнопки и ссылки имеют два состояния: начальное и в момент задержки курсора мыши над ними (hover). Когда пользователь активирует второе из состояний, задаются соответствующие свойства. Вот краткий пример для того случая, когда курсор мыши находится над кнопкой:

#boxTrans:hover {
  background-color: #808080;
  color: white;
  border-color: #4cff00;
  border-width: 3px;
}

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

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

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

#boxTrans {
  ...
  transition: all .5s linear;
  ...
}
#boxTrans:hover {
  background-color: #808080;
    color: red;
    border-color: green;
}

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

transition: background-color .5s linear;

Анимации

В отличие от переходов, где вы сообщаете браузеру начальное и конечное состояния, в случае анимаций указываются серии значений CSS-свойств за определенное время. На самом деле анимации — это просто расширения переходов. Чтобы создать анимацию, вы используете ключевой кадр (keyframe). Его можно рассматривать как состояние элемента в данной точке времени внутри всего интервала анимации. Давайте создадим простую анимацию — небольшое окно, которое прокручивается вперед и назад. Сначала я определю элемент:

<html>
...
  <div class="box" id="boxAnimation"></div>
...
</html>

Придадим этому div boxAnimation чуточку стиля, чтобы он выглядел как окно:

<style>
...
  .box {
  border: 1px solid black;
  background-color: red;
  width: 25px;
  height: 25px;
  position: relative;
  }
...
</style>

Теперь можно определить базовую анимацию. Мне нужно задать как ключевой кадр анимации, так и ее длительность. Если вы не задаете свойство duration, анимация никогда не будет выполняться, так как значение этого свойства по умолчанию равно 0. Я также укажу количество итераций при выполнении анимации; в данном случае я хочу, чтобы она выполнялась 10 раз в течение пяти секунд (при желании можно было бы задать animation-iteration-count равной infinite, что привело бы к выполнению анимации до тех пор, пока открыта данная страница):

#boxAnimation {
  animation: 'not-knight-rider';
  animation-duration: 5s;
  animation-iteration-count: 10;
}

Наконец, мне нужно определить сам ключевой кадр. Я намерен начать с простого ключевого кадра, который будет перемещать окно по экрану. Для этого я задаю свойства from и to, а остальное возлагаю на браузер:

@keyframes not-knight-rider {
  from {
    left: -100px;
  }
  to {
    left: 100px;
  }
}

Если вы запустите этот вариант, то увидите красное окно, «плывущее» по экрану, — затем все повторяется. Как упоминалось, вы получаете полный контроль над анимацией. Давайте изменим этот ключевой кадр, чтобы действительно управлять тем, где окно будет находиться в каждый момент и что именно оно будет делать (рис. 4).

Рис. 4. Управление анимацией

@keyframes not-knight-rider {
  from {
    left: -100px;
    opacity: 0;
  }
  25% {
    left: 100px;
    opacity: 0.5;
  }
  50% {
    left: -100px;
    opacity: 0;
  }
  75% {
    left: 100px;
    opacity: 0.5;
  }
  to {
    left: -100px;    opacity: 0;
  }
}

На рис. 4 я определяю, что будет делать ключевой кадр в данной точке на одной итерации. Я указываю начальную точку (to) и конечную (from), а также промежуточные точки, представляемые как проценты заданной длительности. Если честно, ничего особо сложного здесь нет. А вот придумать все части и сложить их так, чтобы получить впечатляющую анимацию, — это совсем другая история!

И вновь для поддержки всех браузеров, присутствующих сегодня на рынке, нужно использовать соответствующие префиксы поставщиков. В случае ключевых кадров это выглядело бы как @-webkit-keyframes и т. д.

Заметьте, что рабочие примеры всего, о чем говорилось в этой статье, можно посмотреть по ссылке bit.ly/I0Pa4d; заодно взгляните на невероятную серию учебных интерактивных демонстраций CSS3 по ссылке bit.ly/pF4sle, где вы сможете изучить различные спецификации CSS без написания кода.

Вероятно, вы заметили, что эти демонстрации посвящены Windows 8. Это связано с тем, что с выходом Windows 8 появится новая модель программирования. Веб-разработчики теперь смогут применять свои знания и навыки для создания родных приложений под Windows 8 с применением HTML5, CSS3 и JavaScript. Microsoft только что открыла вам совершенно новые возможности продавать свои приложения по всему миру! Рекомендую почитать подробности на сайте Windows Dev Center (dev.windows.com).

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