Capture

Cross Browser Drop Shadow for all side

One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS! Web browser support Believe me or not, but all of these web browsers we can offer shadows with CSS: Firefox 3.5+ Safari [...]

One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS!

Web browser support

Believe me or not, but all of these web browsers we can offer shadows with CSS:

  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Opera 10.50
  • Internet Explorer 5.5

index.html










HI ! Welcome to EngiGuide.

style.css

.shadow-bringer {
    background: none repeat scroll 0 0 #FFFFA2;
    height: 100px;
    margin: 20px auto;
    padding: 5px;
    width: 100px;
}
.shadow {
    box-shadow: 0 0 8px #CCCCCC;
	-moz-box-shadow: 0px 0px 8px #ccc;/* for mozila*/
-webkit-box-shadow: 0px 0px 8px #ccc;
	/* For IE upto 5.5 not for 9*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=45, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=225, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=315, Strength=3);
}

DemoDownload

No related posts.