Copy & paste the code below to embed this comment.
Lee Fastenau
… but I wasn’t satisfied by the answer I read regarding why CSS shadows are preferable over manipulating the images directly.
If you think of your images as content, then it’s easier to understand the advantages of doing this with CSS. As the look & feel of your site changes, so may your taste in image treatments. By relying on CSS to handle these treatments, you aren’t forced to re-process all of your site’s images.
On the downside, this particular treatment requires some rather unintuitive nesting of the <image> tag within two levels of <div> tags. While the exercise of “massaging” HTML markup to make it stylesheet-friendly has been more or less accepted by designers, we must also accept that it deviates from the general philosophy behind CSS.
Opera 7.0 PC doesn’t render the drop shadows in the last example image the cat) – This is probably triggered by the “float:left” property in the .alpha-shadow div {} declaration.
Removing the float should fix it.
Then the IE 6 will probably not show the left and top right fuzzy edges anymore when the float:left has been removed. Including the float:left into the special ie.css with the filter style will work.
I have been following this discussion for several days now, and I am still confused about the original idea.
I will have to repeat myself:
1. PNG’s alpha transparency is supposed to allow us grater flexibility in positioning images over anything else, while maintaining simplicity of markup.
2. The situation with IE support can be resolved by many means (I still like the elegance of Aaron’s “Sleight” JavaScript behavior), here is an example:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-png.html
3. If we still have to match background color with GIFs, we could achieve the exact same results with a lot less effort by arranging elements in a table (yes, table – last time I checked it was still a legitimate HTML element – and, yes, it does support CSS formatting, so the separation of content and presentation shouldn’t be a problem):
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
Look… no JavaScript, no conditional comments, no separate stylesheet… I can go on.
Please, explain to me, somebody, why we feel the need to scratch our left ear with our right foot? When nestind empty (therefore, not content-bearing, therefore – presentation-specific, so where is a separation?) DIVs became a better way of design than saving the coding efforts and assuring better browser compatibility by using (dreadful) table, which was created to retain rows-columns positioning by design, and perfectly works?
Forgive me for being fossil, I just want to understand…
iG.STUDiO: This particular approach was intended to minimize markup and maximize control of the effect. Here are some of the motivations behind my decisions:
- I don’t want to resize an image with the scale control of the AlphaImageLoader filter. Mainly because it does an incredibly shoddy job (yes, I am very anal in design matters). Pixel perfect shadows is where it’s at for me.
– I wanted good enough results for IE5.
– I had already done another article on using one <div> to achieve a similar effect.
– I use this technique all the time in my site ( http://overcaffeinated.net ), inside my posts. I don’t want to put a table in there, and two <div>‘s are acceptable to me.
– I dislike rewriting html documents with javascript. It’s perfectly valid, but it doesn’t rock my boat.
I don’t think this particular technique amounts to waving a dead chicken over the code, and I find it interesting how many people are complaining about it like it’s a signal of the apocalypse.
There is a reason this is a followup article. This variant may not be for everyone, but people who like their shadows fuzzy and their markup clean may have an interest in it.
“Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.”
That’s great and all, so is this method. But isn’t the whole point of sites like ALA to promote standards? What’s the point of a hack that breaks standards? Even if it is for IE… whose lax PNG support also irritates me!
I should stop making comments for the simple sake of not offending anybody. Please… I didn’t mean to, I just wanted an explanation, sorry, if it sounded a bit critical (I like your website… :) :) :) ). And I didn’t diss your code, Sergio, I merely asked how and why did you arrive to this point.
I think, that was Igor Stravinsky, who said once something like this (very loose quote): “If I had no limits to my resources, I would probably ended up not writing anything”.
I think, I see it now. You don’t want tables, so you didn’t use them. I must admit (thanks to a slow day at work), this could really be fun:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-div-gif.html
(for some reason – poor CSS support in this particular part? – IE5.2 for Mac breaks the display, but who cares, it’s dead anyway… It works in IE6 Win, Firefox, and Safari, though)
Once again, sorry, if my comments sounded apocalyptic…
It’s all good. Keep up the good work.
PS. The table-based markup is still shorter. Not cleaner, oh, no, just shorter…
Copy & paste the code below to embed this comment.
CSS
I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.
Copy & paste the code below to embed this comment.
John Farrell
We get a suprisingly large chunk of Netscape 6.0 visitors to our sties. My site and your dropshadow example both fail to show the shadows in Netscape 6.0. I don’t know if this is related but the “Acknowledgements” text is positioned on top of the Free Cat picture.
This drop shadow method works well in all other browsers and let’s out content writers quickly add some style to a otherwise flat page. Thanks for the help.
I don’t understand why all the backlash against this technique. It’s give us the flexability of applying drop shadows we need wherever we want without resorting to complex table designs. Our graphic designers don’t have to waste time making two verisons of every image, and our content writers love the new trick they can pull off. It’s valid, doesn’t use javascript, and isn’t to size intensive. Kudos ALA!
Copy & paste the code below to embed this comment.
Andrew Watson
Quote:
“I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.
I’ll wait until CSS 3 is more widely adopted.”
It could be useful for a number of reasons….
i use it for a content management system where teh client can upload (varying sized)pics to his site, but he hasn’t the software or knowledge to give them drop shadows,
this allows him to keep the pretty wee drop shadows that he so dearly wanted…
John, I had the same problem with Opera 7.0 but fixed it with “br clear=all” and “clear:both” properties for several HTML elements. In fact I don’t have the Netscape 6 on my machine but my photo site should work on it. You might check it and then have a look at the source.
I can’t get this to work under xhtml strict or 1.1 – I get an ugly lower padding for the inner div… if I do padding: 0px 5px 5px 0px; the Safari and Firefox don’t display properly… if I do padding: 0px 5px 0px 0px; then IE doesn’t display properly… any ideas?
OK, I wrote too soon: the shadows work fine in strict xhtml if you add the following to the img css: vertical-align:bottom; (leaving padding: 0px 5px 5px 0px; for the div). I actually discovered the answer on http://phoenity.com/tests/fuzzy_shadows_anchor.html – thanks to Lim Chee Aun who was the only person I found to implement a version of Sergio’s method in STRICT rather than transitional…!!!
Copy & paste the code below to embed this comment.
Les
Great article.
It seems that I’m suffering the same as Mr Schrab (http://www.alistapart.com/discuss/cssdrop2/#c7860) – I’ve got a css defined nav bar from an unordered list, but as soon as I pop in the DX code the links stop working in IE!
80 Reader Comments
Back to the Articlehangon
hilarious isn’t it?
:D
Phil Baines
Well done on the article, and thanks for the name drop. I especially like the conditional comments thing.
Now, how about another comic strip?
jot.be
Nice work and thanks for the acknowledgements. On my site I have another working example based on the new article:
http://jotbe-fx.de/daily/photos/
Nate
http://www.alistapart.com/discuss/cssdrop2/5/#c7906
apartness said:
>> ALA forum says, at the top of every forum page:
…
So, what’s it doing at the top, when the text entry field is at the bottom? How about it right next to the “Add your comment:” line?
Lee Fastenau
… but I wasn’t satisfied by the answer I read regarding why CSS shadows are preferable over manipulating the images directly.
If you think of your images as content, then it’s easier to understand the advantages of doing this with CSS. As the look & feel of your site changes, so may your taste in image treatments. By relying on CSS to handle these treatments, you aren’t forced to re-process all of your site’s images.
On the downside, this particular treatment requires some rather unintuitive nesting of the <image> tag within two levels of <div> tags. While the exercise of “massaging” HTML markup to make it stylesheet-friendly has been more or less accepted by designers, we must also accept that it deviates from the general philosophy behind CSS.
jot.be/Jan
Opera 7.0 PC doesn’t render the drop shadows in the last example image the cat) – This is probably triggered by the “float:left” property in the .alpha-shadow div {} declaration.
Removing the float should fix it.
jot.be/Jan
Then the IE 6 will probably not show the left and top right fuzzy edges anymore when the float:left has been removed. Including the float:left into the special ie.css with the filter style will work.
Dante-Cubed
The good news: there is a CSS3 standardized method for this (the box-shadow property)
The Bad News: no browser supports it yet
iG.STUDiO
I have been following this discussion for several days now, and I am still confused about the original idea.
I will have to repeat myself:
1. PNG’s alpha transparency is supposed to allow us grater flexibility in positioning images over anything else, while maintaining simplicity of markup.
2. The situation with IE support can be resolved by many means (I still like the elegance of Aaron’s “Sleight” JavaScript behavior), here is an example:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-png.html
3. If we still have to match background color with GIFs, we could achieve the exact same results with a lot less effort by arranging elements in a table (yes, table – last time I checked it was still a legitimate HTML element – and, yes, it does support CSS formatting, so the separation of content and presentation shouldn’t be a problem):
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
Look… no JavaScript, no conditional comments, no separate stylesheet… I can go on.
Please, explain to me, somebody, why we feel the need to scratch our left ear with our right foot? When nestind empty (therefore, not content-bearing, therefore – presentation-specific, so where is a separation?) DIVs became a better way of design than saving the coding efforts and assuring better browser compatibility by using (dreadful) table, which was created to retain rows-columns positioning by design, and perfectly works?
Forgive me for being fossil, I just want to understand…
sergio
iG.STUDiO: This particular approach was intended to minimize markup and maximize control of the effect. Here are some of the motivations behind my decisions:
- I don’t want to resize an image with the scale control of the AlphaImageLoader filter. Mainly because it does an incredibly shoddy job (yes, I am very anal in design matters). Pixel perfect shadows is where it’s at for me.
– I wanted good enough results for IE5.
– I had already done another article on using one <div> to achieve a similar effect.
– I use this technique all the time in my site ( http://overcaffeinated.net ), inside my posts. I don’t want to put a table in there, and two <div>‘s are acceptable to me.
– I dislike rewriting html documents with javascript. It’s perfectly valid, but it doesn’t rock my boat.
I don’t think this particular technique amounts to waving a dead chicken over the code, and I find it interesting how many people are complaining about it like it’s a signal of the apocalypse.
There is a reason this is a followup article. This variant may not be for everyone, but people who like their shadows fuzzy and their markup clean may have an interest in it.
sergio
I forgot: The technique doesn’t use javascript, and it degrades well. I like to write things that don’t make lynx/w3m/cellphones go berserk.
James
“Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.”
That’s great and all, so is this method. But isn’t the whole point of sites like ALA to promote standards? What’s the point of a hack that breaks standards? Even if it is for IE… whose lax PNG support also irritates me!
Dante
Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.
Dante
Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.
iG.STUDiO
I should stop making comments for the simple sake of not offending anybody. Please… I didn’t mean to, I just wanted an explanation, sorry, if it sounded a bit critical (I like your website… :) :) :) ). And I didn’t diss your code, Sergio, I merely asked how and why did you arrive to this point.
I think, that was Igor Stravinsky, who said once something like this (very loose quote): “If I had no limits to my resources, I would probably ended up not writing anything”.
I think, I see it now. You don’t want tables, so you didn’t use them. I must admit (thanks to a slow day at work), this could really be fun:
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-div-gif.html
(for some reason – poor CSS support in this particular part? – IE5.2 for Mac breaks the display, but who cares, it’s dead anyway… It works in IE6 Win, Firefox, and Safari, though)
Once again, sorry, if my comments sounded apocalyptic…
It’s all good. Keep up the good work.
PS. The table-based markup is still shorter. Not cleaner, oh, no, just shorter…
CSS
I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.
I’ll wait until CSS 3 is more widely adopted.
Brian Crescimanno
We use a separate images server on our site and this:
.img-shadow div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://images.ourdomain.com/shadow2.png’, sizingMethod=‘crop’);
background: none;
}
does not seem to work. Is there any way to use teh alpha transparency hack in IE on a “remote” image?
John Farrell
We get a suprisingly large chunk of Netscape 6.0 visitors to our sties. My site and your dropshadow example both fail to show the shadows in Netscape 6.0. I don’t know if this is related but the “Acknowledgements” text is positioned on top of the Free Cat picture.
This drop shadow method works well in all other browsers and let’s out content writers quickly add some style to a otherwise flat page. Thanks for the help.
I don’t understand why all the backlash against this technique. It’s give us the flexability of applying drop shadows we need wherever we want without resorting to complex table designs. Our graphic designers don’t have to waste time making two verisons of every image, and our content writers love the new trick they can pull off. It’s valid, doesn’t use javascript, and isn’t to size intensive. Kudos ALA!
Andrew Watson
Yep, it does.
lots of lovely fuzz
…excellent article Sergio!
Andrew Watson
Quote:
“I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.
I’ll wait until CSS 3 is more widely adopted.”
It could be useful for a number of reasons….
i use it for a content management system where teh client can upload (varying sized)pics to his site, but he hasn’t the software or knowledge to give them drop shadows,
this allows him to keep the pretty wee drop shadows that he so dearly wanted…
jot.be/Jan
John, I had the same problem with Opera 7.0 but fixed it with “br clear=all” and “clear:both” properties for several HTML elements. In fact I don’t have the Netscape 6 on my machine but my photo site should work on it. You might check it and then have a look at the source.
CloD
Does this technic or a similar one work for tables ?
Thanks.
TerryG
It’s definitely a cool technique, but I really think it’s a lot of effort (and discussion) over a teeny, tiny bit of return.
A poster early on said that the hard-edged drop shadows were too ugly to use, but now that they are nicely fuzzy they like them.
That’s just TOO much attention to detail for me. I think my attention is more productively used elsewhere on site design & maintenance.
But the article WAS well written, and I appreciate the effort that went into it.
T.
Thalwil
I can’t get this to work under xhtml strict or 1.1 – I get an ugly lower padding for the inner div… if I do padding: 0px 5px 5px 0px; the Safari and Firefox don’t display properly… if I do padding: 0px 5px 0px 0px; then IE doesn’t display properly… any ideas?
Thalwil
OK, I wrote too soon: the shadows work fine in strict xhtml if you add the following to the img css: vertical-align:bottom; (leaving padding: 0px 5px 5px 0px; for the div). I actually discovered the answer on http://phoenity.com/tests/fuzzy_shadows_anchor.html – thanks to Lim Chee Aun who was the only person I found to implement a version of Sergio’s method in STRICT rather than transitional…!!!
radon
this thing isn’t working for me…
can you check it at http://radon.ytra.net/css/ ?
thanks
M
Try removing the » character from your CSS code. That one got me too.
But I’m having a problem, I’m not getting the rounded corners when I do this through an external CSS file. Works fine when done from the head though…
Bizarre????
iG.STUDiO
http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
Les
Great article.
It seems that I’m suffering the same as Mr Schrab (http://www.alistapart.com/discuss/cssdrop2/#c7860) – I’ve got a css defined nav bar from an unordered list, but as soon as I pop in the DX code the links stop working in IE!
Could someone please help?
Chazz
Hi,
ALA rulez!!
Question: I float an image and making a border is no prob. The drop shadow won’t float because I already used a float
Should I use two div’s to overcome this problem?
t
Thx for any help.
CU
Chazz