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

Category: CSS & CSS3 , Recommended | August 30, 2016
Author: stevenmhunt
Views Total: 2,356
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:

  • gold
  • silver
  • bronze

Sizes:

  • tiny
  • small
  • medium
  • large
  • huge

Ribbon Patterns:

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

Country flags:

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

You Might Be Interested In:


Leave a Reply