Box shadow to left and right side - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. box-shadow

Description

Box shadow to left and right side

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit </title> 
  <style>
body {<!--from   w ww.java2  s . c  o m-->
   background-color:Chartreuse;
}

.boxWrapper {
   height:100%;
   overflow:hidden;
   margin:31px auto;
   width:501px;
   padding:0 61px;
}

.box {
   position:relative;
   border-radius:6px;
   padding:21px;
   min-height:301px;
   background-color:yellow;
}

.box:before {
   content:'';
   position:absolute;
   width:100%;
   height:100%;
   z-index:-2;
   top:-31px;
   transform:rotate(-9deg);
   left:21px;
   background-color:blue;
   box-shadow:-41px 0 31px pink;
}

.box:after {
   content:'';
   position:absolute;
   width:100%;
   height:100%;
   z-index:-2;
   top:-31px;
   transform:rotate(9deg);
   right:21px;
   background-color:OrangeRed;
   box-shadow:41px 0 21px grey;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="boxWrapper"> 
   <div class="box"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials