Advanced Search

Return to Snippet

Revision: 45734
at May 6, 2011 16:41 by kopfaction
Initial Code 
<!DOCTYPE html>
 
 
<html>
<head>
<style>
.box{
    width:200px;
    height:100px;
 
}
 
.drop-shadow {
    position:relative;
    float:left;
    width:40%;    
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}
 
.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}
 
 
.lifted {
    -moz-border-radius:4px; 
    border-radius:4px;
}
 
.lifted:before,
.lifted:after { 
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);    
    -moz-transform:rotate(-3deg);   
    -ms-transform:rotate(-3deg);   
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
 
.lifted:after {
    right:10px; 
    left:auto;
    -webkit-transform:rotate(3deg);   
    -moz-transform:rotate(3deg);  
    -ms-transform:rotate(3deg);  
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}
 
</style>
</head>
<body>
 
    <div class="box drop-shadow lifted"></div>
 
</body>
</html>
Initial URL 
http://html5snippets.com/snippets/10-css-lifted-corner-drop-shadow#
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS Lifted corner Drop Shadow

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
html5

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML