Верстка \ CSS 3

Создание масштабируемой архитектуры CSS с помощью BEM и служебных классов

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

Продолжить чтение

Верстка \ CSS 3

Псевдослучайное добавление иллюстраций с помощью CSS

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

Продолжить чтение

Верстка \ CSS 3

Создание адаптивных макетов без использования медиа-запросов

От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра.

Продолжить чтение

Верстка \ CSS 3

Создать адаптивную траекторию движения CSS? Конечно, мы это можем!

От автора: недавно у нас имела место дискуссия на тему Анимация в рабочем пространстве: как вы могли бы сделать траекторию движения CSS адаптивной? Какие техники будут работать? Это заставило меня задуматься.

Продолжить чтение

Верстка \ CSS 3

Ограничение для CSS-сетки без max-width

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

Продолжить чтение

Верстка \ CSS 3

Использование CSS для размещения текста внутри круга

От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это.

Продолжить чтение

Верстка \ CSS 3

Как сместить футер в самый низ страницы: Flexbox vs. Grid

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

Продолжить чтение

Верстка \ CSS 3

Как в CSS воссоздать красивую анимацию Netflix

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

Продолжить чтение

Верстка \ CSS 3

Элементы равной высоты: Flexbox vs. Grid

От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой.

Продолжить чтение