theshapeofdays.com— Sweet...until the box shadow CSS property is implemented, this is a great way to make cool looking shadows around HTML elements on your site.
Nov 29, 2005View in Crawl 4
"Firefox is really iffy in a whole lot of ways"About all I need to know from this tutorial. Old div tricks that are just far more hassle in use than worth.
"Some of you all linking other drop shadow techniques are missing the point. The author of the article didn't want a shadow dropped off only the bottom and the right hand side of the image as described at <a class="user" href="http://www.alistapart.com/articles/cssdrop2/.">http://www.alistapart.com/articles/cssdrop2/.</a> Instead, she/he wanted to create a shadowed effect on the bottom and both sides. Thus, the techniques you're linking above, while more elegant, don't fit the needs of the author's website. "The solution is EXACTLY the same. The author of that article did nothing new or add any thing to it. He changed the shape of the shadow a little. Any of the 1001 other versions out there would have sufficed. It would be like me duplicating this article : <a class="user" href="http://www.alistapart.com/articles/multicolumnlists">http://www.alistapart.com/articles/multicolumnlists</a> but showing how to do it with a yellow background. The angle of the shadow is irrelevant, just a minor choice in the process.I agree with vstarre's comment. Might as well use tables if you are going to use that ugly code. If you throwing a ton of extra divs at something you are missing the point of semantic html and have no need use to be using CSS.
Recent versions of safari allow you to place more than one background image on an element. Which allows you to apply the exact same shadow technique via this html:Hopefully other browsers will support multiple bg images in future.
poq17Nov 29, 2005Submitter
Sigh. This is the real link. It's his method for implementing the shadows.
mtoigoNov 30, 2005
I did something similar here and it turned out pretty good. The main advantage is a slick looking effect without having to spend too much time in photoshop. You can see it in action here<a class="user" href="http://wompus.net/index.php?s=pics">http://wompus.net/index.php?s=pics</a>
rirathNov 30, 2005
"Firefox is really iffy in a whole lot of ways"About all I need to know from this tutorial. Old div tricks that are just far more hassle in use than worth.
slhilbertNov 30, 2005
I like it.-s<a class="user" href="http://www.getyourowntots.com">http://www.getyourowntots.com</a>
ottoNov 30, 2005
There's much, much better ways to do this. SixApart has a pure CSS (no freakin' PNGs) method that I like, which sadly only works in Mozilla but has a not terrible fallback built in for IE (which doesn't look nearly as good, admittedly): <a class="user" href="http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html">http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html</a>
smhillNov 30, 2005
"Some of you all linking other drop shadow techniques are missing the point. The author of the article didn't want a shadow dropped off only the bottom and the right hand side of the image as described at <a class="user" href="http://www.alistapart.com/articles/cssdrop2/.">http://www.alistapart.com/articles/cssdrop2/.</a> Instead, she/he wanted to create a shadowed effect on the bottom and both sides. Thus, the techniques you're linking above, while more elegant, don't fit the needs of the author's website. "The solution is EXACTLY the same. The author of that article did nothing new or add any thing to it. He changed the shape of the shadow a little. Any of the 1001 other versions out there would have sufficed. It would be like me duplicating this article : <a class="user" href="http://www.alistapart.com/articles/multicolumnlists">http://www.alistapart.com/articles/multicolumnlists</a> but showing how to do it with a yellow background. The angle of the shadow is irrelevant, just a minor choice in the process.I agree with vstarre's comment. Might as well use tables if you are going to use that ugly code. If you throwing a ton of extra divs at something you are missing the point of semantic html and have no need use to be using CSS.
abhibeckertNov 30, 2005
Recent versions of safari allow you to place more than one background image on an element. Which allows you to apply the exact same shadow technique via this html:Hopefully other browsers will support multiple bg images in future.
smhillNov 30, 2005
The multiple background thing (part of CSS3) is wonderful. It not only makes drop-shadows a breeze, it has a ton of other really slick uses. Hopefully by 2015 it will be available in IE.Another cool example:<a class="user" href="http://decaffeinated.org/archives/2005/08/03/background-image">http://decaffeinated.org/archives/2005/08/03/background-image</a>(sorry, Safari/Konqueror users only)
camtechDec 1, 2005
CLick on the pictures up top and an article about a traffic spike today is there. Hmm, I wonder what could have caused that...