Quick Tip: Create a Stack of Paper With a Single Element
videos

Quick Tip: Create a Stack of Paper With a Single Element

on Jan 31st 2013 with 21 comments
Tutorial Details
  • Screencast duration: 10 mins
  • Difficulty: Beginner
  • Topic: CSS

Today we’re going to do something really simple (but effective) with CSS. We’re going to take a single div element, then style it to emulate a stack of paper, as popularized by Orman Clark.

The Screencast


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

The Demo

Adi Purdila is AdiPurdila on Themeforest
 
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.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Don Drapper

    Dear Web Tuts, please stop paying writers for cheap tutorials. Sincerely, the web design community.

    • Omar Naveed

      Dear Don, I like to eat potatoes.

    • GorillaWma

      It’s just Quick TIp by Webdesign+ editor, so why comment something like this?

    • Adi Purdila
      Author

      The intention wasn’t to create a cheap tutorial, but merely to show a very simple technique as a quick tip. Sure, you can add shadows and stuff for a better looking result, but doing that in under 10 minutes is kinda hard :)

  • http://twitter.com/martinjharvey Martin Harvey

    Nice quick tip showing a great, simple and effective technique ;) Not everyone reading WebdesignTuts would be familiar with this technique and the skill level for this does state beginner!

  • http://www.facebook.com/fujianto Septian A. Fujianto

    nice, I’ve seen this effect on some WP theme and curious how to apply it..

  • Easo

    Nice tip. I’ll certainly use it, Thanks! :)

  • alfa

    excuse me. I’m a beginner. What is box::before and box::after ? Where could I read about it ?

  • Joren Van Hee

    Nice tut. I’ve slightly improved the fluid version ( http://codepen.io/JorenVanHee/pen/apeJr ). I don’t use percentages in my example, except for the width.

    • Laura Moraiti

      Nice

  • Dan Kholm

    Hello Adi. Would you make a video session about retro design markup?

    • Adi Purdila
      Author

      Hey Dan. That’s actually an interesting idea, I’ll think about it. Thanks :)

      • Dan Kholm

        I think it would be very interesting for you to. I noticed what you usually make a simple and clean design. And it would be very interesting to see some out of the ordinary design and html from you.

  • http://twitter.com/HumbleSpace Humble Space

    wow its working fine on IE10, but not FF. seriously IE?

  • http://www.facebook.com/ralph.glimmerveen Ralph Glimmerveen

    dear adi i really appreciate your tutorials but wat is so difficult to answer te questions of your posts?why is webdesign tuts+ adding content making tutorials and don’t answer questions if you make a tutorial what isn’t working (the coming soon timer) isn’t working in ff en ie9

  • Nick

    This is really awesome. Thanks.

  • Pingback: 15+ Fresh And Stunning CSS3 Tutorials | Web Development, Search Engine Optimization, Social Media Marketing Guru

  • SerzN1

    poor technik and nothing intresting

    who’s stopping you to do
    right absolute position instead width of :after and :before elements