Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

figure: hover + figure {

transform: scale(0.25) rotate(-1deg) translateX(15px);

transition-duration: 1.5s;

transition-delay: .2s;

}

Вы видите, что нет строгого движения вдоль оси X или преобразования на 15 пикселей, потому что преобразование scale уменьшает длину на четверть, а преобразование rotate поворачивает ось X на 1 градус против часовой стрелки.

Функция translateXпринимает одно значение, используя действующую длину элемента. Также существует соответствующая функция translateY. Они обе могут устанавливаться вместе с использованием функции translate, которая допускает две величины (сначала X, затем Y), которые разделяются запятой.

Последнее семейство функций transform– это skewX, skewYи skew. Они определяются так же, как и функции transform, но они перекручивают элемент по одной или двум осям. Обычно это происходит с использованием моделируемой трехмерной перспективы.

Все трансформации в примере используют исходную точку по умолчанию, которая является центром элемента. Использование свойства transform-originпоможет установить ее. Оно допускает от одной до четырех величин, заданных через пробел. Это может быть длина, процент, или ключевые слова «сверху, слева, снизу, справа или в центре». Если установлена только одна величина, то вторая по умолчанию будет в центре. Если одна из величин не является ключевым словом, то тогда первая будет отвечать за горизонтальную позицию. При использовании ключевого слова, вы можете определить дополнительную величину смещения, которая устанавливается как процент или длина сразу после этого:

transform-origin: top 10 % left 25 %;

Так база преобразований установится на точке, которая находится на пересечении 10 % от верха элемента и 25 % слева от него.

Разработчики считают селекторы CSS часто чуть ли не самой прикольной игровой площадкой, на которой можно развернуться. Вы можете подумать, что нам на самом деле не нужны дополнительные селекторы для обращения к элементу в разметке. Или, может быть, вы из последних сил воюете с ненавистными искусственными приемами jQuery, чтобы перезаписать значения CSS по умолчанию в определенных ситуациях. И в том, и в другом случаях с селекторами CSS3 вы получите удовольствие. Давайте посмотрим, какие возможности у нас есть сейчас, когда селекторы CSS3 набирают поддержку в браузерах.

Давайте вспомним пример с вертикальным ритмом из раздела о типографике. Вы, возможно, в курсе, что можете ссылаться на определенные разделы страницы, используя идентификатор с решеткой после указателя URL. Так мы можем использовать что-то вроде этого http://example.com/index.html#def для ссылки на раздел с определениями типографики. Когда на странице несколько больших разделов, пользователю сразу же видно, в какой раздел он попал.

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

В прошлом для выполнения этой операции нам бы понадобился язык JavaScript. CSS3 дает нам новый псевдокласс для указания текущего элемента, т. е. элемент, чей ID-атрибут совпадает с текущим хешем в URL. Этот псевдокласс называется: target.

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

h1:target, h2:target,

h3:target, h4:target,

h5:target, h6:target {

background: hsla(65,100 %,50 %,5);

}

Указание цвета в профиле HSLA не нужно в данном случае, потому что в общем любой браузер, который поддерживает псевдокласс: target также поддерживает цвета HSLA. Старые браузеры, которые не поддерживают: target на самом деле не проблема, так как селектор улучшает юзабилити и его функциональность не ключевая. Википедия использует: target, когда вы щелкаете на сноску, подсвечивая ее в (обычно длинном) списке ссылок [51]. Это реально помогает вам быстро опознать правильную ссылку, так ведь?

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

В CSS 2.1 у нас был только один структурный псевдокласс: first-child. CSS3 расширяет это и дает нам изобилие новых псевдоклассов, что решает не только перечисленные задачи, но и другие вопросы:

• nth-child

• last-child

• nth-last-child

• only-child

• first-of-type

• nth-of-type

• last-of-type

• nth-last-of-type

• only-of-type

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

• Число в: nth-child(1) равно псевдоклассу: first-childв CSS 2.1.

• Чтобы выразить: nth-child(5) в CSS 2.1, вам нужно было бы написать: first – child + * + * + * + *, что недопустимо многословно, особенно для больших цифр.

• Выражение типа 5n или 3n+2, где n равно любому числу от 0 до бесконечности. Например, nth-child(3n+1)равно: nth-child(1), nth-child(4), nth-child(7), nth-child(10)и т. д., с бесконечным списком.

• Одно из ключевых слов нечетное или четное, 2n+1 и 2n, соответственно.

Например, чтобы затемнить фон каждой нечетной строки таблицы, мы могли бы написать что-то наподобие:

tr: nth-child(odd) {

background: rgba(0,0,0,15);

}

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

Пожалуйста, обратите внимание на то, что разница между: nth-*и: nth-last-*– это чисто направление нумерации :nth-childначинается от первого «родителя», тогда как: nth-last-childстартует от последнего. Отсюда :last-childпо существу равен: nth-last-child(1), а :only-childравен :first-child: last-child, потому что он подходит к элементам без «братьев и сестер». Интересно то, что мы можем обобщить псевдокласс: only-childтак, что когда нам нужно обратиться к элементу ровно с пятью дочерними элементам, мы можем использовать: first-child: nth-last-child(6), чтобы обратиться к первому, а затем применить: first-child: nthlast– child(6) ~ *для остальных.

Разница между псевдоклассами *-childи *-of-typeв том, что последний поддерживает отдельный счет на тег. Например, body: first-childникогда не совпадет, потому что bodyвсегда имеет заголовочный дочерний элемент, а body: first-of-typeвсегда совпадает, так как у нас всего один элемент body.