by: Derek Perez (derek[at]derekperez[dot]com) / Chris Eppstein (chris[at]eppsteins[dot]net)
Simply awesome and customizable CSS3 Ribbon mixin for compass. Just like the Github Ribbons!
to use CSS3 Ribbons, simply import (@import "css3-ribbons") the stylesheet into your Sass/Scss document, and call the +ribbon mixin.
(eg: +ribbon("#ribbon"))
NOTE: your markup should look similar to this:
<div id="ribbon-container"><div id="ribbon"><h2><a href="http://github.com">Fork me on Github!</a></h2></div></div>
The ribbon mixin has a very customizable API:
=ribbon(selector, [bg-color: #a00 position: top-left, text-color: #fff, length: 250px])
The position argument can be one of the follow:
- top-left
- bottom-left
- top-right
- bottom-right
The CSS3 Ribbons gem is available from Gemcutter.org:
gem install css3-ribbons
to install css3-ribbons into your compass project, do the following:
compass install css3-ribbons -r css3-ribbons
inspired by These Awesome GitHub Ribbons and the initial css concept was inspired by this blog post post. credit to unindented.org for creating the initial CSS idea.