Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка «прижать» её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Эта анимация создаёт эффект, будто элемент «приподнимается» над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Здесь мы разбираем CSS анимацию — мерцание.
Это статья из цикла заметок по CSS анимации и эффектам.
Читать далее »Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно понятным: кнопки становятся отзывчивыми, элементы появляются с грацией, а страницы начинают «дышать».
Читать далее »Иногда требуется, чтобы стили или часть стилей, формируемых миксином, добавлялись однократно.
Читать далее »Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
Читать далее »
Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, которые я называю «один к четырем».
Читать далее »Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.
Читать далее »В общем случае, это может быть и «разрыв столбца», зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction).
Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать новую строку (или столбец).
Читать далее »Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css.
Читать далее »