Making 3D Bow Shadow Without using Images Just Full CSS3
http://www.free-premiumhtml.tk
Making 3D Bow Shadow Without using Images Just Full CSS3
http://www.free-premiumhtml.tk
<div class="drop-shadow"> | |
Box Shadow <a href="http://www.free-premiumhtml.tk">Free Premium HTML</a> | |
</div> |
.drop-shadow { | |
position:relative; | |
width:500px; | |
height: 150px; | |
background :#e3e3e3; | |
color : rgba(0,0,0,.4); | |
text-align : center; | |
line-height : 150px; | |
margin : 0 auto; | |
color : rgba(0,0,0,.5); | |
font-family : Tahoma; | |
text-shadow : 0 1px 0 #fff; | |
} | |
.drop-shadow a{ | |
text-decoration : none; | |
color : #999999; | |
font-family : Tahoma; | |
} | |
.drop-shadow:before, | |
.drop-shadow:after { | |
content:""; | |
position:absolute; | |
z-index:-1; | |
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); | |
-o-transform:rotate(-3deg); | |
transform:rotate(-3deg); | |
} | |
.drop-shadow:after{ | |
right:10px; | |
left:auto; | |
-webkit-transform:rotate(3deg); | |
-moz-transform:rotate(3deg); | |
-o-transform:rotate(3deg); | |
transform:rotate(3deg); | |
} |