Как сделать так, чтобы тень коробки отображалась под разными элементами

#html #css

Вопрос:

Я пытаюсь получить тень css-поля от круга, чтобы она появилась под навигационной панелью, которая появляется под самим изображением. В данный момент я могу заставить изображение создать тень, которая появляется поверх навигационной панели, но я хочу, чтобы казалось, что это один объект.

Я пробовал использовать :раньше в классе «.logo» и помещать тень в другой z-индекс, но это просто заставляет тень исчезать. Я довольно новичок в веб-материалах (а также в переполнении стека), поэтому буду признателен за любую помощь.

Это css, который я использую, и проблема связана с классом логотипа

 html{
    overflow-y: scroll;
}
body {
    font-family: "Arial", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #DCDCDC;
    background-color: #222035;
    margin: 0px;
}
.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.logo {
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}
.logo:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius:100%;
    box-shadow: 0 2vh 5vh #000000;
}
.topnav {
    box-shadow: 0px 2vh 5vh #000000;
    width: 100%;
    height: 15vh;
    background-color: #222035;
}
 
header {
    padding: 170px;
}

И остальная часть HTML

 <!DOCTYPE html>
<html lang="en-UK">
    <head>
        <title>WOW</title>
        <link rel="icon" href="icon.png">
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>

        <nav class="topnav">
        <img class = "logo" src="icon.png"></nav>
        
    </body>

1. Не могли бы вы поделиться ссылкой на кодовую ссылку?

2. codepen.io/FlippyFishy/pen/bGNYLrb ты это имеешь в виду?

3.может быть, изображение должно быть просто block элементом с margin: auto codepen.io/toniweb/pen/rNwqRXN

4. это на самом деле не сделало того, чего я хочу. Я все еще хочу, чтобы изображение было там, где оно есть, мне просто нужно, чтобы тень была под навигационной панелью, а не сверху

Ответ №1:

Вы можете использовать фильтр: filter:drop-shadow(0px 2vh 5vh #000000); на самом nav себе вместо a box-shadow .

drop-shadow() повторяет форму контейнера, в то время box-shadow как повторяет исходную форму контейнера (прямоугольник).

см.: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

пример

 html {
  overflow-y: scroll;
}

body {
  font-family: "Arial", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #DCDCDC;
  background-color: #222035;
  margin: 0px;
}

.centered {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.logo {
  position: relative;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

.logo:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 100%;
}

.topnav {
  filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
  width: 100%;
  height: 15vh;
  background-color: #222035;
}

header {
  padding: 170px;
}

 <nav class="topnav">
  <img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>