Drop Shadows adds extra glare to any design. They can be easily accomplished in any graphic editor, however its a little tricky in web programming. In this post I’ll walk you through various ways in which you can add shadows to images without any extra markup used.
In all cases i’ll use the same HTML code for showing Image.
CSS 3
In the latest public working draft we have a box-shadow property. This property can be used to draw a drop-shadow for a CSS box.
The CSS for the above example is :
.thumbnail{
padding:4px;
border:1px solid #DDD;
-moz-box-shadow: 5px 5px 7px #999;
box-shadow: 5px 5px 7px #999;
-webkit-box-shadow: 5px 5px 7px #999;
}
Good naa !!!
But the problem with this implementation is that it doesn’t work in IE. The Box Shadow property is supported by only :
+ Firefox 3.5
+ Safari (3.2.1)
+ Google Chrome 2
So its up to you whether you want to ignore IE users or not.
Now lets see other approach.
Using Background Shadow Image
In this approach we’ll be using an extra image in background that will give shadow effect. This technique is also illustrated here “CSS Drop Shadows“.
In this case the CSS used is:
.thumbnail{
width:250px;
height:250px;
padding:4px 14px 14px 4px;
background:transparent url('image-bg.png') no-repeat 0 0;
}
Some other implementations are
Hope this article will give more ideas for similar implementation.
Happy Coding!!!!
Thank you for this post. It is very good effect.
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=150, Color=’#c7c7c7′)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=’#c7c7c7′);
border:0;
[...] Sombra en las imágenes [...]
[...] CSS gradient text effect • CSS boxshadow experiments • Understanding CSS3 gradients • Drop-shadow in images • Text shadow • CSS text shadows and background [...]
[...] Source Demo [...]
[...] • CSS gradient text effect • CSS boxshadow experiments • Understanding CSS3 gradients • Drop-shadow in images • Text shadow • CSS text shadows and background [...]