В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими.
Все записи категории ‘Танцы с CSS’
Единицы размеров в CSS, отличия между REM, EM, PX и т.п.
15 Июл, 2025
Анимация нажатия: эффект нажатой кнопки
2 Май, 2025
Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка «прижать» её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Анимация: Поднятие элемента с тенью при наведении
26 Апр, 2025
Эта анимация создаёт эффект, будто элемент «приподнимается» над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Анимация свечения (мерцание)
18 Апр, 2025
Здесь мы разбираем CSS анимацию — мерцание.
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Простые CSS анимации, которые оживят ваш сайт
14 Апр, 2025
Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».
Читать далее »Как сделать чтобы scss mixin добавлял стили однократно
29 Мар, 2025
Иногда требуется, чтобы стили или часть стилей, формируемых миксином, добавлялись однократно.
Читать далее »CSS media query — ошибка в округлениях
26 Мар, 2025
Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
Читать далее »Верстка: большой блок слева и четыре малых справа
15 Мар, 2025
Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, которые я называю «один к четырем».
Читать далее »100% высоты для дочернего flex контейнера
10 Сен, 2024
Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.
Читать далее »Разрыв строки во flex
6 Мар, 2024
В общем случае, это может быть и «разрыв столбца», зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction).
Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать новую строку (или столбец).
Читать далее »