Single Element Pure CSS3 Double Fold Ribbon
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.
8 Comments
Description
8 Comments
(close)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
Wow, killer technique.
Really impressive.
Transparency should make this trick the best way to build ribbon.
Imran Malik
Stunning… This simply show how powerful CSS3 is. Hope to see some other COOL stuff using CSS3 only.
Ralph
Nice one… never thought it would be possible with one element, but of course with gradients we can ‘draw’ stuff too.
Morteza
Thanks
very good
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
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.
nobody
Awesome
Great technique
Thanks