Ui Parade's CSS Ribbon on a diet
I'm an assiduous follower of UI Parade and I'm a big fan of their live tools, especially the Ribbon builder. They made a very good job there.
It looks amazing and we can customize the Ribbon's width, end size, stitching & shadows, colors, etc.
Probably because of so many customizing options, the generated HTML is long and it doesn't look right to me:
<div class="ribbon"> <div class="ribbon-stitches-top"></div> <strong class="ribbon-content"><h1></h1></strong><div class="ribbon-stitches-bottom"></div></div>
I'm a bit "clean markup" psycho so I had to change it and make it cleaner and smaller.
In this experiment I managed to achieve the same result but just with the following markup:
<h1 class="ribbon"><strong></strong></h1>