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.
- 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.
- Now drag a gradient (the background color of the page to transparent) from the bottom left corner to the top right corner.
- 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.
<div id="page"><div id="page-contents"><h2>Gravity-Defying!</h2><p>Lorem ipsum dolor ...</p></div></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.
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.
Comments
24/12/2006
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!
24/12/2006
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”!
24/12/2006
WOW. Great article, even better poetry. I’m still cracking up.
24/12/2006
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.
24/12/2006
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.
24/12/2006
The concept is great, and the poem was awesome. Best “how to” in a loooong time! Cheers!
26/12/2006
Hahaha! Very nice rhyme and work!
26/12/2006
Cool very simple and elegant effect // nice //
27/12/2006
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/
29/12/2006
Very nice, this might come in handy!
29/12/2006
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)
31/12/2006
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
03/01/2007
thanks Dan, a classic as ever, hope you had a poetry filled christmas!
03/01/2007
Neat idea. I am having problems creating the gradient though, can someone describe in better detail how to do it please?
Thanks.
10/01/2007
@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.