Let’s Create Paper with CSS
videos

Let’s Create Paper with CSS

on Jan 13th 2011 with 65 comments
Tutorial Details
  • Topic: Advanced CSS
  • Format: Video
  • Length: 15 Minutes
Download Source Files
Demo View It Online

If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.

Final Product

Press the HD button for a clearer picture.

Subscribe to our YouTube page to watch all of the video tutorials!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://laroouse.com piyanistill

    wooow very nice thanks a lot tutsplus

  • Andrew Smith

    Nice! I like the effect quite a bit.

  • http://merrick.christensen@gmail.com iammerrick

    Write document.body.contentEditable = true; makes it feel even more like paper when you can write messages on it.

  • http://ideasnetstudio.com Paulo Griiettner

    Man… I’m every day getting more impressed with the evolution of the technology…

    CSS3 with conjunction to HTML5 is satrting a whole new way of how to do web…

    The sad part of this is the eternal issue with Internet Explorer… People from Microsoft thougt one day that they could rule the WWW world, and here is the ultimate proof that they were wrong. Who rules the WWW are the users… we decide where to go and what we want in our websites.

  • http://twitter.com/idilciise Idil

    Great tutorial though I don’t think I’ll be using CSS3 on my projects anytime soon. Good to learn though.

    • http://www.nouveller.com/ Benjamin Reid

      You’re missing out!

      :D

  • http://www.wordimpressed.com/ Devin Walker

    Creative use of CSS3

  • http://sig.ly/ Nico Hämäläinen

    Nice video. :)

    You should’ve centered the ta(o)pe.png image like this in my opinion:

    .page:before {
    content: ‘ ‘;
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -64px; /* pull back half of image size */
    }

  • Tom

    Really amazing tut Jeffrey!!!

    I just hope, that IE gets less and less popular :-)

  • http://youssefboubdir.me.gp Youssef BOUBDIR

    Great tip, thanks a lot

  • http://edward.pinoywebcentral.com edwardson sarenas

    Hi Jeffrey, add some rotation. Maybe some 30 degrees. :))

    Nice tutorial..

  • http://elgard-et-elgard.com/ Laue

    figure {
    width: 128px;
    height: 38px;
    display:block;
    position:absolute;
    top:-10px;
    left:50%;
    margin-left: -64px;
    background: rgba(255,255,255,.8);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); wtf 1|2|3|4 don’t you know degrees ?! */
    }

    ok you’ll have to put a in the markup just before the first .page p tag and get rid of the .page:before description but it’s worth the economy isn’t it ?

    ???

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      What does this relate to?? You’ll have to put a what into the markup?

      • http://elgard-et-elgard.com Laue

        hum sorry i missed the right thing to do ; you might have understood:

        … a <figure></figure> in the markup just before the first .page p tag

        ;)

  • Brad

    Excellent!

  • http://www.antarjaal.in Ankur Gupta

    Hi,

    This was a great tutorial. Thanks a lot. :-)

  • http://spasquini.interfree.it Sauro

    I can’t understand why to use video on tutorials, expecially on coding tutorials, where a written text can be way more easy to follow, to remember, to understand.
    It is also possible to print it apart, in order to read it after, in a work pause or in front of you own computer, outside from the job.
    To prepare a video is also more complicate than to write down a text, step by step, and it’s even taking more space on servers.

    I really like all TUTS+ group of sites, I also tought to purchase the Premium, but this kind of things let me to do a step backward on my decision.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Because many people swear by them. I think it’s nice to post a mix between text and screencast tuts.

      When we ran our recent survey, the #1 request was for more video tuts.

    • Anony

      Is there any reason why you cannot “View Source” on the Demo and get the code so you can print it?

      Text tutorials are good, video tutorials are good. This could just be your own preference, perhaps you might be a person that learns from reading, other people might learn better from watching someone else work and be visual learners. I see advantages to both, but prefer video because I can see the author switch between programs and know exactly what they are referring to when they are talking about it. Depending on the length and complexity of the tutorial, written tutorials can be consfusing if you miss one line that tells you to switch to a different file. Watching someone do it while they narrate what they are doing, I find, is much easier to follow. Plus if they make a mistake they see it doesn’t work and usually fix it immediately. In a written tutorial, I find, the author assumes something that is not obvious to the reader and expects their code to work and the reader to understand.

      • http://pixelworkshop.fr/ Keliah

        Right click > View Source > Click on style.css

  • limepix

    Very nice tutorial!! Thanks a lot!

    :)

  • http://javedweb.com/blog/ Javed Gardezi

    Nice work..!! It help me in creating awesome applications..!!

  • http://www.nouveller.com/ Benjamin Reid

    I particularly like the background repeat, nice idea.

  • http://zecel.com Shishant Todi

    Awesome tip, this makes me feel more sad for IE.

  • Damion

    Great tutorial,

    I needed background size a couple of weeks ago and I found that you can use it for Firefox.

    https://developer.mozilla.org/en/CSS/background-size

  • http://www.lastrose.com LastRose

    Here is realistic looking tape done with CSS (i just did the webkit version, the firefox should be easy to do based on that)

    .page:before {
    -webkit-box-shadow: rgba(0, 0, 0, 0.246094) 0px 0px 1px;
    -webkit-transform: skew(9deg);
    background: rgba(255, 255, 255, 0.148438);
    border: 1px solid rgba(255, 255, 255, 0.242188);
    content: ‘ ‘;
    display: block;
    height: 38px;
    left: 40%;
    position: absolute;
    top: -15px;
    width: 129px;
    }

    • http://www.lastrose.com LastRose

      sorry about the weird numbers,

      -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 1px;
      -webkit-transform: skew(9deg);
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);

      • http://elgard-et-elgard.com Laue

        …and without modifying the markup ! nice.

        i didn’t managed to, with the :before property :(

      • //adrusi.com/ Adrian

        dotted border might be a bit nicer, make it look like it has jagged edges

  • http://www.serprisedesign.co.uk Kevin

    Wow, really nice effect and pure CSS which is always a bonus =)

  • http://www.j2designstudios.com Jim

    It’s amazing what you can do with CSS when you think about it. Great tut! I might have missed it in an earlier video, but what was the “vcss” command you used in Coda? That could be useful.

    • http://nordahl.me Kenneth Nordahl

      I think it is just a Coda clip with tab trigger, might be wrong tho.

  • http://www.andredublin.com Andre Dublin

    Nice tip, I tried to play around with :before to make a page curl on the bottom right corner instead with pure css, but no luck so far. Guess I’ll have to go with the background-image property instead.

    You can also use the :after puesdo-selector to apply a deeper shadow where the paper lifts off the background.

    Border-radius should accept negative values to create concave corners….oh well

  • izC

    I love u jeff :D

  • Tommi

    I love u jeff :D :)

  • http://www.buzz-webdesign.co.uk Buzz

    Great tutorial, it’s amazing what you can achieve with CSS3.

  • http://www.adrice.co.uk Adie

    Top tutorial.

    Some great snippets of CSS3 used here. Love the background and border radius usage

  • Edward Longman

    Great tutorial got me thinking and I did a bit of fiddling so see what happens when you paste this code to the end of “style.css” then look at the page in safari or chrome
    .page{
    -webkit-line-break: after-white-space;
    -webkit-nbsp-mode: space;
    -webkit-user-modify: read-write;
    word-wrap: break-word;
    }
    .page:focus{
    -webkit-box-shadow:0px 0px 3px 2px orange,
    0 2px 10px 1px rgba(0,0,0,.2);
    -moz-box-shadow:0px 0px 3px 2px orange,
    0 2px 10px 1px rgba(0,0,0,.2);
    box-shadow:0px 0px 3px 2px orange,
    0 2px 10px 1px rgba(0,0,0,.2);
    }
    .page:before {
    content: ‘ ‘;
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    top: -0px;
    left: -40px;
    -webkit-transform:rotate(-48deg);
    -moz-transform:rotate(-48deg);
    transform:rotate(-48deg);
    display: block;
    }
    .page:after {
    content: ‘ ‘;
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    bottom: 0px;
    right: -40px;
    -webkit-transform:rotate(-34deg);
    -moz-transform:rotate(-34deg);
    transform:rotate(-34deg);
    display: block;
    }

    If you want the note to be editable in firefox like it is in chrome and safari then you just need to add the attribute “contenteditabe” to the “.page” tag hope you have fun

    Ed

  • http://www.nucreativa.com Ary Wibowo nucreativa

    wow!!! great tutorial… thanks :D

  • http://www.lovercorner.com ของขวัญ

    Thanks for good tips. :)

  • http://tdolsen.net Torkild Dyvik Olsen

    I’m just going to leave this here: http://tdolsen.net/showoff/
    FF or Chrome, but should work somewhat all over.

    Nice tutorial and code!

  • http://ohotgirl.com mr.Pham

    Great tip, thanks a lot ^^

  • Dwayne

    This is very useful for me. Thanks.

  • http://blog.johnsthomas.com John

    That is really cool. Thanks for the tip.

  • sam

    Jeff u rock. You by far give the best tuts on the net (do you give classes?). God bless you!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Sam! :)

  • http://www.amitpatil.me Amit

    CSS3 will rock the web

  • http://nicolasgallagher.com Nicolas Gallagher

    Similar thing done twice before. Wonder if you’ve come across them. Links below.

    http://lab.galengidman.com/css3stickynote/
    http://konigi.com/tools/css-sticky-notes

  • http://www.abijith.com Abijith K

    Awesome..CSS3 rocks !!

  • http://www.tdpworkspace.org TDP Workspace

    Pretty awesome thanks for share it :)

  • meltz

    great tutorial .. love it

  • http://www.wpvine.com Vishu

    Another extremely awesome tut Jeff!! I find myself in a different world when viewing your screencasts, learned a lot from you and still continue to, always keep enlightening the web dev world like this, you’re the best!

  • http://www.carlosja.com CarlosJa

    pretty cool effect… not really sure what i would use it with.

  • http://www.somnia-themes.com Nick

    Very nice tutorial. CSS3 is awesome. At one day all browsers will support CSS3.

  • Swapnil

    Lovely

  • http://kianhome.blogspot.com/ KianHome

    nice post..!!! god job..!!

  • Steve Griffith

    Great use of the gradient. Love the concept.

    I didn’t really like the tape png though. However, since we are using CSS3 here why not do this instead of adding the background image of the tape?

    background: rgba(222,222,222, 0.3);
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);

    I put this code into the .page:before style.

    • Steve Griffith

      You could also add the same (or similar code) into a .page:after style to add tape at the bottom of the paper.

      .page:after{
      content: ‘ ‘;
      background: rgba(222,222,222, 0.3);
      -webkit-transform:rotate(10deg);
      -moz-transform:rotate(10deg);
      -o-transform:rotate(10deg);
      transform:rotate(10deg);
      width: 145px;
      height: 38px;
      position: absolute;
      bottom: -15px;
      left: 20%;
      display: block;
      }

  • Muhammad

    Super sweet, programming and web design is the S*#&#

  • kevin

    I could read a thousand books on this topic but I would never be able to replicate what Jeffery has done in just over 10 minutes. . I have spent thousands of Dollars on online Video courses without ever knowing that Jeffery is here. Thanks Jeffery

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Kevin!

  • http://avonture.be/allevents cavo789

    Great tutorial and demo ! Thanks for the sharing !

  • http://nettuts mudassar butt

    jeff,,,,nice

Newer Comments →