Haha, great poem and technique! Damn, I just realized that this is the last day for 24ways… well, a fine end to a great publication for one more year!

With dexterous wit you laid out this technique,
I wonder, do you always rhyme when you speak?
Not only did this indeed defy gravity,
It also provoked Roll-On-Floor-Laughing hilarity.

I don’t think the extra div killed the laughter,
but if it did, could we do the same job with an :after?
Admittedly it would not be seen in IE,
but “to hell with bad browsers” is still fine by me.

Yay verily I wish I could keep up this meter,
But you put me to shame – your rhymes were much sweeter.
Allow me to thank you again for this Dan,
Like Santa this christmas you are truly “the man”!

If the trick weren’t enough,
the ‘night before christmas’ tilt totally killed
I tried to rhyme here
But I’m clearly unskilled.

Great article. thanks!

Merry Christmas to all, and too all a good night.

Very nice Dan,

using your idea, and one I use for making pictures look like photographs to give:

http://it.swantafe.wa.edu.au/images/stories/bottom-curl-400px.png

Ady

PS: I did try using the !http://it.swantafe.wa.edu.au/images/stories/bottom-curl-400px.png! form to insert the image, but I may be wrong.

The concept is great, and the poem was awesome. Best “how to” in a loooong time! Cheers!

Hahaha! Very nice rhyme and work!

Cool very simple and elegant effect // nice //

If you don’t want the extra div and can do without the side borders, you can do this: http://sputnik.pl/dev/labs/24ways/

Very nice, this might come in handy!

I love this idea, but I am having a problem creating it in Photoshop. I am not exactly sure I understand how to make the gradient. it really does not look like that at all whenever I try it (tried quite a few times, shamefully)

MichalT: What’s the purpose behind declaring the padding-bottom in pixels and then again in ems? Is this a cross-browser thing, or is it just a leftover?

#page { width: 19.7em; margin: 0 auto; padding: 0 0 18px 0; background:#efecdc url(shadow-2.gif) no-repeat bottom right; background-position:right 100%; padding: 2em 2em 3.5em 2em; border-top: 2px solid #fff; }

Thanks again, it’s an amazingly simple trick once you get your head around it…

Walter

thanks Dan, a classic as ever, hope you had a poetry filled christmas!

Neat idea. I am having problems creating the gradient though, can someone describe in better detail how to do it please?

Thanks.

@Walter: The padding-bottom of 18px is because that gradient image is exactly 18px tall. Could be any height of course, as long as they match.

WOW. Great article, even better poetry. I’m still cracking up.