Discuss: CSS Drop Shadows
by Sergio Villarreal
- Editorial Comments
2 ok ok.
I was looking at the code used for other block element. It’s cool the solution you have got. But it seems like it should not be that hard. Especially considering how easy it is with images.
Now, I am used to IE being strange with negative margins. It doesn’t like block elements being moved to ‘appear’ outside another block element. It will stop the inner element from going back further that the outer block element, and will force the outer block element to increase in width to compensate for the width of the inner block element. I have seen this before. And what I did for this bug was drop the negative margin idea, and start using posistion:relative, with top: -6px; and left: -6px;.
I gave it a go (http://wubbleyew.com/tests/dropshadows.htm) and it works great in IE, but for some reason falls over with firefox.
What’s wrong with it? In my head it should logically work. But firefox seems to add extra padding about and below the floating div.
Any ideas people?
Phil Baines
posted at 06:16 am on February 27, 2004 by Phil Baines
3 A suggested improvement
This is a fantastic lightweight technique for generating the effect, but there’s room for a bit of improvement — the “ends” of the drop shadow (in the example used, the top and left “arms” of the drop shadow) terminate with a sharp edge, rather than a soft blur as a “real” drop shadow would. Also, as set up, this only works for drop shadows in a particular direction (to the bottom right). Fortunately, these limitations aren’t inherent to the CSS, but only to the specific shadow image used, which is itself truncated and set up for bottom right only.
A more aesthetic, and more general, approach would be to create the drop shadow image file with a symmetrical shadow effect all around its edges, essentially, a grey rectangle with all its edges feathered. Doing this would get rid of the truncated end effect, and would also allow, by modifying only the CSS, shadows in directions other than bottom right.
posted at 06:35 am on February 27, 2004 by Michael Gemar
4 one more step.
Ok, iv made another step forward, and to a point, it works (kinda). with a great deal less code that we already have.
check http://wubbleyew.com/tests/dropshadows.htm TEST 2!
The problem I am getting is that the ‘.innerbox’ seems to be geting more height, above and below the text than we would want.
any solutions?
Phil Baines.
posted at 06:35 am on February 27, 2004 by Phil Baines
5 Shadows without images?
Possible to do this without using background images?
posted at 06:43 am on February 27, 2004 by Lim Chee Aun
6 Re: Shadows without images?
With safari you can use the CSS2 [url=“http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props”]text-shadow[/url] property for text (text-shadow: black 0px 0px 5px). There is also a proposed property, box-shadow, in CSS3 for a drop-shadows.
We will just have to use this method from the article until then.
posted at 07:09 am on February 27, 2004 by Blakems
7 all done
I have played aroudn with shadows on block elements for a bit now. I think I have it all sorted now, and much simpler than the articles version (No disrepect to the article – its great either way).
Check it out: http://wubbleyew.com/tests/dropshadows.htm
posted at 07:29 am on February 27, 2004 by Phil Baines
8 Re: Re: Shadows without images?
Blakems; I have just been told that text-shadow is going to removed from CSS 2.1 onwards. just so you know.
posted at 07:33 am on February 27, 2004 by Phil Baines
9 Re: Shadows without images?
I wonder, why not just use the borders of the image, and the container of the image, to simulate the shadows?
posted at 07:39 am on February 27, 2004 by Lim Chee Aun
10 Floats need an explicit width.
“We float the div to avoid having to specify its size (otherwise it will take up all available horizontal space).”
Tut tut, this is a hack. It will render in all browsers incorrectly. WebGraphics pointed this out a while back. http://web-graphics.com/mtarchive/001111.php
posted at 07:40 am on February 27, 2004 by David House
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 haha!
I was just readin this on Dunstans site this morning! nice one!
Now every site to appear on the css-vault with be full of even more drop shadows!
good technique!
check out clagnut.org for another version of this.
posted at 05:02 am on February 27, 2004 by Phil Baines