HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .
Шрифт:
Интервал:
Закладка:
На обоих указанных сайтах вы можете сравнить функции развития процесса по времени и определить различия, вносимые каждой из них в этот процесс. Вот копия экрана, сделанная при просмотре сайта http://easings.net, где можно навести указатель мыши на каждую линию для демонстрации функции плавности.
Но даже если вы способны записать собственную кривую Безье вслепую, скорее всего, на практике в большинстве ситуаций это мало что изменит. Причина, как и в случае со многими другими улучшениями, заключается в том, что при применении эффектов переходов следует проявлять определенную сдержанность. При реальной работе переходы, длящиеся слишком долго, создают впечатление заторможенности сайта. К примеру, навигационные ссылки с переходами по пять секунд способны скорее навредить работе, чем впечатлить ваших пользователей. Ощущение скорости играет весьма важную роль для наших пользователей, поэтому и вы и я должны сконцентрироваться на создании сайтов и приложений, скорость работы которых ощущается как можно более высокой.
Поэтому, если для иного нет веских причин, зачастую наилучшим выбором будет использование исходного развития процесса перехода (ease) за короткий промежуток времени, который, на мой взгляд, не должен быть более одной секунды.
Развлечение с переходами на адаптивных сайтах
Бывало ли у вас в детстве такое, что один из родителей куда-то уезжал на целый день, а другой, чтобы завоевать ваше расположение, говорил что-нибудь вроде: «Пока мамы (папы) нет дома, мы будем сыпать сахар во все сухие завтраки, но ты должен пообещать, что не скажешь об этом, когда она (он) вернется»? Каюсь, я тоже проделывал нечто подобное со своими малышами. В этом-то все и дело: когда никто не видит, можно немного порезвиться. Я не собираюсь советовать внедрение этого в серьезные приложения, но попробуйте следующий код в своем проекте по разработке адаптивного веб-приложения:
* {
transition: all 1s;
}
Здесь используется универсальный CSS-селектор *, предназначенный для выбора абсолютно всего, а затем устанавливается переход всех свойств за одну секунду (1s). Поскольку функция развития процесса по времени не указана, то по умолчанию станет использоваться ease, а задержки не будет, так как если дополнительно ее значение не указано, то по умолчанию принимается значение 0. Каков будет эффект? А вы попробуйте изменить размер окна вашего браузера, и большинство того, что в нем находится (ссылки, состояния прохода указателя мыши и т. п.), будет вести себя вполне предсказуемо. Но, поскольку под переходы подпадает абсолютно все, сюда включаются и любые правила внутри медиазапросов, поэтому при изменении размеров окна элементы некоторым образом переходят из одного состояния в другое. Важно ли это? Конечно, нет! Забавно наблюдать за этим и развлекаться? Конечно, да! А теперь уберите это правило, пока мама не увидела!
CSS3 2D-преобразования
Несмотря на схожесть названий, CSS-преобразования (transforms) не имеют ничего общего с CSS-переходами (transitions). Их нужно рассматривать в следующем ключе: переходы сглаживают изменения, происходящие при перетекании одного состояния в другое, а преобразования определяют, во что элемент превратится. Лично я запоминаю разницу абсолютно по-детски: представляю себе робот-трансформер, например, Optimus Prime. Когда он превращается в грузовик, это преобразование. Но фаза между роботом и грузовиком является переходом (он переходит из одного состояния в другое).
Разумеется, если вам невдомек, кто или что такое Optimus Prime, можете мысленно отбросить несколько последних предложений. Надеюсь, вскоре все станет ясно и понятно.
Доступны две группы CSS3-преобразований: 2D и 3D. 2D-варианты реализованы намного шире, браузеры в них неплохо разбираются, и их, конечно же, легче записывать, поэтому с них и начнем. Модуль CSS3 2D Transforms позволяет воспользоваться следующими преобразованиями:
• scale — используется для масштабирования элемента (его увеличения или уменьшения);
• translate — перемещает элемент по экрану (вверх, вниз, влево и вправо);
• rotate — вращает элемент на определенную величину, указанную в градусах;
• skew — используется для наклона элемента по его координатам x и y;
• matrix — позволяет выполнять перемещения и придавать форму преобразованиям с точностью до пиксела.
совет
Важно запомнить, что преобразования осуществляются вне процесса формирования документа. Любой элемент, подвергаемый преобразованию, не влияет на позицию соседнего элемента, не подвергающегося преобразованию.
Попробуем применить различные 2D-преобразования, которые можно посмотреть в действии, открыв в браузере файл каталога example_08-02. Здесь, чтобы вы могли лучше разобраться со всем, что происходит, ко всем преобразованиям применяются переходы.
Масштабирование (scale)
Для масштабирования, scale, используется следующий синтаксис:
.scale:hover {
transform: scale(1.4);
}
Проход указателя мыши над ссылкой, имеющей класс scale, произведет следующий эффект.
Браузеру указывается, что нам нужно, чтобы при наведении на элемент указателя мыши этот элемент увеличивался в 1,4 раза от исходного размера.
Кроме тех значений, которые уже использовались для увеличения элементов, использование значений меньше единицы приведет к сжатию элементов. Следующий код приведет к сжатию элемента до половины его размера:
transform: scale(0.5);
Перемещение (translate)
Для перемещения, translate, используется следующий синтаксис:
.translate:hover {
transform: translate(-20px, -20px);
}
В нашем примере это правило приведет к следующему эффекту.
Свойство translate указывает браузеру на необходимость перемещения элемента на расстояние, определяемое либо в пикселах, либо в процентах. Первое значение относится к перемещению по оси X, второе — по оси Y. Положительные значения, заданные в скобках, приводят к перемещению элемента вправо и вниз, а отрицательные соответственно влево и вверх.
Если передается только одно значение, то оно применяется к оси X. Если нужно указать для перемещения элемента значение только для одной оси, можно также воспользоваться объявлениями translateX или translateY.
Использование перемещения для центрирования элементов с абсолютным позиционированием. Перемещение обеспечивает весьма полезный способ центрирования элементов с абсолютным позиционированием внутри контейнера с относительным позиционированием. Пример кода можно найти в файле каталога example_08-03.
Рассмотрим разметку:
<div class="outer">
<div class="inner"></div>
</div>
И этот код CSS:
.outer {
position: relative;
height: 400px;
background-color: #f90;
}
.inner {
position: absolute;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
top: 50%;
left: 50%;
}
Возможно, вам самим приходилось делать нечто подобное. Когда известны размеры элемента с абсолютным позиционированием (в данном случае это 200 × 200 пикселов), для «подталкивания» элемента обратно в центр можно воспользоваться отступами с отрицательными значениями. А как быть, если вам понадобится включить содержимое и будет совершенно непонятно, насколько высоким оно окажется? На помощь придет перемещение.
Добавим к внутреннему блоку какое-нибудь произвольное содержимое.
Очевидно, у нас возникла проблема! Хорошо, разберемся с этим беспорядком с помощью перемещения:
.inner {
position: absolute;
width: 200px;
background-color: #999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
И вот результат.
Здесь top и left позиционируют внутренний блок внутри его контейнера таким образом, что вначале левый верхний угол внутреннего блока находится в точке 50 % длины и 50 % высоты внешнего контейнера. Объявление transform работает в отношении внутреннего элемента и позиционирует его в обратную сторону по этим осям на половину (-50%) его собственной ширины и высоты. Превосходно!
Вращение (rotate)
Преобразование rotate позволяет вращать элемент. Для него используется следующий синтаксис:
.rotate:hover {
transform: rotate(30deg);
}
А в окне браузера произойдет следующее.
Значение в скобках всегда задается в градусах (например, 90deg). Положительные значения задают вращение по часовой стрелке, а отрицательные — против часовой стрелки. Можно также сойти с ума и задать элементу вращение, указав следующее значение:
transform: rotate(3600deg);
В результате элемент десять раз пройдет по полному кругу. Примеры практического применения данного конкретного значения можно пересчитать по пальцам, но вы знаете, что при создании сайтов для мукомольной компании вам это может пригодиться.
