Single Element Pure CSS3 Double Fold Ribbon

View code Play Walkthrough

Description

Ribbons are an extremely popular design element.

This is a simple experiment to create a 3D double fold ribbon using just one HTML element.

The ribbon design is made using 4 CSS3 gradients combined together and the complex folds of the ribbon is emulated using a clever combination of pseudo elements, box shadow and borders.

You can edit the text of the ribbon which will change its width as well as the width of the ribbon ends because of its flexiblity.

This demo works with all major browsers.

Design by Premium Pixels.

Add New Comment

7 Comments

(close)
andrej

andrej

this is madness!!!

seriously craziest and most interesting css I have seen in years. Impressive :)

One uprade probably would be transparency though. Just on a sidenote ;)

ebhoren

ebhoren

Wow, killer technique.
Really impressive.
Transparency should make this trick the best way to build ribbon.

Imran Malik

Imran Malik

Stunning… This simply show how powerful CSS3 is. Hope to see some other COOL stuff using CSS3 only.

Ralph

Ralph

Nice one… never thought it would be possible with one element, but of course with gradients we can ‘draw’ stuff too.

Chris

Chris

Awesome. But I find myself wondering how to ever use any of these cool effects in a content-management-system based site, like Drupal, where you have so little control over markup.

Thanks!

Andrew Kenny

Andrew Kenny

Great technique. I was actually looking for a pure CSS ribbon a few days ago and just came across this completely by accident. Too late for this web project but will add it to the toolbox.

5x 10x 15x 20x

7 Comments

Description