Анимация: Поднятие элемента с тенью при наведении

Эта анимация создаёт эффект, будто элемент «приподнимается» над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).

Это статья из цикла заметок по CSS анимации и эффектам.

Области применения

  • Кнопки
  • Карточки товаров
  • Блоки с контентом
  • Любые кликабельные элементы

Пример, того как это выглядит (наведите курсор на карточку):

Карточка

Вот пример на чистом CSS / HTML

Стили:

Как это работает:

  • В обычном состоянии у блока небольшая тень.
  • При наведении тень становится больше и «глубже», а сам блок чуть сдвигается вверх.
  • transition делает этот эффект плавным.

Вариации:

Только усиление тени без смещения:

Добавление лёгкого увеличения (scale):

Более мягкое движение (через cubic-bezier):

Мало букафф? Читайте есчо !

CSS-анимация загрузки: простой спиннер без JavaScript

Май 2, 2025 г.

Анимации загрузки — это визуальные индикаторы, которые показывают пользователю, что система обрабатывает действие. Один из самых распространённых вариантов — спиннер, вращающийся круг. Это статья из цикла заметок по CSS анимации и эффектам. ...

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать

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

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать
 

Комментарии к «Анимация: Поднятие элемента с тенью при наведении»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: