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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Cross Browser Drop Shadow for all side in IE/FF/Crome/Safari Browser </title> </head> <body> <div class="shadow-bringer shadow"> HI ! Welcome to EngiGuide. </div> </body> </html>
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);
}
Subscribe to Free EngiGuide Latest Update SMS Alerts.
