Create Flat Medals With Ribbons Using Pure CSS / SCSS – Badgerly


Author: stevenmhunt
Views Total: 1,314 views
Official Page: Go to website
Last Update: August 30, 2016
License: MIT

Preview:

Create Flat Medals With Ribbons Using Pure CSS / SCSS – Badgerly

Description:

A pure CSS/SCSS library used to create flat style badges/medals with ribbons on the webpage. Without any JavaScript.

How to use it:

Load the core style sheet file badgerly.css in the document’s head section.

<link rel="stylesheet" href="badgerly.css">

Load the Font Awesome 4 if you want to display custom icons in the middle of the medals.

<link rel="stylesheet" href="font-awesome.min.css">

The basic html structure to create a medal.

<div class="badge large">
  <div class="ribbon red">
  </div>
  <div class="circle silver border">
    <i class="fa fa-star"></i>
  </div>
</div>

Colors:

Sizes:

Ribbon Patterns:

  • red
  • orange
  • yellow
  • green
  • blue
  • purple
  • pink
  • black
  • rainbow

Country flags:

  • usa
  • netherlands
  • mexico
  • hungary
  • france
  • canada
  • italy
  • russia
  • germany

See also  Pure CSS / CSS3 Loading Indicator Collection - Loading Effect

Leave a Reply

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