Книга «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд.»

Привет, Хаброжители! Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.

Масштабирование (scale)

Для масштабирования используется следующий синтаксис:

.scale:hover {
   transform: scale(1.4);
}

Проход указателя мыши над ссылкой, имеющей класс scale, вызовет такой эффект:


Мы указываем браузеру при наведении на элемент указателя мыши увеличить этот элемент в 1,4 раза.

Использование значений меньше единицы приведет к сжатию элементов. Следующий код приведет к сжатию элемента до половины его размера:

transform: scale(0.5);

Перемещение (translate)

Для перемещения используется следующий синтаксис:

.translate:hover {
    transform: translate(-20px, -20px);
}

В нашем примере это правило приведет к следующему эффекту:

Свойство translate дает команду браузеру перемеcтить элемент на расстояние, определяемое длиной (например, vw, px, % и т. д.). Первое значение относится к перемещению по оси x, второе — по оси y. Положительные значения, заданные в скобках, приводят к перемещению элемента вправо или вниз, а отрицательные —соответственно, влево или вверх.

Если передается только одно значение, то оно применяется к оси x.

Если нужно указать для перемещения элемента значение только для одной оси, можно использовать объявления translateX(-20px), что в данном случае приведет к перемещению элемента влево на 20 px, или translateY(-20px), что в данном случае приведет к перемещению элемента вверх на 20 px.

Использование translate для центрирования элементов с абсолютным позиционированием
translate предоставляет удобный способ центрирования элементов с абсолютным позиционированием внутри контейнера с относительным позиционированием. Пример кода находится в каталоге example_09-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 px × 200 px), для «подталкивания» элемента обратно в центр можно воспользоваться отступами с отрицательными значениями. А как включить содержимое и насколько высоким оно окажется?

Добавим к внутреннему блоку произвольное содержимое.


Очевидно, возникла проблема. Разберемся с этим беспорядком с помощью transform:

.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);

то элемент десять раз пройдет по полному кругу. Примеры практического применения этого значения можно пересчитать по пальцам, но на сайте для мукомольной компании это может пригодиться.

Наклон (skew)

Если вам приходилось работать в программе Photoshop, то наклон элемента по какой-либо из его осей или двум осям сразу вы уже представляете. Вот код примера:

.skew:hover {
   transform: skew(40deg, 12deg);
}

Установка этого правила для ссылки с псевдоклассом hover приведет при наведении указателя мыши на элемент к следующему эффекту:


Первое значение задает наклон по оси x (в нашем примере это 40deg), а второе значение (12deg) предназначено для задания наклона по оси y. Если опустить второе значение, то единственное имеющееся значение будет просто применено к оси x (горизонтальной оси), например:

transform: skew(10deg);

Как и в случае с перемещением, вы можете применять наклон только к одной оси с помощью функций skewX() и skewY().

Матрица (matrix)

Кто-нибудь вспомнил одноименный и весьма переоцененный фильм? Нет? Что-что? Вы хотите узнать о CSS-матрице, а не о фильме? Что ж…

Синтаксис преобразования matrix может показаться непостижимым. Рассмотрим пример кода:

.matrix:hover {
   transform: matrix(1.178, -0.256, 1.122, 1.333, -41.533, -1.989);
}<u></u>

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


Если вы работаете с анимацией в JavaScript, не прибегая к помощи анимационных библиотек, то, наверное, вам стоит поближе познакомиться и с матрицей, ведь в ее синтаксисе вычисляются все преобразования.

Теперь мне нравятся сложные задачи (кроме просмотра серии фильмов «Сумерки»), но я уверен, что этот синтаксис требует исследований. Спецификация не совсем проясняет ситуацию: www.w3.org/TR/css-transforms-1/#mathematical-description.

Можно сосчитать на пальцах одной руки, сколько раз мне потребовалось написать или понять преобразование CSS, описанное как matrix, поэтому о нем, пожалуй, не стоит беспокоиться.

Если понадобится создать матрицу, обратитесь по адресу:
www.useragentman.com/matrix.

Этот сайт позволяет перетаскивать элемент, придавать ему вид, который вас устраивает, после чего забирать код в свой файл CSS.

Свойство transform-origin

Обратите внимание, что при использовании CSS исходная точка преобразования, которую браузер использует в качестве центра, находится посередине — на 50 % протяженности элемента по оси x и на 50 % его протяженности по оси y. Это отличается от SVG-технологии, в которой такая точка по умолчанию находится в левом верхнем углу с координатами (0; 0).

С помощью свойства transform-origin можно изменить точку начала преобразования.

Рассмотрим наше матричное преобразование. По умолчанию transform-origin устанавливает точку начала преобразования в позицию '50% 50%' (в центре элемента). Средства разработчика Firefox показывают, как это преобразование применяется.


Если перенастроить значение transform-origin таким образом:

.matrix:hover {
   transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
   transform-origin: 270px 20px;
}

то можно увидеть следующий эффект:


Первое значение задает смещение по горизонтали, а второе — по вертикали. Можно использовать ключевые слова. Например, left задает 0 % по горизонтали, right — 100 % по горизонтали, top — 0 % по вертикали и bottom — 100 % по вертикали. Или воспользуйтесь длиной, задавая для нее любые единицы измерения, используемые в CSS.

Если для значений свойства transform-origin используются проценты, то горизонтальное и вертикальное смещения задаются относительно высоты и ширины контейнера, содержащего элементы.

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

Спецификация CSS 2D Transforms Module Level 1 находится по адресу: https:// www.w3.org/TR/css-transforms-1.

Более полно преимущества перемещения элементов с помощью преобразований рассмотрены в статье Пола Айриша (Paul Irish) (http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/).

А в качестве просто фантастического обзора того, как браузеры справляются с переходами и анимацией, и объяснения, почему преобразования могут быть столь эффектными, настоятельно рекомендую следующую публикацию: blogs.adobe.com/webplat-form/2014/03/18/css-animations-and-transitions-performance.

Мы рассмотрели основы преобразований в двух измерениях, по осям x и y. Тем временем CSS-код способен обрабатывать элементы в трехмерном пространстве. Посмотрим, как можно получить еще больше удовольствия с помощью 3D-преобразований.

Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок

Для Хаброжителей скидка 25% по купону — HTML5