HTML & CSS: How to Create a Fluid Width Stack of Paper With a Single Element

Last year WebDesign.Tutsplus published a short tutorial showing how to create a stack of paper using a single html element and some css. It was nice little tutorial but the end effect wasn’t fluid. It relied on hard coded widths and so didn’t look very nice when it scaled.

I felt that making the boxes a fluid width was something I could do so I made a quick demo showing how to create fluid width stacks of paper. While I was at it I also added some subtle drop shadows for extra depth.

The secret for making this work is not using fixed width elements for the pages and instead using percentages – and then centering the elements. Since the before and after pseudo elements are absolutely positioned I set the left position to 50% and then used translateX(-50%) to push the element back over again.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Related Posts

17 Feb 2024

Creating a Custom HTML Elements: A Colour Picker

I recently needed to create my first custom element - a custom color picker. I wanted to improve the color picker feature on Brush Ninja however I couldn’t find an existing solution that met my needs so I decided to...
20 Feb 2014

Fixing CSS Transitions in Google Chrome

I had a weird problem yesterday where I had applied a css transition to an element that was fading from opacity:0.1 to opacity:1 – and along the way it seemed to change in size or position.The reason for the change...
20 Jul 2016

Empathy in Web Design

I wasn’t able to make WordCamp Europe this year, but they’ve been really quick at getting all of the talks online, and so I have been watching some of them – and this one stood out.Morten Rand-Hendriksen is an experienced...
25 Dec 2012

Learning to Accept CSS3: Creating CSS3 Windows

People are resistant to change. It’s strange since I consider myself quite forward thinking, but I still find it takes me a while to accept new things. I’ve been using CSS3 effects for quite a while now – as have...
31 Jan 2019

Javascript VS. HTML & CSS

A couple of weeks ago I wrote about the frustration and in many cases, arguments, happening between designers (CSS & html specialists) and Javascript developers. Increasingly Javascript developers, who are experts at programming, are taking on CSS and HTML roles....
29 Nov 2012

CSS Highlight Colour

When I design a website I really like to add small touches that most people won’t notice. In fact there’s a blog I follow that is dedicated to these small areas of delight. One of the things I like to...