Все записи категории ‘Танцы с CSS’

Как работает position: sticky с bottom: 0 и почему он «не работает»

 6 Авг, 2025

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент «прилип» к нижней границе контейнера при прокрутке. Почему так?

Читать далее »

Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

 15 Июл, 2025

В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими.

Читать далее »

Анимация нажатия: эффект нажатой кнопки

 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 родителе.

Читать далее »