CSS: create white glow around image
How can I create a white glow as the border of an unknown size image?
Use simple CSS3 (not supported in IE<9)
img
{
box-shadow: 0px 0px 5px #fff;
}
This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)
If you're worried about the users that don't have the latest versions of their browsers, use this:
img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}
For IE you can use a glow filter (not sure which browsers support it)
img
{
filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}
Play with the settings to see what suits you :)
Works like a charm!
.imageClass {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
Voila! That's it! Obviously this won't work in ie, but who cares...
@tamir; you cna do it with css3 property.
img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2;
}
check the fiddle http://jsfiddle.net/XUC5q/1/ & your can generate from here http://css3generator.com/
If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers & you can use filter
as kyle said like this
filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')
you can generate your filter from here http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
Depends on what your target browsers are. In newer ones it's as simple as:
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
For older browsers you have to implement workarounds, e.g., based on this example, but you will most probably need extra mark-up.
late to the party here; however just wanted to add a bit of extra fun..
box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;
will give you a nice looking padded in image. The padding will give you a simulated white border (or whatever border you have set). the rgba is just allowing you to do an opicity on the particular color; 0,0,0 being black. You could just as easily use any other RGB color.
Hope this helps someone!