Create a responsive CSS3 paper fold effect

There are so many remarkable and exciting things that we designers can achieve on the web today, whether it’s using the pillars of the web HTML5, CSS3 and good old jQuery, or more modern frameworks and technologies, development just never seems to ease up. Better yet, there are sure to be even more remarkable and exciting things to look forward to experimenting with in the near future.

Still, even among all of these great technologies, it is worth remembering that we must also make use of the more subtle elements available to us, even if it’s just any old box element on the site, as these can make all the difference to our webpages. Such elements can provide some much-needed polish and finesse, which can really help elevate the page to a new level.

So in this tutorial, we are going to turn our attention to CSS3 and see how we can create a more delicate responsive folding paper effect. Later on we’re also going to use a touch of HTML5 and talk about drop shadows in more detail, so you can truly master the technique. Interested? Let’s get started!

DOWNLOAD TUTORIAL FILES

Get started

Begin with a new HTML5 file and start adding in the HTML markup. We’re creating just one stylesheet and, because we want this to be responsive, we need to add in the ‘viewport’ meta tag. Below that we use the HTML5 Shiv to compensate for IE users when using HTML5 elements.

001     <head>
002            <meta charset="utf-8" />
003            <title>Flexible Folded Paper Effect</    title>
004            <link rel="stylesheet" type="text/css" href="css/style.css" />
005         <meta name="viewport"         content="width=device-width, initial-        scale=1.0">
006    
007         <!--[if IE]>
008                <script src="http://html5shiv.    googlecode.com/svn/trunk/html5.js"></script>
009            <![endif]-->            010            <!--[if gte IE 9]>
011     <style type="text/css">
012            .gradient {              013                filter: none;            014            }    
015      </style>
016        <![endif]-->                017      
018        </head>

The page wrap

Now that we have dealt with the head meta information, let’s start adding in some much-needed structure to our HTML. Firstly then, let’s add in a <div> called ‘page-wrap’. We’re going to use this to centre our content before adding in another <div> with a class name of ‘paper’, as shown in the code below.

001      <div id="page-wrap">
002             <div>    
003          </div><!— End paper —>
004         </div><!— End paper —>
005

The header

The header section is pretty straightforward, but this is the first time we’ve used an HTML5 element, the <header> element. The header element is typically used to group a set of h1 to h6 elements to mark up a page’s title with a subtitle or tagline, which fits perfectly with what we are trying to achieve here.

001     <header>
002            <h1>Responsive Paper Fold Effect</h1>
003            <h2>Using CSS3 and HTML5</h2>
004        </header>
005

Add content

In this next step we’re just going to create some content. In this tutorial, all we will do is use some generic dummy text (available from www.lipsum.com) and place that with another HTML5 element, the <section> element. Using the section element is somewhat debatable because you can at times use the <article> element. But because this is not going to be syndicated content, the <section> element seems more semantic.

001      <section>
002        <p>Lorem ipsum dolor sit amet,          consectetur adipiscing elit.
003         Etiam sollicitudin sapien quis augue      pellentesque pulvinar.</p>
004        </section>

Add a reset

Create a new CSS file and call it ‘styles.css’ before placing it within its own folder called ‘CSS’. We’re going to use a reset to start with and Eric Meyer meyerweb.com/eric/tools/css/reset always has an updated one to use. But the most important thing to add is the HTML5 display role. Without this we risk our pages becoming very messy when viewed in older browsers.

001     /* HTML5 display-role reset for older      browsers */
002        article, aside, details, figcaption,      figure,
003        footer, header, hgroup, menu, nav,    section {
004         display: block;
005    }

Reset continued

People add a CSS reset without really understanding fully why and even though the most important rule to add is the HTML5 display role that we covered in the last step, the other significant rule we should be adding is for box sizing. The ‘box-sizing’ declaration will cause all the box sizes (block level elements) to be applied to the border and everything inside it.

001     * {
002        -moz-box-sizing: border-box;
003        -webkit-box-sizing: border-box;
004        box-sizing: border-box;
005     }

Default styles

What we’re going to do now is add in some simple default styles to the main page. Next, some texture to our document’s body by using a textured image we’ve supplied in the source files. If the image doesn’t work for some reason, then we default to an off-white colour. Finally we centre the paper using margins and set its width.

001     body {
002        background: #f1f1f1 url("../imgs/       bg.jpg");
003     
004     }
005        
006     #page-wrap {
007         margin: 0 auto;
008         max-width: 980px;
009         width: 100%;
010     }

Header styles

Here we need to give the header some styles. We’re going to give it a width of 100 per cent and a minimum height of 100px. This will allow the header to adjust accordingly whenever the browser window is resized. Next we position this relative to its parent container (which is the page-wrap) and lastly give it some padding.

001     header {
002         width: 100%;
003        min-height: 100px;
004        position: relative;
005         padding: 30px;006     }

Page title

In this step we’re going to give our page title and tagline some styles. The font we used here is taken from Google Fonts and as you can see, is called ‘Overlock’ (download it from www.google.com/fonts/specimen/Overlock). Target the ‘h1’ element first and give it some basic styles before adding in a touch of drop shadow using the ‘text-shadow’ declaration. Then we can finish off targeting the ‘h2’ element, setting the font size to half of our ‘h1’ element, as shown below.

001     h1 {
002         font-family: 'Overlock', cursive;
003         font-weight: bold;
004         font-size: 50px;
005         color: #555;
006         text-align: center;            007         text-shadow: 0 1px 0 #fff;
008         margin-bottom: 20px;
009         padding-bottom: 20px;
010     }
011         
012     h2 {013         font-family: 'Overlock', cursive;
014         font-weight: bold;
015         font-size: 25px;
016         text-align: center;
017     }

Paper styles

Not much is happening right now, so let’s get some structure to our paper. We’re going to set the background of our paper to white and push it away from the top using margin. We then set its maximum width to 960px and add in a subtle drop shadow using the ‘box-shadow’ property, which will surround the whole paper element and help to make it look like it’s raising off the page slightly.

001     .paper {
002     
003         background: #fff;
004        margin: 30px auto;
005        max-width: 960px;
006        width: 90%;
007         box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
008     
009        }
010

The paper sections

In this next step we’re going to add a rule that targets every section element within the ‘paper’ class. So we will tell our browser to make every section element have a width of 100 per cent. Then we give them a minimum height of 100px and position them relative to the ‘paper’ class. Finally, we give them some padding of 30px.

001    .paper section {
002         width: 100%;
003         min-height: 100px;
004        position: relative;
005        padding: 30px;
006    }

Inner link

In this simple step, we can style our links that we have with our content, or ones we may add in a later date. The colour green goes really nicely with the grey, and we have made the font more prominent by setting it to bold. We then add a nice subtle blue for when the link is hovered over – simple but effective.

001        section a {
002            color: green;
003            font-weight: bold;
004        }
005
006        section a:hover {
007        color: blue;
008        }

Section gradients

What we are going to achieve here is on every even number of the sections, we are going to add a linear gradient that will help make the paper lift up as though it has been slightly folded. So, we start by setting the top to an off-white colour and for the bottom we can use the ‘rgba’ property and play around with the opacity.

001     .paper section:nth-child(even) {
002        background: linear-gradient(180deg,     #f9f9f9 0%,
003     rgba(245, 245, 245, 0.1) 100%);
004
005     }

Add in shadows

Things are starting to take shape now and to finish off the effect, all we need to do is add in some shadows to the left and right sides of our sections to make it look like they are lifting off the page. Start with the left side, using the code as shown below.

001     .paper section:nth-child(odd):before {
002      z-index: -1;
003         position: absolute;
004        content: "";
005        bottom: 30px;
006        left: 10px;
007        width: 30%;
008         top: 50px;
009        background: rgba(0, 0, 0, 0.7);
010         box-shadow: -10px 20px 15px rgba(0, 0,     0, 0.5);
011        transform: rotate(5deg); }
012

Right-side shadows

What we’ve done so far and in this step is create a shape with a background colour of black and then position it behind our paper and then rotate it. We then finish off by giving it a drop shadow, which then allows us to give the shadows the angles we need.

001     .paper section:nth-child(odd):after {
002      z-index: -1;
003         position: absolute;
004        content: "";
005        bottom: 30px;
006        right: 10px;
007        left: auto;
008         width: 30%;
009        top: 50px;
010         background: rgba(0, 0, 0, 0.7);
011        box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
012        transform: rotate(-35deg); }
013

Top-left shadows

Now we are just going to create the top shadows on the left-hand side. These are the shadows that will sit just above the ones we now have. Be sure to play around with the positioning and perhaps the width to see if a bigger or smaller shadow looks better for your needs.

001     .paper section:nth-child(even):before {
002      z-index: -1;
003         position: absolute;
004        content: "";
005        bottom: 20px;
006        left: 10px;
007        width: 40%;
008         top: 0;
009        background: rgba(0, 0, 0, 0.7);
010         box-shadow: -10px -20px 15px rgba(0, 0,     0, 0.5);
011        transform: rotate(-5deg); }
012

Top-right shadows

So let’s finish off our shadows for good and place some on the top-right side. We are going to position it 20px from the bottom and move it 5px from the right (not ‘to’ the right). We then rotate it five degrees back the other way.

001     .paper section:nth-child(even):after {
002      z-index: -1;
003         position: absolute;
004        content: "";
005        bottom: 20px;
006        right: 5px;
007        left: auto;
008         width: 40%;
009        top: 0;                        010         background: rgba(0, 0, 0, 0.7);
011        box-shadow: 5px -25px 15px rgba(0, 0, 0,     0.5);
012        transform: rotate(5deg); }

Responsive header

Of course, it’s always best practice to make our work responsive where possible. We start with the page title; make sure the maximum width is 500px, as this is the point where the shadows don’t look so big. Then set default sizes for the h1 and h2 respectively.

001     @media screen and (max-width: 500px) {
002      h1 {
003             font-size: 25px; }
004        
005        h2 {
006            font-size: smaller; }
007

Responsive paper sections

To finish off our responsive page, we target each section. First, let’s set the right-sided shadows to only be 20px out when scaled down. Naturally, we do the same for our left-sided shadows. Of course, depending on your breakpoint (ours is 500px), the amount may be different.

001     .paper section:nth-child(even):after {
002          right: 20px; }
003         
004        .paper section:nth-child(odd):after {
005            right: 20px; }
006        
007        .paper section:nth-child(even):before {
008             left: 20px; }
009
010         .paper section:nth-child(odd):before {
011            left: 20px; } }
012

Add browser prefixes

We have gone through this tutorial not adding any browser prefixes. It is actually important to add them to real-world projects, but for the purpose of this tutorial, we didn’t really need to. However for the purposes of maintaining good practice, go ahead and add some to where we used the ‘transform: rotate’ declarations.

001     -webkit-transform: rotate(-5deg);
002  -moz-transform: rotate(-5deg);
003     -o-transform: rotate(-5deg);    
004     -ms-transform: rotate(-5deg);
005

Final thoughts

The final effect isn’t something that you would use for the whole page, it’s something that you can use for maximum effect in sections of your webpages – consider a menu or a testimonial section, for example. Subtle effects such as these really do help give your pages a boost and make them stand out from the rest.