Как сделать адаптивный блок с тенью?
Есть карточки, их может быть сколько угодно и вокруг всего блока с карточками должна быть тень, но проблема если карточек не хватает в ряду, то получается просто пробел, что не очень смотрится, можно ли обернуть как-то весь блок тенью, но что-бы если не хватает карточек блок смотрелся без пробела? несколько дней делаю, не могу нечего придумать. Спасибо
snippet
Дополнительно:
filter: drop-shadow
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания адаптивного блока с тенью на сайте, можно использовать CSS для управления его стилями. Вот пример кода на языке CSS:
.shadow-box { max-width: 100%; /* делаем блок адаптивным */ padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* добавляем тень блоку */ }
Здесь мы создаем класс `.shadow-box`, который задает стили для нашего блока. Свойство `max-width: 100%;` гарантирует, что блок будет занимать всю доступную ширину экрана, что делает его адаптивным.
Свойство `padding: 20px;` добавляет внутренний отступ для блока, чтобы контент не прижимался к его границам.
И, наконец, свойство `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` создает тень для блока. Здесь значения `0 4px 6px` определяют смещение по горизонтали и вертикали, а также размер и размытие тени. Значение `rgba(0, 0, 0, 0.1)` задает цвет тени (черный) и прозрачность (0.1), чтобы тень выглядела более естественно.
Таким образом, применяя данные стили к вашему блоку, вы получите адаптивный блок с тенью, который будет выглядеть стильно и современно на любом устройстве.