Иногда кажется, что position: sticky
работает только с top
. Указываешь bottom: 0
— и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент «прилип» к нижней границе контейнера при прокрутке. Почему так?
Все записи категории ‘Танцы с CSS’
Как работает position: sticky с bottom: 0 и почему он «не работает»
Единицы размеров в CSS, отличия между REM, EM, PX и т.п.
В CSS размеры можно задавать с помощью разных единиц измерения: rem
, em
, px
, %
и другие. Разберём ключевые различия между rem
, em
и прочими.
Анимация нажатия: эффект нажатой кнопки
Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка «прижать» её визуально. Такой эффект достигается с помощью изменения масштаба (scale
) и вертикального смещения (translateY
).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Анимация: Поднятие элемента с тенью при наведении
Эта анимация создаёт эффект, будто элемент «приподнимается» над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow
, иногда в сочетании с лёгким смещением (transform: translateY(-2px)
).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Анимация свечения (мерцание)
Здесь мы разбираем CSS анимацию — мерцание.
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Простые CSS анимации, которые оживят ваш сайт
Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».
Читать далее »Как сделать чтобы scss mixin добавлял стили однократно
Иногда требуется, чтобы стили или часть стилей, формируемых миксином, добавлялись однократно.
Читать далее »CSS media query — ошибка в округлениях
Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
Читать далее »Верстка: большой блок слева и четыре малых справа

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, которые я называю «один к четырем».
Читать далее »100% высоты для дочернего flex контейнера
Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.
Читать далее »