CSS псевдоэлементы и transform: мои любимые инструменты CSS

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

Что такое псевдоэлементы?

Если вы когда-либо использовали: :before или :after: в своем селекторе и в нем был стиль содержимого, вы сделали псевдоэлемент. Они вставляются в DOM и могут рассматриваться как свободные элементы span, которые могут иметь текст, который исходит из CSS.

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

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

Что могут сделать преобразования CSS?

2D-преобразования, которые я часто использую

transform: translate (<horizontal length>, [vertical length]);

Перемещение элемента по горизонтали или по вертикали. Интересный факт: можно использовать процент, и он будет умножен на размеры элемента. Поэтому, если элемент шириной 200 пикселей будет перемещен на 50% горизонтально с переводом, он будет перемещен на 100 пикселей влево. Например:

/* Move element 50px left */
transform: translate(50px); /* Move element 2rem right and 100% down */
/* 100% = height of element being styled */
transform: translate(-2rem, 100%);

transform-origin: <horizontal-position> <vertical-position>;

Определяет, где будут инициироваться преобразования. По умолчанию center center, но может быть установлен на другие вещи, такие как left top, right bottom, или вы можете использовать длины CSS для определения позиции в верхнем левом углу. См. доки MDN с отличной документацией и примерами.

transform: rotate (<angle>);

Повернет элемент в градусах. При анимации вы можете вращать элемент несколько раз, задавая угол более 360 градусов. Важно обратить внимание на преобразование-происхождение с поворотами, это будет иметь большое значение в том, как применяется ротация. Например:

/* Rotate item 45deg from its center */
transform: rotate(45deg); /* Rotate item 3 times, if animated it will spin 3 times, if not item won’t change appearance */
transform: rotate(1080deg); 

transform: scale (<число>);

Масштаб увеличит или уменьшит размер элемента. 1 является обычным размером, 2 удваивают его размер, 0,5 — половину его размера. transform-origin тоже будет иметь большое значение.

Мои любимые методы, связанные с псевдоэлементами и преобразованиями

Использовать сначала transform для переходов и анимаций CSS

Поскольку преобразования могут отображаться в долях пикселя с использованием анимации сглаживания, они имеют тенденцию выглядеть более гладкими, а преобразование всегда будет лучше работать в анимации, чем другие свойства. Однако, если элемент не анимируется, другие варианты компоновки (margin, padding, position) будут лучшим выбором.

Поэтому при анимации лучше всего получить элемент в исходное положение (или как можно ближе) без преобразования, а затем добавить преобразование, чтобы переместить его до конца.

Вертикальное центрирование

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

Codepen пример: codepen.io/wesruv/pen/pEOAJz

Это работает, потому что top: 50% вычисляется против размеров родительского элемента, а перевод вычисляется в соответствии с размерами стилируемого элемента.

Вот что происходит:

Понимание того, почему это работает, важно, потому что есть также элементы видового экрана, rem, em и px, которые могут включать некоторые слабые варианты макета. Например, в прошлом месяце Томас Латтимор поделился тем, как позиция, vw и translate могут использоваться, чтобы сделать элемент шириной, чем браузер, вместо ограничения родительским контейнером.

Соотношения сторон в CSS (также называемые внутренние коэффициенты)

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

Если вы знаете соотношение сторон ваших видеороликов, нет необходимости в решении JavaScript, например, fitvids.js.

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

Скажем, разметка HTML — div.movie > iframe.movie__video, а фильм — 16: 9; вот как я бы использовал соотношение сторон, поэтому фильм может иметь жидкую ширину:

.movie { position: relative;
}
.movie:before { /* This will setup the aspect ratio of our screen */ content: ''; display: block; /* content-box makes sure padding adds to declared height */ box-sizing: content-box; width: 100%; height: 0; /* Vertical padding is based on parent element's width */ /* So we want 9/16, converted to % as our vertical padding */ padding: 0 0 56.25%;
}
.movie__video { /* Now we need to absolutely position content */ /* Otherwise it'll be pushed down by the :before element */ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

Codepen пример: codepen.io/wesruv/pen/peYPWo

Этот метод является эффективным и будет работать в IE5.

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

Псевдоэлементы для сложных правил положения фона

Предположим, что дизайн требует фонового изображения, которое покрывает половину его обертки, и нам нужен background-size: cover, чтобы изображение заполнило половину родительского элемента, так как размеры родителя изменялись для реагирования.

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

.hero--half-cover-image { position: relative; } .hero--half-cover-image:before { content: ''; position: absolute; top: 0; right: 0; display: block; width: 50%; height: 100%; background: gray url(/images/fillmurray.jpg) no-repeat; background-size: cover;
}

Codepen example: codepen.io/wesruv/pen/PpLmoR

Искусство CSS

«CSS art» я имею в виду простые значки, сделанные с помощью CSS, в отличие от шрифтов и изображений значков. Это не работает для всех значков, которые могут быть у вас в дизайне, но для символов chevrons, hamburger и search, вы можете сохранять активы и передавать файлы и получать возможность изменять цвет, макет, размер или стиль значок на взаимодействиях или пользовательские триггеры.

Вы также можете делать эти эффекты с помощью SVG, но у этого есть больше проблем с совместимостью (в настоящее время), и это может означать больше данных для загрузки пользователем для получения того же эффекта.

Я создал несколько из них в Codepen и повторно использовал и настраивал их в нескольких проектах.

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

Искусственный интеллект

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

Codepen Version: codepen.io/wesruv/pen/VXzLpZ

Live version: ai.cs.cmu.edu/about#ai-stack

Диаграмма Венна

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

Codepen Version: codepen.io/wesruv/pen/RjmVvV

Связанные круги

Что в конечном итоге заменило диаграмму Венна, чтобы объяснить основные способы, которыми компания или человек может сотрудничать с Школой компьютерных наук Карнеги Меллона.

Codepen Version: codepen.io/wesruv/pen/ppOmVq

Live Version: www.cs.cmu.edu/partnerships

Небольшой трюк, который я узнал — на более богатом CSS Art, который имеет небольшие части, которые должны встретиться — я обычно добавляю div, чтобы содержать элемент. Я сделаю значок намного больше, чем мне нужно, и используйте transform: scale () в div, чтобы уменьшить его до соответствующего размера. Это позволяет избежать проблем со смещением субпикселей, из-за которых значок отключается.

Например, на значке маленького увеличительного стекла может быть очень сложно выровнять ручку (диагональную линию) с помощью линзы (кольцо), если значок имеет ширину 20 пикселей. Округление пикселей может привести к тому, что рукоятка прорвет круг, или может не соответствовать кругу в правильном положении. Работая больше, при ширине 100 пикселей, а затем уменьшаясь, масштабируя до 0,2, мы избегаем этой проблемы.

Потенциальные ошибки или риски с использованием преобразования?

Потенциальные ошибки или риски с использованием псевдоэлементов?

Автор: Wes Ruvalcaba

Источник: https://www.lullabot.com/

Редакция: Команда webformyself.