Github Style Corner Ribbons In Pure CSS – Ribbons.css


Author: mfmftwtw
Views Total: 554 views
Official Page: Go to website
Last Update: July 27, 2020
License: MIT

Preview:

Github Style Corner Ribbons In Pure CSS – Ribbons.css

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.

<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>

See also  Mobile-friendly Floating Sidebar Navigation In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *