CODEWITHSUNDEEP
cssbox-shadow
Jafle
Jafle

Reputation: 11

Box shadow doesn't appear

I've been all over this site for some solutions to my issue but nothing has seemed to work. Referring to This JSFiddle I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="Bespoke">
    </head>
    <body>


<div class="grid">

<!-------- Row 1 ---------->


          <header>
          </header>


<!-------- Row 2 ---------->


           <article>
           </article>


<!-------- Row 3 ---------->   

           <blank>
           </blank>

<!-------- Row 4 ----------> 

           <subtitle>
           </subtitle>

<!-------- Row 5 ---------->   

           <blank2 class>
           </blank2>


<!-------- Row 5 ---------->   

           <footer>
           </footer>



</div>
    </body>
</html>

.grid {
    display: grid;
    grid-template-columns:auto;
    grid-gap: 0em;
    width: 100vw;
    height: 10vw;
}


}

@media all and (max-width: 100vw) {
  aside,
  article {

  }
}


body {
    margin: 0 auto;
    max-width: 100vw;
    background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;

}


header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(175, 165, 255, 0);
}

article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    text-align: center;
    background: rgba(0, 0, 0, 0);

}

blank {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(205, 225, 105, 0);
    box-shadow(10px 10px 30px #000000);    
    z-index: 10;
}

subtitle {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #1e1e1e;
    font-size: max(7vw, 20px);
    box-shadow(-10px -10px 30px #000000);         
    z-index: 9;

}

blank2 {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #fffff7;
    z-index: 8;

}



footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 7vh;
    text-align: center;
    background-color: #fffff7;


}

Upvotes: 0

Views: 861

Answers (2)

Zachary Haber
Zachary Haber

Reputation: 11047

Your issue is that you had the syntax of the box-shadow CSS wrong

You had it like: box-shadow(10px 10px 30px #000000);

Where it needs to be: box-shadow: 10px 10px 30px #000000;

If CSS runs into properties it doesn't understand, then it just silently ignores it and considers it an invalid property. It doesn't throw an error of any kind.

In Chrome's dev tools, this is what an invalid property looks like: There is a warning sign that indicates that it's an unknown property name.

enter image description here

The syntax highlighting on the jsfiddle also shows the issue as it isn't showing the correct colors enter image description here

Upvotes: 2

Filonenko Andrii
Filonenko Andrii

Reputation: 21

Change box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000;

Upvotes: 1

Related Questions