NZMAI NZMAI - 3 months ago 8
CSS Question

Box-shadow does not work for section

I'm failing to achieve shadow in a section. It should look like this.

enter image description here

Do you see slight shadow under bottom border.

My code look like that:

.top-bar {
background-color:#e0f2f1;
height:50px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}


I wonder why it fails to work out. Maybe my syntax is not correct. If you need more details, please refer to my project in Codepen

Answer

Give position: relative to the top-bar

box-shadow will work only on non inherited positioned section

Here is the Demo

* {
  padding:0;
  margin:0;
}
.top-bar {
  background-color:#e0f2f1;
  height:50px;
  box-shadow: 0px 5px 14px green;
	position: relative;
}

.paragraph-container {
  margin:0 auto;
}

#top-bar-paragraph {
  text-align:center;
  margin-top:10px;
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  font-size:14px;
  opacity:0.7;
}

.project-name-class {
  background-color:white;
  height:200px;
}

.col-md-8 img {
  margin-top:30px;
  width:100%;
}
<section class="top-bar">
  <div class="container">
      <p id = "top-bar-paragraph">this is not official wikipedia page please refer to <a href="https://www.wikipedia.org/" target="_blank">wikipedia.org</a></p>
  </div>
</section>

<section class="project-name-class">
  
  <div class="container">
    
    <div class="row">
      
        <div class="col-md-8 col-md-offset-2">
          
        <img src="http://res.cloudinary.com/nzmai/image/upload/v1471508759/Wikipedia-Search_n8wfpx.png" alt="image" />
          
      </div>
      
    </div>
    
  </div>
  
  
</section>