TechQA.

Box shadow not working properly

1.8k views Asked by At

Although I have ask the same question two times but I'm not getting any proper solution for this.I dont know what is wrong with my code. so here I'm posting the whole code (I know its against the community standard but seriously I want a solution for my problem and I request you guys to have a look at this and please keep patience) I'm new to web development field, please help me.

My problem is that I need to apply box shadow to #main-content-area to its top side and as well as left and right side (50% from top side)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #top-bar{
background-color:black;
color:white;
}

#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{

background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}

#footer{
background-color:green;
position:relative;
}


  </style>
</head>
<body>
    <div class="container-fluid">
 <div class="row" id="top-bar">
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4" >
   <h4> Some links </h4>
  </div>
 </div>
 <div class="row">
  <div class="col-sm-2">
  </div>
  <div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
  </div>
  <div class="col-sm-4"  id="link-bar">
  </div>
  <div class="col-sm-2">
  </div>
 </div>
 <div class="row">
  <div class="col-sm-12" id="image">
   <img src="header.png" class="img-responsive"/>
  </div>
 </div>
 <div class="wrapper">
  <div class="line"></div>
  <div class="row" >
   <div class="col-sm-2">
   </div>
   <div class="col-sm-8" id="main-content-area">
    <div class="col-sm-12" style="background-color:green">
    <h3>Welcome </h3>
    </div>
    <div class="row">
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    </div>
    <div class="row">
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
    </div>
   </div>
   <div class="halfshadow"></div>
   <div class="col-sm-2" >
   </div>
  </div>
 </div>
 <div class="row" id="footer">
  <div class="col-sm-12">
   <div class="col-sm-6">
    <h4>some text........</h4>
   </div>
   <div class="col-sm-6">
   < h4>some link </h4>
   </div>
  </div>
 </div>     
</div>
</body>
</html>

html css box-shadow
Original Q&A
5

There are 5 answers

0
YSuraj On 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #top-bar{
background-color:black;
color:white;
}

#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{

background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);  
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}

#footer{
background-color:green;
position:relative;
}


  </style>
</head>
<body>
    <div class="container-fluid">
 <div class="row" id="top-bar">
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4" >
   <h4> Some links </h4>
  </div>
 </div>
 <div class="row">
  <div class="col-sm-2">
  </div>
  <div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
  </div>
  <div class="col-sm-4"  id="link-bar">
  </div>
  <div class="col-sm-2">
  </div>
 </div>
 <div class="row">
  <div class="col-sm-12" id="image">
   <img src="header.png" class="img-responsive"/>
  </div>
 </div>
 <div class="wrapper">
  <div class="line"></div>
  <div class="row" >
   <div class="col-sm-2">
   </div>
   <div class="col-sm-8" id="main-content-area">
    <div class="col-sm-12" style="background-color:green">
    <h3>Welcome </h3>
    </div>
    <div class="row">
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    <div class="col-sm-4">
     <img src="me.jpg" class="img-responsive"/>
    </div>
    </div>
    <div class="row">
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
     <div class="col-sm-4">
      <img src="me.jpg" class="img-responsive"/>
     </div>
    </div>
   </div>
   <div class="halfshadow"></div>
   <div class="col-sm-2" >
   </div>
  </div>
 </div>
 <div class="row" id="footer">
  <div class="col-sm-12">
   <div class="col-sm-6">
    <h4>some text........</h4>
   </div>
   <div class="col-sm-6">
   < h4>some link </h4>
   </div>
  </div>
 </div>     
</div>
</body>
</html>

1
Prasath V On

It won't show. Because box shadow to the div element was empty. I just add some text and margin-top

#top-bar{
background-color:black;
color:white;
}

#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{

background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
  margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}

#footer{
background-color:green;
position:relative;
}
<div class="container-fluid">
    <div class="row" id="top-bar">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4" >
            <h4> Some links </h4>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
        </div>
        <div class="col-sm-4"  id="link-bar">
        </div>
        <div class="col-sm-2">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" id="image">
            <img src="header.png" class="img-responsive"/>
        </div>
    </div>
    <div class="wrapper">
        <div class="line"></div>
        <div class="row" >
            <div class="col-sm-2">
            </div>
            <div class="col-sm-8" id="main-content-area">
                <div class="col-sm-12" style="background-color:green">
                <h3>Welcome </h3>
                </div>
                <div class="row">
                <div class="col-sm-4">
                    <img src="me.jpg" class="img-responsive"/>
                </div>
                <div class="col-sm-4">
                    <img src="me.jpg" class="img-responsive"/>
                </div>
                <div class="col-sm-4">
                    <img src="me.jpg" class="img-responsive"/>
                </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <img src="me.jpg" class="img-responsive"/>
                    </div>
                    <div class="col-sm-4">
                        <img src="me.jpg" class="img-responsive"/>
                    </div>
                    <div class="col-sm-4">
                        <img src="me.jpg" class="img-responsive"/>
                    </div>
                </div>
            </div>
            <div class="halfshadow">Shadow content</div>
            <div class="col-sm-2" >
            </div>
        </div>
    </div>
    <div class="row" id="footer">
        <div class="col-sm-12">
            <div class="col-sm-6">
                <h4>some text........</h4>
            </div>
            <div class="col-sm-6">
            <   h4>some link </h4>
            </div>
        </div>
    </div>  


</div>

4
Nit On 
#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}

or you can go for it also

#main-content-area
 {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}
2
Dev MK On

Explain box shadow for every thing here in my example the values are: Horizontal Length:1px Vertical Length:4px Blur Radius:16px Spread Radius:15px

The CSS: box-shadow: 1px 4px 16px 15px rgba(82,43,136,1);

0
kind user On

If you want to apply the box-shadow property to your #main-content-area div, you have to basically... add this property into #main-content-area div in your css file.

It will apply the shadow effect on left, right and bottom side:

box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);

If you want the shadow to appear only on bottom and right side, use:

box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);

Codepen: http://codepen.io/anon/pen/VmoNWJ

Related Questions in HTML

Related Questions in CSS

Related Questions in BOX-SHADOW

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions