Gravity-Defying Page Corners

15 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Dylan

    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!

  2. Joel Birch

    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”!

  3. NickS

    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.

  4. Ady Gould

    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.

  5. Mozes

    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)

  6. Walter Davis

    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

Impress us

Be friendly / use Textile