See the Pen Flat icon by _Bosco by Katy DeCorah (@katydecorah) on CodePen
I recreated the Dribbble shot Flat icon by Bosco.
Each award is a single element (
.award) that uses modifier classes to decide the color (
.bronze) and the type (
.ribbon). The 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,
$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 give 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?
Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.