Как сделать такую тень как на фотке css&html?

Ссылка скопирована
28 марта 2026 1 ответ

Как сделать такую тень как на фотке css&html?

нижная фотка такая тень мне нужна

Как сделать такую тень как на фотке css&html?

Дополнительно:

Вчера этот же "вопрос" задавался от другого юзера. Не уж то сложно нагуглить тени, и чуть-чуть поэкспериментировать с такой максимально простой задачей, вместо того, чтобы просить решение.

  • Danny Arty, нельзя помогать любителям бандеры
  • tyxeo, іди нахуй
  • snippet
    Ещё можете почитать статью: Smoother & sharper shadows with layered box-shadows.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Павел Админов Ответ

    Для создания тени, подобной той, что на фотографии, с использованием CSS и HTML, вам потребуется использовать свойства box-shadow и border-radius.

    Пример кода для создания такой тени:

     
     
     
     
    .shadow-box {
        width: 200px;
        height: 200px;
        background-color: #f2f2f2;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
     
     
     
     
    <div class="shadow-box"></div>

    .shadow-box { width: 200px; height: 200px; background-color: #f2f2f2; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } <div class="shadow-box"></div>

    В данном примере у нас есть блок с классом "shadow-box", который имеет заданные размеры и цвет фона. Свойство box-shadow позволяет создать тень с заданными параметрами: горизонтальное смещение, вертикальное смещение, размытие, цвет. Свойство border-radius задает скругленные углы блока, что придает ему более гармоничный вид.

    Вы можете настроить параметры тени, как вам угодно, изменяя значения в свойстве box-shadow. Также можно экспериментировать с другими свойствами CSS, чтобы добиться желаемого эффекта.

    Надеюсь, этот ответ поможет вам создать тень, подобную той, что на фотографии, с помощью CSS и HTML. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно