Как в блоке «Спасибо что доверяете» сделать тень для каждого второго элемента и чтобы он был выше остальных блоков?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Как в блоке "Спасибо что доверяете" сделать тень для каждого второго элемента и чтобы он был выше остальных блоков?

Сайт на котором верстка ведется

Как должен выглядеть слайдер в блоке "Спасибо, что доверяете"

Как в блоке «Спасибо что доверяете» сделать тень для каждого второго элемента и чтобы он был выше остальных блоков?

Код тени: box-shadow: 0px 0px 54px 0px #00000021;

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

А вы уверены, что это именно каждый второй, а не активный слайд?
Я нет.
Собственно, сдвигаете активный (посмотрите класс) слайд (любым удобным способом, трансформ, margin, align-self и т.д.) и добавляете тень.

  • Ankhena, да вы правы, я об этом не подумал
  • Тут бы ещё классу slick-slide добавить transition со значением к примеру .2s linear
    Тогда блоки при переключении перестанут прыгать

    • Ответы:

    Если я правильно понимаю, то тут нужно идти через псевдоселектор :nth-child(even), чтобы выбирались каждые четные элементы. Но вот не помню к чему он должен применяться: к контейнеру или к самим элементам.

    • К элементам.
    Нужно решить такую задачу?

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

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Для добавления тени каждому второму элементу в блоке "Спасибо что доверяете" и чтобы он был выше остальных блоков, вы можете использовать следующий CSS код:

    .thank-you-block {
  display: flex;
  flex-wrap: wrap;
}
 
.thank-you-block .block {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #f0f0f0;
  position: relative;
}
 
.thank-you-block .block:nth-child(even) {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

    .thank-you-block { display: flex; flex-wrap: wrap; } .thank-you-block .block { width: 200px; height: 200px; margin: 10px; background-color: #f0f0f0; position: relative; } .thank-you-block .block:nth-child(even) { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 1; }

    В данном коде мы используем flexbox для распределения блоков внутри контейнера "thank-you-block". Затем каждому блоку присваивается ширина, высота, отступы и цвет фона. Для каждого второго блока (через псевдокласс :nth-child(even)) добавляем тень с помощью box-shadow и устанавливаем z-index, чтобы он был выше других блоков.

    Таким образом, с помощью данного CSS кода вы сможете добавить тень каждому второму элементу в блоке "Спасибо что доверяете" и сделать его выше остальных блоков.

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

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

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

    комментарий

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

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

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Safari Почему снова флагнули домен в safari? 1 ответ