I have always been a huge fan of Bogdan’s work on Dribbble and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML & CSS. What was the outcome? I think it’s a half-way decent copy - of course the original will always look better ;)
And now let’s see what we will be creating with only HTML & CSS:
Like I said - far from perfect but still a fun experiment!
Let’s jump right in and build out the main skeleton of our project:
The white-square element is the white, rounded square in the background
The blue-square is the main blue square of the icon
The row elements inside the blue-square will be our individual lines spread across the icon
The play-button is obviously - the play button
Right now it will look like nothing, but we can change that by adding the most important part…
Pasting the entire CSS styling here would end up looking a little daunting. Instead, I’m just going to breakdown each individual section to make things more digestible.
Defaults & the White Square
See that --row-distance variable? That will come into play a bit later. For now, we want to lay the Blue Square on top of this newly creating White Square:
So far so good. The next part looks like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):
Take a few moments to read everything over - it will help you better understand what’s going on. Basically, we are adding two inner elements to each row element. We calculate the margin-top distance by using that --row-distance variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (nth-of-type).
The Play Button
Now we finish things off with a much simpler element to style:
We don’t have the ability to perfectly mimic the frosted glass effect like in the original (without the use of SVG background etc), but what we get is close enough. Thanks to meduz for pointing out the backdrop-filter property. This allows for a frosted glass look on Chromium & Safari (although sadly not on Firefox). The triangle element could also be improved by using an embedded SVG but I was determined to use only CSS for this experiment :P