css shadows - images and boxes
As we said in a previous post, we’ll try to bring here some resources related to css shadows applied to images or boxes.
“… in addition to just the plain old img element, an enclosing div plus four additional divs to handle the corners”.
This technique uses an outer div for images, or 2 for text. For text basically is building a box around text, then is treated as block element - like image.
The author of this one, make uses of 3 overlapped boxes, with different backgrounds.It has Two methods, one pure css, one using images.
Also it provides a solution for text-shadow.
yDSF - Robust CSS Drop Shadows
from the site: “yDSF is comprised of some lightweight structural (non-semantic) XHTML markup and a few CSS classes.”
Here is presented a way to allow multiple block level elements under same dropshadow box. It separate the border and the shadow in 2 separate wrappers, and use position:relative.
Flexible drop shadowed boxes using CSS
This one uses 2 divs, the holder, with background set to shadow image(gif or png), and a wrapper div, inside the holder, positioned relative, with some negative margins.
Those above are pure css techniques. In a following post, we’ll try to add some resources that use javascript for this.
Update
Cssnewbie - 5 CSSriffic Treatments to Make Your Images Stand Out
added in comment#2 his technique.
The markup get another wrapping div, and can be used with css border or a png image for browsers that allows alpha channel.
wow…this is great and useful for every one. Thanks for sharing it!
I posted different way of making CSS drop shadows on Monday, in a post titled 5 CSSriffic Treatments to Make Your Images Stand Out. It’s similar to the method used in the A List Apart article (one extra div), except my method makes it a little easier to vary the size/depth of your shadow on the fly.
I’d be honored if you’d check it out!
@Cssnewbie …looks pretty nice, i added this to resources. Thank you for your submission.
Thanks for the add. :)