11 thanks

thank you so much for this. I love drop shadows! also css.

posted at 10:15 am on February 27, 2004 by davelave

12 A little extra..

My own ideas of CSS drop shadows.. inclduing text shadows, not friendly to IE.
http://phoenity.com/newtedge/drop_shadow/

posted at 10:27 am on February 27, 2004 by Lim Chee Aun

13 Some responses

Phil: Your approach seems great! Have you tried it in browsers other than IE and Firefox? (and in earlier versions of Explorer).

Michael: A feathered rectangle wouldn’t provide the smooth border on top and left of the shadow. The image is essentially clipped at those points. A way to do that would be to resize the background to the size of the div, but that would require extra markup and may not look good. The full shadow idea is good. I thought about that but for the article I wanted to keep it simple, so I didn’t go deeper into the possibilities.

Lim: That wouldn’t give you a smooth shadow. It would be a one colour, rather drab thing I believe.

David: I know. I’m ashamed =). We could add the inline-block property (mentioned in one of the comments at Web Graphics for correctness.

posted at 11:20 am on February 27, 2004 by Sergio

14 more responses

Phil:
Nice work. I had the same idea as you (using positioning) while reading the article and at first expected that as the second solution. However, I do see one minor problem. There is no way to impliment the solution I suggest below. However, your method does allow a change to the background color without having to also change the color of the ‘Fake Offset Image’ as Sergio calls it. Hey, why not demonstrate that in your test page?

Michael:
I also noticed, and didn’t care for the sharp edges on the top and left. Using PNG’s opacacy (spelling?) you could have the edge of the ‘Fake Offset Image’ fade to transparent rather that the sharp edge used in the example. If done correctly, the edges would appear to fade into the background as a real shadow does. Then use the same technique to replace the PNG with the GIF in IE. That way the only difference between IE and other browsers is that sharp edge. A minor difference that can easily be overlooked and will never be noticed by most.

posted at 11:48 am on February 27, 2004 by waylman

15 responses

Sergio: nope. i havnt got any other browsers installed on my home machine at the moment. its a new build. if anyone wants to test it in other browsers, give it a go, and let me know (phil#gnasp.com replace(#,@) :) )

waylman: yeh, I might update it later tonight to have a few different background colours.

posted at 12:44 pm on February 27, 2004 by Phil Baines

16 Avoiding to specify a width?

“We float the div to avoid having to specify its size”

And here I thought floats required a width.
:-/
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
(Second para)

posted at 01:32 pm on February 27, 2004 by Emma

17 floats and size

CSS2.1 fixes that, among other issues (it is more likely that browsers support CSS2.1 than 2.0).

posted at 01:58 pm on February 27, 2004 by Anne

18 A simple question (again)

(I apologize up front, I posted this on the other article here as well by mistake, but perhaps it pertains there as well too.)

Perhaps I missed it, or don’t understand the concept fully, but wouldn’t creating a GIF as large as some of the ones discussed here cause problems with page loading times and all?

Also, I just want say thanks for all the great info here, from both the article authors and the other folks responding to them. I have learned more here than in any class or book!

Thanks.

posted at 02:09 pm on February 27, 2004 by Critter

19 Re: A simple question (again)

Critter:
That may be true but background images are the last thing donwloaded (at least last time I checked) So the content will display quickly and the user could begin reading before the images finish downloading. Purhaps you have noticed this on this site when using a slow (dialup) connection. Go ahead, clear your cache and try it. The text should appear over the gray(ish) backgroung and then the white will appear behind it.

posted at 02:46 pm on February 27, 2004 by waylman

20 GIF loading times

Critter: The images used are really small in file size. The GIF is 4.26 kb in all. The actual image size doesn’t affect this much because of the way GIF stores information (making the image 1600×1600 would hardly increase file size). And, as has been pointed out, backgrounds are the last thing loaded, so that shouldn’t be a worry.

posted at 03:19 pm on February 27, 2004 by Sergio