24 ways

to impress your friends

Gravity-Defying Page Corners by Dan Cederholm

While working on Stikkit, a “page curl” came to be.
Not being as crafty as Veerle, you see.
I fired up Photoshop to see what could be.
“Another copy is running on the network“ ... oopsie.

With license issues sorted out and a concept in mind
I set out to create something flexible and refined.
One background image and code that is sure to be lean.
A simple solution for lazy people like me.

The curl I’ll be showing isn’t a curl at all.
It’s simply a gradient that’s 18 pixels tall.
With a fade to the left that’s diagonally aligned
and a small fade on the right that keeps the illusion defined.

screenshot
Create a selection with the marquee tool (keeping in mind a reasonable minimum width) and drag a gradient (black to transparent) from top to bottom.
screenshot
Now drag a gradient (the background color of the page to transparent) from the bottom left corner to the top right corner.
screenshot
Finally, drag another gradient from the right edge towards the center, about 20 pixels or so.

But the top is flat and can be positioned precisely
just under the bottom right edge very nicely.
And there it will sit, never ever to be busted
by varying sizes of text when adjusted.

  1. <div id="page">
  2. <div id="page-contents">
  3. <h2>Gravity-Defying!</h2>
  4. <p>Lorem ipsum dolor ...</p>
  5. </div>
  6. </div>

Let’s dive into code and in the markup you’ll see
“is that an extra div?” ... please don’t kill me?
The #page div sets the width and bottom padding
whose height is equal to the shadow we’re adding.

screenshot

The #page-contents div will set padding in ems
to scale with the text size the user intends.
The background color will be added here too
but not overlapping the shadow where #page’s padding makes room.

A simple technique that you may find amusing
is to substitute a PNG for the GIF I was using.
For that would be crafty and future-proof, too.
The page curl could sit on any background hue.

I hope you’ve enjoyed this easy little trick.
It’s hardly earth-shattering, and arguably slick.
But it could come in handy, you just never know.
Happy Holidays! And pleasant dreams of web three point oh.

About the author

Dan Cederholm Dan Cederholm is a web designer and author based in Salem, Massachusetts. He's the founder of SimpleBits, a tiny web design studio. He's writes and speaks (in non-poetic form) about interface design during the day, and plays the ukulele and drinks wine at night.

Your comments

  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. § shorty114:

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

  4. § 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.

  5. § 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.

  6. § Greg:

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

  7. § Ramon Bispo:

    Hahaha! Very nice rhyme and work!

  8. § dannyb:

    Cool very simple and elegant effect // nice //

  9. § MichalT:

    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/

  10. § Marko Mihelcic:

    Very nice, this might come in handy!

  11. § 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)

  12. § 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

  13. § Jim Callender:

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

  14. § Mozes:

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

    Thanks.

  15. § Dan Cederholm:

    @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.

Commenting is closed for this article.

24 ways: day 24