Just a quick one today. I originally planned to achieve this “layered paper” effect using :before and :after pseudo elements, but then set about trying to do it purely using the CSS3 box-shadow property. That way I’d have an :after free and can add as many “layers” as I want.

Pretty straight-forward, but quite a neat solution I think, check the result below;

This snippet was featured on CSS-Tricks.

Enjoy!

In a recent project I set myself the challenge of creating a pure CSS ribbon effect using as little markup as possible. Why? I’m big on progressive enhancement and love how css3 empowers us to create attractive UIs without using hefty imagery. You can see the result in this jsFiddle;

The ribbon is achieved using a single block level element with the class ribbon wrapped around a child element with the class ribbon-content. In this example I’ve used a paragraph containing a strong tag to demonstrate how semantic the code can be.
Continue reading →