A List Apart: Comments on: CSS Drop Shadows

Posted by: Phil Baines

2012-01-31T13:00:49+00:00

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 by: Phil Baines

2012-01-31T13:00:49+00:00

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 by: Michael Gemar

2012-01-31T13:00:49+00:00

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 by: Phil Baines

2012-01-31T13:00:49+00:00

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 by: Lim Chee Aun

2012-01-31T13:00:49+00:00

Possible to do this without using background images?

Posted by: Blakems

2012-01-31T13:00:49+00:00

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 by: Phil Baines

2012-01-31T13:00:49+00:00

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 by: Phil Baines

2012-01-31T13:00:49+00:00

Blakems; I have just been told that text-shadow is going to removed from CSS 2.1 onwards. just so you know.

Posted by: Lim Chee Aun

2012-01-31T13:00:49+00:00

I wonder, why not just use the borders of the image, and the container of the image, to simulate the shadows?

Posted by: David House

2012-01-31T13:00:49+00:00

"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 by: davelave

2012-01-31T13:00:49+00:00

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

Posted by: Lim Chee Aun

2012-01-31T13:00:49+00:00

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

Posted by: Sergio

2012-01-31T13:00:49+00:00

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 by: waylman

2012-01-31T13:00:49+00:00

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 by: Phil Baines

2012-01-31T13:00:49+00:00

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 by: Emma

2012-01-31T13:00:49+00:00

"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 by: Anne

2012-01-31T13:00:49+00:00

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

Posted by: Critter

2012-01-31T13:00:49+00:00

(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 by: waylman

2012-01-31T13:00:49+00:00

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 by: Sergio

2012-01-31T13:00:49+00:00

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 1600x1600 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 by: Dante-Cubed

2012-01-31T13:00:49+00:00

But there is a CSS filter for this: DropShadow Filter Oh yeah I forgot. God forbid ALA would publish something that works on Internet Explorer. Lol. I don't know who that insults; ALA or IE.

Posted by: Critter

2012-01-31T13:00:49+00:00

I do most of my reseach on this site and it's articles at work where I have access to a fairly fast connection. But I'll try it at home too where I'm forced to use a dial-up connection and see what happens there. Thanks a bunch for the clarification! Now I know what I want my site to be when it grows up!

Posted by: Brett Merkey

2012-01-31T13:00:49+00:00

your snippet of code is a bit old and amounts to a slander of IE. The IE filter that produces the very nice shadows talked about in the article is: filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#aaaaaa,strength=3); Far more subtle, don't you think?

Posted by: Rob Shields

2012-01-31T13:00:49+00:00

Discuss this article. OK then. Here's a good tip - don't use drop shadows on your web pages. Concentrate on making your site navigable, usable and well indexed and leave special effects and crap for the likes of print designers. Another good tip is to NOT make your site constrained to a particular width, like this one, as it sucks of print design.

Posted by: Wazungu

2012-01-31T13:00:49+00:00

Rob, if you don't have something constructive to say...at least stay on-topic. Fixed width vs. liquid layouts *both* have their place - as do drop shadows on occasion. I don't think every site on the web should have them, and neither does the author. Sites that *only* focus on navigation and usability at the expense of all visual craftmanship are soulless and boring. The craft of web design requires both halves of our collective brains to produce engaging experiences online. I appreciate ALA for contributing to both sides of my gray matter, whether or not I use every cutting-edge technique and tactic in their library. Code monkeys and designers need each other!

Posted by: Wazungu

2012-01-31T13:00:49+00:00

What I *really* meant to say when I arrived =), was that ImageMagick, GD and PHP can automatically generate drop shadows on images. While I realize this goes against the grain of the discussion, it is a method that might be considered if all the images are being processed already or are dynamically generated and in a database. No extra markup or CSS to deal with, at least. An example PHP library: http://php.amnuts.com/index.php?do=view&id=9 Just food for thought!

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I'm glad Webmonkey is dead. I'll give my reasons for this in an upcoming article. You'll see why I am dancing on its grave. I seem to be the only one, but I have valid reasons. That filter stuff is outdated. The only filters I use in practice are the blendTrans and revealTrans, and that's rare. I just like the Page Transitions. That's enough of a filter for me, or anyone else. Rob, ALA has just published some accessibility and structure articles. Now they're publishing some "wow-factor" articles. I must say I do like that balance. I kinda agree; I found it a tad pointless, but at least there is some documented way as to how drop shadows are done.

Posted by: Karl Bedingfield

2012-01-31T13:00:49+00:00

I was at Silver Orange Labs website today and they had this version: http://labs.silverorange.com/archives/2004/january/shadowboxing Karl

Posted by: Phil Baines

2012-01-31T13:00:49+00:00

Yeh i have seen that before. Its a good version, but not as effective. you dont get a fade effect. a proper shadow fades. Im sure that they dont need to posistion the first div either; .shadowbox { background: #ccc; } plus 2px doesnt really show very much. i recommend a bit more. .shadowbox div { background: #333; border: 2px solid #000; color: #fff; padding: 10px; position: relative; top: -3px; left: -3px; } if just testes it my editing thier code using the firefox css-edit plugin, and it works.

Posted by: Alex Morales

2012-01-31T13:00:49+00:00

I'm a bit surprised nobody has mentioned this yet: http://www.alistapart.com/articles/pngopacity/ I remembered reading it a while back, I think I first saw that method on youngpup.net and then I saw the article here. It shows you how to force IE to render pings properly, variable opacity and all. Seems like you can get the best of both worlds. ;-)

Posted by: Peterman

2012-01-31T13:00:49+00:00

Dante-Cubed wrote: >>> Oh yeah I forgot. God forbid ALA would publish something that works on Internet Explorer. <<< Your personal vendetta against ALA is getting boring. I'm sure every ALA reader has noticed how upset you are that your article didn't get published. FYI, ALA has published lots of non-standard tricks for IE only, as parts of larger articles. They won't publish articles that ONLY deal with IE-specifics, because they wish to educate their readers on designing for all browsers instead of just one, whether it be IE, Mozilla, Opera or something else. You have already informed us that you don't agree with this goal, and you don't need to tell us again.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Of course I want everything to work on all browsers, but come on now: that's impossible. I do try but I believe IE should be the top priority, since it's the by far most used browsers. I don't write web development articles anymore anyway, so I don't care. I write about San Francisco History (http://geocities.com/dc_sfhe). If you actually read my posts, you'll see that I complimented ALA in my last post.

Posted by: Peterman

2012-01-31T13:00:49+00:00

Dante: >>> Of course I want everything to work on all browsers, but come on now: that's impossible. <<< By "you don't agree with this goal", I meant that you disagree with ALA's decision to use browser-specific and non-standard code sparingly, at the expense of not getting to use a lot of extra functionality. IE (6) *should* be top priority, and it *can* be top priority without adding lots of IE-specific code. >>> If you actually read my posts, you'll see that I complimented ALA in my last post. <<< I saw. And if you had read older articles, you'd have seen that ALA *have* published "something that works on Internet Explorer", unless you meant a *whole article* about something that *only* works in IE. Thing is, I didn't say you were incapable of complimenting ALA, and I think you *have* read older articles, possibly missing the IE-specific non-standard parts. Compliments or not: this is not the first time you bring it up. Considering that your article, if memory serves me correct, was rejected because it was too IE-specific, I can't see any other reason for you to keep bringing it up, than personal reasons. I apologize if I'm wrong, but it'd be a weird coincidence. At any rate, it doesn't need to be brought up again, any more than you need to criticize a fantasy adventure movie for not being a documentary about dogs. Not being too browser-specific is part of the definition of ALA, not an oversight that needs to be reported.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

My article's script gave IE users a little extra. Other Modern Browser users still got the rest of the script. It wasn't *completely* IE specific at all. The script inserted a "Highlight All" button before every Textarea in the document. Clicking it highlighted the textarea text, but in IE it asked the user if he/she also wanted to copy the text to his or her clipboard. I want to make sure everyone can see my pages; that is my goal. Putting IE as my top priority is part of that goal.

Posted by: Marat

2012-01-31T13:00:49+00:00

Why just not make a Photoshop macros and simply paint a shadow in all images you need?

Posted by: Lim Chee Aun

2012-01-31T13:00:49+00:00

Ok, Marat, you can add the shadows with Photoshop, but what if you don't like the shadows anymore in the future, and you'll have to edit every single shadowed images of your site (removing the shadows)? This technique talks about forward-compatibility.

Posted by: Henk

2012-01-31T13:00:49+00:00

Nice! But one funny thing: when I use this class in an MT-post, I have to enter a lot of BR's to get the text UNDER the image. What am I missing?

Posted by: Sergio

2012-01-31T13:00:49+00:00

Henk: Since the container div is floated, you need to add an element with clear:both; after it. You can add a br with style="clear:both;". That should do the trick.

Posted by: Henk

2012-01-31T13:00:49+00:00

Thanks Sergio but I'm a CSS-n00b, so I quote: "If you have no clue in using it, don't!", so I deleted it from my page. Guess I have to learn a whole lot more...

Posted by: Phil Baines

2012-01-31T13:00:49+00:00

Henk; where does it say that?

Posted by: Henk

2012-01-31T13:00:49+00:00

Phil: not really a quote from the text. Sorry for the confusion!

Posted by: andrej

2012-01-31T13:00:49+00:00

I don't like the shadow top-right and left-bottom. There is a hard darkgray/white border and in real world there is soft shadow border all around the image. The same physical phenomenon causing soft shadow on right and bottom sides works on left and top sides.

Posted by: sergio

2012-01-31T13:00:49+00:00

Andrej: That's something that can't really be avoided. It could be made to work by using the second approach (the fake offset one) with a PNG that vanishes gradually. It would only work for non-IE browsers, though, and would lose the advantage of having the shadow adjust to its background color (since the "vanishing" has to be on one color). I may make an example of this later...

Posted by: rgw

2012-01-31T13:00:49+00:00

I wish text-shadow or whatever it is would come to ease our hunger for shadows.

Posted by: Amit Karmakar

2012-01-31T13:00:49+00:00

Well Dunstan has written this in 2003! LOL and there are 4 variants(that I am aware of) to this trick as of date. But still a good one at that.

Posted by: Sergio

2012-01-31T13:00:49+00:00

Well... he wrote it in November of 2003. That's less than 4 months ago. Not exactly ancient history, even by internet standards. But yeah, it's been around a while.

Posted by: Andy

2012-01-31T13:00:49+00:00

In follow-up to Wazungu message on the 27th Feb; the class linked to, in all fairness, doesn't actually create the drop-shadow on the fly. Instead it uses a pre-defined set of shadows images to give the illusion that the image in question has had a drop-shadow applied to it. The result is meant to replicate something like you would get in PhotoShop/Gimp, and as such the image is then saved (or just displayed - you don't have to save it) with the drop-shadow attached. I believe ImageMagick can create drop-shadows on the fly, but I am not sure of the quality or fading ability, because I've never tried it. There is no (easy) ability in GD to create a drop-shadow, that I'm aware of. I have tried an on-the-fly version using PHP and GD, but the result was much too slow for my liking (and not terribly good, either!)

Posted by: Jan

2012-01-31T13:00:49+00:00

Really nice article! Perhabs there is Non-script approach to fix the IE problem with Alpha-PNGs. Consider to use IE-specific Conditional Comments and use the Alpha-Image Filter discussed in another ALA article to "activate" the alpha channel of the PNG in Internet Explorer. This should work and I am using this solution on my own site: (The \ is only a CR and should be removed) Hope this works and I really appreciate your comments...

Posted by: Phil Baines

2012-01-31T13:00:49+00:00

i have tested my verion on IE5 also now, and I did have to put a small / hack into place. IE5 has messed up margins. But it works good now. http://www.wubbleyew.com/tests/dropshadows.htm phil baines

Posted by: Wazungu

2012-01-31T13:00:49+00:00

Andy, great points. What you say about that technique is interesting, I hadn't heard of that approach. I have seen it done properly before - I recall on Kmart's photo lab site, the images had visually correct dropshadows that were dynamically generated, and I worked on an HP project that did the same. However, I didn't implement them myself (just a designer, not a coder). It is my belief that it *can* be done. Whether or not it *should* be is up to you readers! =)

Posted by: Wazungu

2012-01-31T13:00:49+00:00

I know I keep nudging the conversation off-topic, but I just can't resist! The issues surrounding visual techniques such as this cut across mediums, from print to web to animation and video. If only drop shadows were as easy as this Flash Actionscript class: http://www.quasimondo.com/archives/000184.php Saved my bacon on a Flash presentation with a bunch of dynamically loaded (and variable-sized) images. Play with the sliders (above), and dream of CSS3...

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

CSS3 seems to be the new frontier. Perhaps I should set up a CSS3 Test Site? What do you think?

Posted by: Steve

2012-01-31T13:00:49+00:00

What's the name of the font used in this illustrations?

Posted by: sergio

2012-01-31T13:00:49+00:00

The font is Silkscreen. It was created by Jason Kottke, it's free for personal and corporate use, and you can download it from his site here: http://kottke.org/plus/type/silkscreen/index.html

Posted by: Steve

2012-01-31T13:00:49+00:00

That'll do nicely. Thank you.

Posted by: Richard Rutter

2012-01-31T13:00:49+00:00

David House wrote: > 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. The current method of setting a float on a box, but not setting an explicit width, so that the box is rendered only as wide as its contents may be incorrect at the moment (although it passes CSS validation) but that will change very soon. As all modern browsers, except IE5/Mac & Opera, render this CSS as desired, the W3C has responded by modifying the float requirement in CSS 2.1 (currently a Candidate Recommendation, implying it will be a full Recommendation imminently). CSS 2.1 effectively says that providing you set width:auto when floating a box, your CSS is valid and boxes can be rendered as wide as their content ('shrink-to-fit') - the desired behaviour. http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#q8 The W3C should be applauded for making this concession/acknowledgement of how real-life designers use CSS.

Posted by: pikkis

2012-01-31T13:00:49+00:00

What font is used for the text of the article? the content is nice too ;-)

Posted by: sergio

2012-01-31T13:00:49+00:00

Hah! From the A List Apart Stylesheet: font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; There you have it. Here's Microsoft info on Trebuchet MS: http://www.microsoft.com/typography/fonts/font.aspx?FID=2&FNAME=Trebuchet MS

Posted by: pikkis

2012-01-31T13:00:49+00:00

Thanks Sergio! What a great site this ALA!

Posted by: jakel

2012-01-31T13:00:49+00:00

Great technique and article, Sergio! However, I found one flaw in the technique that I wasn't able to fix. Namely, the drop shadow breaks when the photo is centered in a table cell (e.g. in a photo album index page), unless all the photos in the same column are of exactly the same width. The shadow gets ok if I put another div around the img-shadow div, but then the image is not centered in the cell anymore. OK, OK, I know I shouldn't maybe use tables, but for grids like this I've yet to find any better way. Besides, even when trying to use only div's for the layout I still couldn't center the image nicely in the surrounding div. Could someone please give me a hint how to center the shadowed image inside another element without breaking anything? TIA, Jarkko

Posted by: andrej

2012-01-31T13:00:49+00:00

I've got strange problem. Msie 6 does not display http://www.jpd.sk/ page after load, you have to move mouse over top menu to show contents. Other pages on this site uses the same css and page structure, but displays ok. Suggestions?

Posted by: dunc

2012-01-31T13:00:49+00:00

Great article and technique, thanks Sergio. I tried it on my pages and it worked great, except in IE6/XP. After a lot of pissing around with test cases I discovered that if the page has an xml declaration at the top ie: , then the "padding: 4px;" at the end of the ".img-shadow img" style rule is ignored. Everything works except the image has no padding inside the frame. Wierd. I assume this has something to do with IE's quirks mode. Anyone else seen this?

Posted by: sergio

2012-01-31T13:00:49+00:00

Dunc: I ran into the same problem while writing the article. Specifying an XHTML transitional doctype makes IE6 display the padding correctly. Other doctypes result in the behavior you get in IE5 and IE5.5 (padding applied to image elements doesn't show). I'd assume that XHTML 1.0 transitional and up would work.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

I wonder whose fault that is... When IE6 goes into Strict Modes it uses the W3C Model. Since this box model makes no sense, stick to Quirks Mode. Need I say more?

Posted by: Sergio

2012-01-31T13:00:49+00:00

I don't think that has anything to do with it, Dante, or other browsers that implement the Box Model as per the w3c standard wouldn't show the padding. I think it's Quirks mode itself that causes Explorer to dismiss the padding.

Posted by: Kamran Vighio

2012-01-31T13:00:49+00:00

Why use an image? Just create a box with gray bg. Image is only useful when the shadow is to be blurred (which normally seems to be the case). But if we put shadow-image with blurred shadow, it will break-up into pixels if we write a 40 line paragraph for instance!

Posted by: Steve

2012-01-31T13:00:49+00:00

Here is an example of using this technique for a photo album index: http://www.stephenturvey.co.uk/photos/malia2003/index.asp I think it adds a nice touch. Thanks for the article, Sergio.

Posted by: Ranjeet Sodhi

2012-01-31T13:00:49+00:00

Guys, I noticed that the shadow effect seems to work for most of the people here... sadly I am getting some issues as can be seen here: http://www.sodhi.org/EETrial/ Please help. Thanks.

Posted by: Radley Smith

2012-01-31T13:00:49+00:00

It seems to me that the extra PNG is useless. I don't want IE to have ugly shadows, where the background colors clash. I want my site to look good in all of todays browsers. Sure, going past IE is great, but not in this case. I can't tolerate the ugly drop shadows on my site. I think I'll just learn what my background color is and adjust the shadow to that color for now...

Posted by: brad

2012-01-31T13:00:49+00:00

sergio, thanks for your great article. i am now implementing this drop technique on a site i'm building for a friend -- works great in ie5.x/6win ns7win and safari, but not so in mac ie 5.2. not sure why. the div and the image disappear above the view port (you can barely make out the drop .gif along the top). see an example here: http://www.lesliebrothers.biz/ here's the html: here's the css: div.img-ilus { background: url([img]http://www.lesliebrothers.biz/images/drop_body.gif[/img]) bottom right no-repeat; clear: right; float: right; margin: 95px 0 0 0; padding: 0; position: relative; } div.img-ilus img { background-color: #fff; /* border: 1px solid #a9a9a9; */ border: 1px solid #fff; display: block; margin: -5px 5px 5px -5px; position: relative; } if you have some suggestions, I would greatly appreciate it. (thanks also to ALA -- i owe the content producers and editors much.) brad noble

Posted by: Andy Fragen

2012-01-31T13:00:49+00:00

Sergio, Great article. Of course I went to try it out and it works fabulously. I have an image in the

Posted by: sergio

2012-01-31T13:00:49+00:00

Andy: when a block element is created, by default it assumes all available horizontal space. That is what you're seeing (with the shadow going all the way to the right). The float, in this case, is very necessary. The element can be floated to left or right, it doesn't matter, but it *does* have to be floated. Thus, positioning of the image must be done through fiddlement of the margin values. If you want to center the image you'll have to enclose it in another div and center that. I'm working on some improvements of the technique, so there may be more to talk about later =)

Posted by: Andy Fragen

2012-01-31T13:00:49+00:00

Sergio, Thanks for the reply. I took out the style="float:none;" from the div and wrapped the img-shadow div like so.

And the image does not center. It floats to the left. Am I not centering the enclosing div properly? I look forward to improvements in the drop shadow technique because it's great. Andy

Posted by: sergio

2012-01-31T13:00:49+00:00

Andy, I think that is not properly centered. There is an interesting discussion on how to center a div (one would think this would be simpler, right?) at Andy Budd's site here: http://www.andybudd.com/blog/archives/000150.html Good luck!

Posted by: Andy Fragen

2012-01-31T13:00:49+00:00

Sergio, You're my hero. Andy Budd's page worked. It only took me 30 min to figure it out though. I added 2 divs around the object to be centered with the following css .centerWrap { min-width: 400px; text-align: center; } .center { margin: 0 auto; text-align: left; width: 250px; } Andy's width of 600px didn't seem to center the image for me but using a smaller width of 250px and a min width depending upon how narrow you're willing to let your browser window collapse seems to work great. Thanks. Now can't there be a simpler way? The only problem I see is in Camino 0.7 I loose part of the drop shadow. :-( Andy

Posted by: Marat

2012-01-31T13:00:49+00:00

Very interesting. But It looks to have very limited usage.

Posted by: GMan

2012-01-31T13:00:49+00:00

I really think you guys are doing a great job coming up with solutions in CSS. I really which that CSS actually separated content from presentation though. If CSS really worked than all you should need in the HTML is Anything more just shows that CSS needs another iteration or two before it really delivers the promise of separating content from presentation. To take it even further, if CSS really worked then using only image tags all with the same class you could be able to format a gallery as in img1.jpg img2.jpg img3.jpg img4.jpg img5.jpg img6.jpg img7.jpg img8.jpg img9.jpg and have that show up in any format you want. 9 images vertically, 3 by 3, some other format including all the styles in iPhoto all only by changing the CSS. Who do we have to influence to get this thing done right?

Posted by: Steve

2012-01-31T13:00:49+00:00

This effect really spruces up a gallery of previously flat images on a page. Makes for a much nicer display: http://www.larimer.org/photos/

Posted by: Liaw Hong Zhi Vincent

2012-01-31T13:00:49+00:00

hello everyone... i've tested this script. it works fine when its in the tag. but when its within another

tag.. it looks very weird! anyone experienced this before? cheers, vincent

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

CSS3 has a box-shadow property just for this but no browser supports it yet.

Posted by: 1beb

2012-01-31T13:00:49+00:00

Thanks for the excellent write up.

Posted by: Patrick

2012-01-31T13:00:49+00:00

For those Safari users, once you update your OS to 10.3.4 (which brings Safari 1.2.2 I guess, or at least updates it), you will notice that your dropshadows (using the technique in this article) are aligned all the way left, so there's no right-side shadow and it cuts off with the picture edge on the left. Anybody have a quick fix for this? Is it a problem with Safari's CSS rendering? It still works in other Mac browsers (IE, NS). Should I submit a report to Apple?

A List Apart: Comments on: CSS Drop Shadows

Posted by: Phil Baines

Posted by: Phil Baines

Posted by: Michael Gemar

Posted by: Phil Baines

Posted by: Lim Chee Aun

Posted by: Blakems

Posted by: Phil Baines

Posted by: Phil Baines

Posted by: Lim Chee Aun

Posted by: David House

Posted by: davelave

Posted by: Lim Chee Aun

Posted by: Sergio

Posted by: waylman

Posted by: Phil Baines

Posted by: Emma

Posted by: Anne

Posted by: Critter

Posted by: waylman

Posted by: Sergio

Posted by: Dante-Cubed

Posted by: Critter

Posted by: Brett Merkey

Posted by: Rob Shields

Posted by: Wazungu

Posted by: Wazungu

Posted by: Dante-Cubed

Posted by: Karl Bedingfield

Posted by: Phil Baines

Posted by: Alex Morales

Posted by: Peterman

Posted by: Dante-Cubed

Posted by: Peterman

Posted by: Dante-Cubed

Posted by: Marat

Posted by: Lim Chee Aun

Posted by: Henk

Posted by: Sergio

Posted by: Henk

Posted by: Phil Baines

Posted by: Henk

Posted by: andrej

Posted by: sergio

Posted by: rgw

Posted by: Amit Karmakar

Posted by: Sergio

Posted by: Andy

Posted by: Jan

Posted by: Phil Baines

Posted by: Wazungu

Posted by: Wazungu

Posted by: Dante-Cubed

Posted by: Steve

Posted by: sergio

Posted by: Steve

Posted by: Richard Rutter

Posted by: pikkis

Posted by: sergio

Posted by: pikkis

Posted by: jakel

Posted by: andrej

Posted by: dunc

Posted by: sergio

Posted by: Dante-Cubed

Posted by: Sergio

Posted by: Kamran Vighio

Posted by: Steve

Posted by: Ranjeet Sodhi

Posted by: Radley Smith

Posted by: brad

Leslie Brothers Construction, LLC

Posted by: Andy Fragen

Posted by: sergio

Posted by: Andy Fragen

Posted by: sergio

Posted by: Andy Fragen

Posted by: Marat

Posted by: GMan

Posted by: Steve