CSS Page Curl Effect without Using Images

February 26, 2013 12:08pm

I wanted to create a little page curl effect for an upcoming client’s site. Something that would look like the bottom right of a particular div was curled up, as though you might fold over the top of a page in a book in order to mark your place.

a white square with the bottom right edge curled up — A Page Curl Effect, which we’d like to recreate using CSS and no images

Okay so before we begin, let me note that we will be using icon fonts and some CSS3 here, so browser support isn’t 100%. The good news is, all modern browsers and IE9 and above are supported. That is what I typically support with my clients’ sites, and from testing I’ve done seems to be enough of a market share to work. Internet Explorer 8 is still a big enough player for us to worry about as well, but since it neither supports rounded corners nor :after, the user will simply see a white box, an appropriate fallback / punishment for those who can’t or won’t upgrade their browsers.

Onward!

First, let’s create our markup.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Page Curl</title>

</head>

<body>

<div class="tile"></div>

</body>

</html>

Next, let’s add a bit of CSS just to make things look pretty in the first place, and make it easier to see what we’re doing with our div.

<style type="text/css">

body {background:#e4e4e4;}

div.tile {background:white; border-radius:5px 5px 15px 5px; height:250px; width:250px;}

</style>

Now we’ve got a white box, our “paper” if you will, with three 5px rounded corners + our more rounded bottom right corner. We’re almost there, it would seem.

Now we need to hook up our Icon Font. You can simply download that font here (7KB Zip), or create your own page curl icon and turn it into an icon font via Icomoon. If you’d like to import my page-turn.svg file, you can get that here. You can then upload that to Icomoon in case you’re already using additional icons from there.

Okay, enough of that. I won’t get into how all of that works, but Chris Coyier has a screencast on using icon fonts with Icomoon, if you’re interested. You can just do some copy / pasting for now.

Drop your new font into a folder relative to your CSS called fonts and update your CSS to reflect the following:

<style type="text/css">

@font-face {font-family: 'Icons';

src:url('fonts/icons.eot'); src:url('fonts/icons.eot?#iefix') format('embedded-opentype'), url('fonts/icons.woff') format('woff'),

url('fonts/icons.ttf') format('truetype'), url('fonts/icons.svg#icomoon') format('svg');

font-weight: normal; font-style: normal;}

body {background:#e4e4e4;}

div.tile {background:white; border-radius:5px 5px 15px 5px; height:250px; width:250px; position:relative;}

div.tile:after {content:"\70"; font-family: 'Icons'; speak: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; position:absolute; bottom:-2px; right:-1px;}</style>

We’ve used the div.tile:after bit there to add in our font icon, the page curl.

Want to make it bigger? NBD = no big deal where I come from. Try this:

<style type="text/css">

@font-face {font-family: 'Icons';

src:url('fonts/icons.eot'); src:url('fonts/icons.eot?#iefix') format('embedded-opentype'), url('fonts/icons.woff') format('woff'),

url('fonts/icons.ttf') format('truetype'), url('fonts/icons.svg#icomoon') format('svg');

font-weight: normal; font-style: normal;}

body {background:#e4e4e4;}

div.tile {background:white; border-radius:5px 5px 55px 5px; height:250px; width:250px; position:relative;}

div.tile:after {content:"\70"; font-family: 'Icons'; speak: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; position:absolute; bottom:-4px; right:-5px; font-size:60px;}

</style>

I’ve just increased the radius of the bottom right corner, increased the font icon’s size, and adjusted the absolute positioning a bit. No need to update any images means more free time to practice backflips.

Check out the Demo or download the files and have yourself a page curling party below:

Download These Files (ZIP, 24kb)

Up Next: Introducing WPly: An HTML5, CSS3, Responsive WordPress Theme Framework