Верстка \ CSS 3

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

От автора: если вы когда-либо использовали смежные селекторы CSS одного уровня, вы знаете, что их всего два. Комбинатор + выбирает первое соответствие, которое находит сразу после, а комбинатор ~ выбирает все последующие.

Читать далее

Верстка \ CSS 3

Различные фигуры CSS

От автора: с помощью CSS фигуры создаются не слишком сложно. Квадраты и прямоугольники создать просто, так как они являются естественными фигурами сети. Добавьте ширину и высоту, и у вас есть прямоугольник точного размера. Добавьте border-radius, и вы можете округлить эту фигуру, этого достаточно, чтобы превращать эти прямоугольники в круги и овалы.

Читать далее

Верстка \ CSS 3

Отладка и оптимизация CSS: Минимизация с помощью CSSO

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

Читать далее

Верстка \ CSS 3

Создание гибких макетов с помощью Flexbox CSS

От автора: до появления CSS Grid был Flexbox (который официально известен как CSS Flexible Box Layout Module). Flexbox был разработан для управления макетом в одном направлении — строке (flex-direction: row или row-reverse) или столбце (flex-direction: column или column-reverse). Это контрастирует с сеткой, которая учитывает строки и столбцы.

Читать далее

Верстка \ CSS 3

Быстрые советы: Как изменить отображение курсора с помощью CSS

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

Читать далее

Верстка \ CSS 3

Предотвращение смещения при построении сетки CSS

От автора: разберем некоторые вопросы, которыми сопровождается построение сетки CSS. Предположим, у вас очень простой макет с одним столбцом в 300 пикселей, а другой занимает остальное пространство в 1fr.

Читать далее

Верстка \ CSS 3

Один недействительный псевдоселектор CSS — это полностью игнорируемый селектор

От автора: чем опасны недействительные псевдоселекторы CSS? Возможно, вы знаете это: если какая-либо часть селектора недействительна, это делает недействительным весь селектор.

Читать далее