Transparent CSS drop shadows with rounded corners
There are a lot of techniques to make drop shadows with CSS, but I've failed to find one that give me both alpha transparency and rounded blurred corners.
The two techniques that come closer to that goal are
the one
presented by Alessandro, that lacks rounded corners, and the one
called
:befTer Drop Shadow, which doesn't support alpha transparency
because it works by overlaying differents images to get the corners
of the shadow. The tecnique presented here is based on those two,
using relative positioning in a floated container and using the
:before and :after pseudo elements.
Here you can get some examples.
The structure
Every technique presented requires the addition of an extra
<div> surrounding the element with the shadow,
and this is not an exception. The markup structure needed is the
following:
<div class="shadow">
<img src="ball.jpg"/>
</div>This will float the <div>, so that it doesn't
extend to the whole page width, wrapping perfectly the contained
element. The background of this <div> is set to the
bottom-right corner of the shadow image, and the contained element
is shifted in the top-left direction using relative positioning.
The two other corners are created with the :before
and :after pseudo elements: the fist one is used to
display the top-right corner, while the latter is used for the
bottom-left one.
Results and examples
The result is a nice drop shadow under an image or any block element.
Overriding the top and the left properties
of the contained element it is possible to raise or lower the image
over the shadow. There is a page with some examples of
images and other elements styled in different ways.
Limitations and bugs
For the CSS to work with images, their containing <div> should be floated, otherwise it will span the whole page width.
This restriction does not apply to paragraph, which can be successfully given a shadow without being floated. Doing so, as shown in the examples section, uncover a bug in Mozilla (tested with the 1.7.10-1 Debian package) which will draw in a bad way the upper-right corner of the shadow for non-floated elements.
A workaround for this problem has been at the end of the stylesheet, but it is disabled as I use only floated elements and I don't want to add cruft to the stylesheet (it's really a Mozilla bug). If you need this workaround you have only to uncomment the last rule.
Another (small) limitation is that you can't lower arbitrarly the shadow (more than 39px, as the default is 9px under the element), or use it with very small elements (with an height smaller than 30px).
If you have these needs change the margin-top and the height properties in the div.shadow:after rule, using more than 30px in the first case and less in the second one (possibly putting it to 0, if you don't need to lower the shadow).
The value of 30px I've used is only a tradeoff between the possibility of lowering the shadow and using them with small elements.
The other numbers used for margins and positioning are a consequency of the image used as the shadow: because the one used here has corners with a 9px radius, if you need a different radius you have to change a lot of numbers.
If you have other questions, feel free to ask me.