CODEWITHSUNDEEP
htmlcssz-indexbox-shadow
BooBoo
BooBoo

Reputation: 99

box-shadow on circle element

I am trying to implement box-shadow on my circle element to match it with whole navbar, but I want to make it only on bottom of circle. I was trying to change z-index and hide it under that navbar but it didnt work. Here is the photo

How can i do it?

Here's the css and html code:

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>

Upvotes: 0

Views: 4093

Answers (2)

Jacob Barrow
Jacob Barrow

Reputation: 26

I would recommend just making a div outside of the navbar, adding a box-shadow to that div, setting the border-radius to make the div a circle, and then positioning it underneath the logo. As an example: (I hard-coded some stuff just to throw this together quickly.)

.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%);
  }

The wonderful thing about CSS is that you can fiddle to your heart's content, until it is exactly as you'd like it.

Upvotes: 1

rajat.gite
rajat.gite

Reputation: 446

<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>

Tested and works.

Upvotes: 0

Related Questions