У вас как у веб-разработчика есть три инструмента, с помощью которых вы можете воплощать свои замыслы в реальность: 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).
Для программистов, веб-разработчиков и других сейчас наступают интересные времена. Технологии прогрессируют настолько быстро, что ваш арсенал средств разработки может легко переполниться новыми инструментами. Как бы то ни было, важно смотреть вперед и стремиться вникнуть в суть предлагаемых вам инструментов и методологий.