arnoldc
6/23/2013 - 9:54 AM

css: Skewed Shadow using CSS3

css: Skewed Shadow using CSS3

skewed-shadow.css
content_copyfile_download
.box {
     position: relative;
     -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
     -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
          box-shadow: 1px 2px 4px rgba(0,0,0,.5);
     padding: 10px;
     background: white; 
     width:200px;
}
    
.box img {
     max-width: 100%;
     border: 1px inset #8a4419;
}

.box:after {
     content: '';
     position: absolute;
     width: 50%;
     height: 40px;
     bottom: 20px;
     right: 90px;   
     z-index: -1;
     -webkit-transform: skew(-40deg);
     -moz-transform: skew(-40deg);
     transform: skew(-40deg);    
     -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
             box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);     
}
skewed-shadow-demo.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
   
<div class="box">
     <img src="http://4.bp.blogspot.com/_5WQYppSBbNI/TQ1I0wGtlhI/AAAAAAAAADo/hueUot8XpjA/s1600/cute-puppy.jpg" alt="" />
</div>
  
</body>
</html>