Github Style Corner Ribbons In Pure CSS – Ribbons.css

Category: CSS & CSS3 | July 27, 2020
Author:mfmftwtw
Views Total:580 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.

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

You Might Be Interested In:


Leave a Reply