I recreated the Dribbble shot Flat icon by Bosco.
Each award is a single element (
.award) that uses additional classes to decide the color (
.bronze) and the type (
.ribbon). These additional classes allow for mix and matching of the colors and award types. The award is scalable based on
font-size. Try changing the
$fontSize in the Sass to see the scaling powers. Please note that the awards are so adorable when the value is small.
$fontSize controls the size of the number and ultimately adjusts the size of the element (all ems all errrthang),
$size dictates the actual size of the award around the number. Try adjusting
$size in the Sass to change the proportion of the award to the number.
The awards are all styled the same, but
.badge provide different styles for the pseudo elements. I dreamt up the ribbon tails for
.ribbon quickly. I manipulated the border by styling a transparent
border-bottom-color, which created two triangles for the ribbon tails. I added height to the element to elongate it into a ribbon. I created one tail out of each pseudo element.
I started to sweat a little while creating the badge. I didn’t think I had enough pseudo elements to achieve what looks like a hexagon. In the end, I managed to skimp on a side. I created a rectangle out of the
:before and used a horizontal gradient to create the three stripes. Then I created a triangle out of the
:after, but kept it solid colored. Luckily the medallion fit nice and snug up where the triangle and rectangle met.
Can you tell that I got an iPad for Christmas?