Advertisement
HTML/CSS

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

by

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

Related Posts
  • Web Design
    CMS
    Tumblr Appearance Options: TextTumblr 25 retina
    As it happens, our Tumblr theme doesn't require any custom text. However, as we're using the Tumblr base, there are already some text options included in the theme, so it's well worth taking a look at. We're going to use a Google Analytics ID as an example of Text Options usage.Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: ImagesTumblr 22 retina
    Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    Applications and Tools
    Building a Complete Website With the Gumby FrameworkGumby site build retina
    In this, our final video tutorial on Gumby, we're going to put all we've learned into practice. We're going to build a complete website using Gumby's semantic grid, parallax effects, toggles and switches, covering workflow best practices as we go. There's plenty to cover, so let's get started!Read More…
  • Web Design
    Applications and Tools
    Using Gumby's Powerful Toggles and SwitchesGumby toggles and switches retina
    In this screencast tutorial I'm going to walk you through one of Gumby's most powerful features; toggles and switches. This toolset allows you to trigger actions on and off, which can be helpful in all kinds of situations. We're going to use toggles to bounce a kitten (though obviously, you should never bounce a kitten..)Read More…
  • Web Design
    Applications and Tools
    Working With Gumby's Parallax ExtensionGumby parallax retina
    Having covered how to install the Gumby framework and how to work with its semantic grids (plus Sass and Compass), it's now time to dive into some of Gumby's extensions. The first extension we're going to play with is the parallax module.Read More…