тень на элементе круга - PullRequest
Новая
       36

тень на элементе круга

0 голосов
/ 11 января 2020

Я пытаюсь реализовать box-shadow на элементе круга, чтобы он соответствовал всей панели навигации, но я хочу сделать это только в нижней части круга. Я пытался изменить z-index и скрыть его под этой панелью навигации, но это не сработало. Here is the photo

Как я могу это сделать?

Вот код css и html: 

nav.navbar {
    font-family: var(--montserrat);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 60px;
    background-color: white;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.36);
    z-index: 10;
}

nav.navbar div.navbar-element {
    display: flex;
    height: 100%;
    width: 100%;
}
nav.navbar > div.navbar-element div.logo-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    background-color: white;
    position: relative;
    margin-top: -10px;
}

nav.navbar > div.navbar-element div.logo-wrapper img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<nav class="navbar">
    <div class="navbar-element">
        <div class="site-part">O nas</div>
        <div class="site-part">Oferta</div>
        <div class="logo">
            <div class="logo-wrapper">
                <img src="./../images/logo.jpg" alt="logo">
            </div>
        </div>
        <div class="site-part">Realizacje</div>
        <div class="site-part">Kontakt</div>
    </div>
</nav>

Ответы [ 2 ]

1 голос
/ 11 января 2020

Я бы порекомендовал просто сделать div за пределами панели навигации, добавить тень блока к этому div, установить радиус границы, чтобы сделать div кругом, а затем поместить его под lo go. В качестве примера: (Я жестко запрограммировал некоторые вещи, просто чтобы быстро собрать их вместе.) 

.box-shadow {
     width: 75px;
     height: 75px;
     border-radius: 50%;
     box-shadow: 0 15px 8px 8px rgba(0,0,0,0.36);
     position: absolute;
     top: 4%;
     left: 9%;
     z-index: -1;
     transform: translateX(-50%) translateY(-60%);
  }

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

0 голосов
/ 11 января 2020 
<style type="text/css">
nav.navbar {
    font-family: var(--montserrat);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 60px;
    background-color: white;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.36);
    z-index: 10;
}

nav.navbar div.navbar-element {
    display: flex;
    height: 100%;
    width: 100%;
}
nav.navbar > div.navbar-element div.logo-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    background-color: white;
    position: relative;
    margin-top: -10px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.16);
}

nav.navbar > div.navbar-element div.logo-wrapper img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
</style>
<nav class="navbar">
    <div class="navbar-element">
        <div class="site-part">O nas</div>
        <div class="site-part">Oferta</div>
        <div class="logo">
            <div class="logo-wrapper">
                <img src="./../images/logo.jpg" alt="logo">
            </div>
        </div>
        <div class="site-part">Realizacje</div>
        <div class="site-part">Kontakt</div>
    </div>
</nav>

Проверено и работает.

...