Как сделать тень при наведении css

Question

Ivan Gagarinov · Accepted Answer

Чтобы добавить тень при наведении на элемент, можно использовать псевдокласс :hover и свойство `box-shadow`:

```css
.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  transition: box-shadow 0.3s; /* Добавим плавный переход */
}

.box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Горизонтальное смещение, вертикальное смещение, размытие и цвет*/
}
```

Свойство `box-shadow` принимает несколько значений: горизонтальное смещение, вертикальное смещение, размытие и цвет тени. В примере тень будет иметь горизонтальное и вертикальное смещение `0`, размытие `10px` и черный цвет с прозрачностью `0.5`. Также добавлено свойство `transition` для создания плавного эффекта изменения тени.

Вячеслав Межуревский · Answer

CSS-свойство [box-shadow](https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow) добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover). Исходный HTML-документ ```html

У этого элемента будет тень

``` Стили ```css .box-with-shadow { /* Ширина блока */ width: 250px; /* Внутренние отступы */ padding: 32px; /* Цвет фона в элементе */ background-color: #38d9a9; /* Сделаем видимую границу элементу */ border: 1px solid #333; } .box-with-shadow:hover { /* Свойство отвечающее за формирование тени 8px - отступ по оси Х 10px - отступ по оси Y 5px - радиус размытия тения 2px - радиус распространения rgba - функция формирующая цвет тени */ box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); } ```

Как сделать тень при наведении css

Ответы

Каталог