Author: | mfmftwtw |
---|---|
Views Total: | 743 views |
Official Page: | Go to website |
Last Update: | July 27, 2020 |
License: | MIT |
Preview:

Description:
Ribbons.css is a CSS library to create ‘Form Me On Github’ like corner ribbons on the webpage.
How to use it:
1. Download and place the Ribbons.css
stylesheet in the document.
<link rel="stylesheet" href="./src/css/ribbons.css" />
2. Add the CSS class ribbon
to your ribbon link and done.
<a class="ribbon" href="https://cssscript.com">Fork me on CSSScript</a>
3. Determine the position of the ribbon with the following CSS classes:
- ribbon-top-right
- ribbon-bottom-left
- ribbon-bottom-right
<a class="ribbon ribbon-top-right" href="https://cssscript.com">Fork me on CSSScript</a> <a class="ribbon ribbon-bottom-left" href="https://cssscript.com">Fork me on CSSScript</a> <a class="ribbon ribbon-bottom-right" href="https://cssscript.com">Fork me on CSSScript</a>
4. Customize the ribbon size.
- sm: small
- md: middle
- lg: large
<a class="ribbon ribbon-sm" href="https://cssscript.com">Fork me on CSSScript</a> <a class="ribbon ribbon-md" href="https://cssscript.com">Fork me on CSSScript</a> <a class="ribbon ribbon-lg" href="https://cssscript.com">Fork me on CSSScript</a>
5. Change the ribbon theme.
- success
- primary
<a class="ribbon ribbon-success" href="https://cssscript.com">Fork me on CSSScript</a> <a class="ribbon ribbon-primary" href="https://cssscript.com">Fork me on CSSScript</a>