Главная » Статьи » CSS псевдоэлементы и transform: мои любимые инструменты CSS

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

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

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

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

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

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

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

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

Управлять визуальным представлением элемента с translate, scale, rotate, skew и т. д.

Отображать промежуточные пиксели с эффектами сглаживания

Предоставлять действительно совершенные и плавные анимации или переходы 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% вычисляется против размеров родительского элемента, а перевод вычисляется в соответствии с размерами стилируемого элемента.

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

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

Понимание того, почему это работает, важно, потому что есть также элементы видового экрана, 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, и, поскольку текст может измениться, мне нужны были контейнеры, чтобы быть гибкими и быть на основе копии.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иногда, когда элемент сглаживается из преобразования, он может сделать некоторые элементы «нечеткими». Это может быть заметно при малом тексте или небольшой графике.

Использование 3D-преобразования будет использовать графическое аппаратное ускорение, которое может посадить батарею телефона быстрее.

Некоторые 3D-преобразования могут вызвать серьезные проблемы с обработкой на телефонах. Эффекты Parallax и 3D-heavy преобразования обычно должны быть отключены при меньших контрольных точках, так как мобильным устройствам не хватает вычислительной мощности, чтобы обрабатывать эти эффекты плавно.

Совместимость браузера IE9 + для 2D и IE10 + для 3D (с оговорками), используйте Autoprefixer, чтобы узнать, нужен ли ваш сайт -webkit-префикс вместе с не префиксным стилем.

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

Технически вы должны использовать :: before и :: after, но IE8 поддерживает только: before и: after (одно двоеточие), что не имеет большого значения, но единственная двоеточие работает повсюду и набирается менее одного символа.

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

Автор: Wes Ruvalcaba

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

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