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.
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.