Как сделать тень для класса?
Здравствуйте! Подскажите пожалуйста как сделать тень для класса "item_box_icon", когда у "item_box" стоит - overflow: hidden. Если убрать у "item_box" hidden, то круг, который появляется при наведении будет вылазить на границы квадрата "item_box"
Как это можно решить?
Тень которую нужно добавить к "item_box_icon" - box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24)
<div class="item"> <div class="item_box"> <div class="item_box_icon"></div> </div> <div class="item_box"> <div class="item_box_icon"></div> </div> </div> |
<div class="item"> <div class="item_box"> <div class="item_box_icon"></div> </div> <div class="item_box"> <div class="item_box_icon"></div> </div> </div>
.item margin-top: 20px display: flex justify-content: center gap: 13px &_box padding: 36px 16px 36px 24px width: 350px height: 345px border-radius: 4px background: #1b2837 position: relative overflow: hidden &:hover .item_box_icon width: 548px height: 548px border-radius: 50% background: #003adb bottom: -223px right: -206px z-index: 0 transition: 0.3s &_icon width: 136px height: 102px border-radius: 69.5px 0px 4px 4px background: #003adb // box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24) position: absolute bottom: 0 right: 0 z-index: 0 transition: 0.3s |
.item margin-top: 20px display: flex justify-content: center gap: 13px &_box padding: 36px 16px 36px 24px width: 350px height: 345px border-radius: 4px background: #1b2837 position: relative overflow: hidden &:hover .item_box_icon width: 548px height: 548px border-radius: 50% background: #003adb bottom: -223px right: -206px z-index: 0 transition: 0.3s &_icon width: 136px height: 102px border-radius: 69.5px 0px 4px 4px background: #003adb // box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24) position: absolute bottom: 0 right: 0 z-index: 0 transition: 0.3s
Дополнительно:
Ответы:
Так ??
.item { margin-top: 20px; display: flex; justify-content: center; gap: 13px; } .item_box { position: relative; overflow: hidden; width: 350px; height: 345px; border-radius: 4px; background: #1b2837; } .item_box_icon { width: 136px; height: 102px; border-radius: 50%; background: #003adb; position: absolute; bottom: -100px; right: -100px; z-index: 0; transition: 0.3s; box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24); } .item_box:hover .item_box_icon { width: 450px; height: 450px; border-radius: 50%; bottom: -180px; right: -180px; z-index: 0; transition: 0.3s; } |
.item { margin-top: 20px; display: flex; justify-content: center; gap: 13px; } .item_box { position: relative; overflow: hidden; width: 350px; height: 345px; border-radius: 4px; background: #1b2837; } .item_box_icon { width: 136px; height: 102px; border-radius: 50%; background: #003adb; position: absolute; bottom: -100px; right: -100px; z-index: 0; transition: 0.3s; box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24); } .item_box:hover .item_box_icon { width: 450px; height: 450px; border-radius: 50%; bottom: -180px; right: -180px; z-index: 0; transition: 0.3s; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления тени к классу в CSS вы можете использовать свойство box-shadow. Это позволяет создать тень вокруг элемента, чтобы придать ему глубину и выделить его на странице.
Пример использования box-shadow для создания тени для класса:
.my-class { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); }
В этом примере:
- 2px - горизонтальное смещение тени
- 2px - вертикальное смещение тени
- 5px - размытие тени
- rgba(0, 0, 0, 0.2) - цвет и прозрачность тени (черный цвет с прозрачностью 0.2)
Вы можете настроить эти значения в соответствии с вашими потребностями. Также можно добавить несколько теней, указав несколько значений box-shadow через запятую.
Если вам нужно добавить тень только на определенную сторону элемента, вы можете использовать ключевые слова inset, чтобы определить внутреннюю тень, или указать отрицательные значения для сдвига тени в противоположную сторону.
Надеюсь, это поможет вам добавить тень к вашему классу и улучшить внешний вид вашего веб-сайта!