I’m not sure if anyone posted a similar solution (I didn’t read all 12 pages of discussion!) but here’s one way to programatically add in the image DIVs.
//—><!]]>
[removed]
===============================
and then just add class=dropshadow to any IMG tag you want to have a dropshadow.
Terry
PS—this code uses the lib_c.js library that was mentioned in the article “Accessible Pop-up Links” and which can be found at
http://v2studio.com/k/code/lib/
Copy & paste the code below to embed this comment.
Bart Clarkson
Yeah, PHP and the GDlib are go for drop-shadowing, so long as you write the image to a directory rather that have the server do the calc over and over. On-the-fly image manipulation is server-intensive. Unless you need the non-shadowed version intact yet don’t have the space for duplication.
I did a preliminary looksee, and couldn’t get this div-div-div onion skin to shadow a table, rather than an image. Or how about another div serving the same function?
Copy & paste the code below to embed this comment.
Alex S
First of all: nice article, William. It’s not the uber-trick i’ve expected, but as someone mentioned before, really great for photogalls and so on.
I like and prefer Zac’s idea using JavaScript to add the extra-stuff – so the whole thing looks really clean, except the IE-Mac hack; is leaving the Maccies here without shadows an option maybe? Or should we all wait for CSS3 to become rendered in future version, maybe Opera 8 next time, or IE 8 in plenty of years? ;-)
One litte thing OT:
Faruk Ates’ Hawk-Eyes found the background-image bug, but that could happen to everyone. So much background, -sound, -image, -color… oh, background-color? “It is all white – it is all right”.
Sorry to complain, maybe its just my envy, but it makes me sad after reading a good article/source and statements like “…His design of Calibre.com is the company’s proud foray into standards-based design.” and then seeing there is no default bgcolor.
Then i thought: well, let it be, it will be added soon for sure, but one minute later i discovered the same at http://www.ploughdeep.com/onionskin/ – or is this a huge shadow and not my default-lightgray background-color? ;-)
Hope you’ll fix this asap so we can del-edit my dont-post-so-late entry.
Copy & paste the code below to embed this comment.
Roxanne
I am trying the shadows on content. I have built a sample to test here:
http://65.115.104.55/redmond_Demo/index_fluid11.html
my problem is on IE6 on pc, the top shadowed box does not show its content. Can anyone help?
Copy & paste the code below to embed this comment.
Roxanne
It seems that every shadowed unit needs a container around it. So I have updated page from last comment: http://65.115.104.55/redmond_Demo/index_fluid11.html
also testing whether this could work for fluid column in fluid layout here:http://65.115.104.55/redmond_Demo/index_fluid12.html
This has been quite a learning adventure, and will definitely be valuable in my design treasure chest
Copy & paste the code below to embed this comment.
SimonC
Hi,
First off I’ve seen the article by Brian Williams about horizontal centering and it works a charm. The problem is that I want to center this image and it’s drop shadow not only horizontally but vertically as well. Now I’ve searched for this on the web and there is loads of info which I’ve tried but most work only with an image by itself….. as soon as I add the shadow everything goes pear-shaped. Before I clutter then forum with my code I was wondering if anybody had an elegant solution/hack? below is the layout I’m going for:
i realise there is a CSS weakness with vertical centering but there must be some way of doing this as it’s such a common thing to want to do. One other thing is that the image can be of either any dimension less then the max and can be either portiat or landscape.
Maybe I shouldn’t be using this shadow trick but it seems so much cleaner then the table version.
I was reading somewhere that you can’t actually do this with CSS so if that’s the case then that’s alright I’ll do the shadow and centering with tables. I was trying to avoid that.
129 Reader Comments
Back to the ArticleTerry
Hey All,
I’m not sure if anyone posted a similar solution (I didn’t read all 12 pages of discussion!) but here’s one way to programatically add in the image DIVs.
Put this in the head of your html:
[removed]
[removed]
[removed]
<!—//—><![CDATA[/><!—
AddDropDivs = function() {
window.if (document.all&&document;.getElementById) {
thenodelist=getElementsByClass(“dropshadow”);
for (i=0; i<thenodelist.length; i++) {
node = thenodelist;
newdiv1 = document.createElement(“div”);
newdiv1.className = “wrap1”;
newdiv2 = document.createElement(“div”);
newdiv2.className = “wrap2”;
newdiv3 = document.createElement(“div”);
newdiv3.className = “wrap3”;
node[removed].replaceChild(newdiv1, node);
newdiv1.appendChild(newdiv2);
newdiv2.appendChild(newdiv3);
newdiv3.appendChild (node);
}
}
}
//—><!]]>
[removed]
===============================
and then just add class=dropshadow to any IMG tag you want to have a dropshadow.
Terry
PS—this code uses the lib_c.js library that was mentioned in the article “Accessible Pop-up Links” and which can be found at
http://v2studio.com/k/code/lib/
Bart Clarkson
Yeah, PHP and the GDlib are go for drop-shadowing, so long as you write the image to a directory rather that have the server do the calc over and over. On-the-fly image manipulation is server-intensive. Unless you need the non-shadowed version intact yet don’t have the space for duplication.
I did a preliminary looksee, and couldn’t get this div-div-div onion skin to shadow a table, rather than an image. Or how about another div serving the same function?
Alex S
First of all: nice article, William. It’s not the uber-trick i’ve expected, but as someone mentioned before, really great for photogalls and so on.
I like and prefer Zac’s idea using JavaScript to add the extra-stuff – so the whole thing looks really clean, except the IE-Mac hack; is leaving the Maccies here without shadows an option maybe? Or should we all wait for CSS3 to become rendered in future version, maybe Opera 8 next time, or IE 8 in plenty of years? ;-)
One litte thing OT:
Faruk Ates’ Hawk-Eyes found the background-image bug, but that could happen to everyone. So much background, -sound, -image, -color… oh, background-color? “It is all white – it is all right”.
Sorry to complain, maybe its just my envy, but it makes me sad after reading a good article/source and statements like “…His design of Calibre.com is the company’s proud foray into standards-based design.” and then seeing there is no default bgcolor.
Then i thought: well, let it be, it will be added soon for sure, but one minute later i discovered the same at http://www.ploughdeep.com/onionskin/ – or is this a huge shadow and not my default-lightgray background-color? ;-)
Hope you’ll fix this asap so we can del-edit my dont-post-so-late entry.
Roxanne
I am trying the shadows on content. I have built a sample to test here:
http://65.115.104.55/redmond_Demo/index_fluid11.html
my problem is on IE6 on pc, the top shadowed box does not show its content. Can anyone help?
Roxanne
It seems that every shadowed unit needs a container around it. So I have updated page from last comment: http://65.115.104.55/redmond_Demo/index_fluid11.html
also testing whether this could work for fluid column in fluid layout here:http://65.115.104.55/redmond_Demo/index_fluid12.html
This has been quite a learning adventure, and will definitely be valuable in my design treasure chest
Plaz
Thank You:
Solve this problem by using tables | by smoother
I used the above fix to get things to display properly in Netscape 7.
FOr some reason, the drop shadow width was expanding and breaking the layout. Placing the container in a table fixed that problem. Thanks.
kadzuro
i made a onion-skinning glow version, based in this great article.
http://www.kadazuro.com/blog/archives/000067.php
tnx for the article btw.
k.
SimonC
Hi,
First off I’ve seen the article by Brian Williams about horizontal centering and it works a charm. The problem is that I want to center this image and it’s drop shadow not only horizontally but vertically as well. Now I’ve searched for this on the web and there is loads of info which I’ve tried but most work only with an image by itself….. as soon as I add the shadow everything goes pear-shaped. Before I clutter then forum with my code I was wondering if anybody had an elegant solution/hack? below is the layout I’m going for:
———————————-
|div. | div.main |
|left | —————- |
| | | image | |
| | | with | |
| | | shadow | |
| | —————- |
| | |
———————————-
i realise there is a CSS weakness with vertical centering but there must be some way of doing this as it’s such a common thing to want to do. One other thing is that the image can be of either any dimension less then the max and can be either portiat or landscape.
Maybe I shouldn’t be using this shadow trick but it seems so much cleaner then the table version.
Many thanks
Simon
SimonC
Ok, so apparently I can’t even get posted format looking the way it should (sigh)…. let me try again (assume fullstops are whitespace!):
———————————-
|div..| div.main …..|
|left.|..—————-..|
|…..|..|..image..|..|
|…..|..|..with…|..|
|…..|..|..shadow.|..|
|…..|..—————-..|
|…..|……………|
———————————-
I was reading somewhere that you can’t actually do this with CSS so if that’s the case then that’s alright I’ll do the shadow and centering with tables. I was trying to avoid that.
Si