A slightly alternative but interesting Spotify logo made with CSS. We can leverage the aspect-ratio and a border radius of 50% to make it fully round.spotify Īnd that's it. I'll be using one container div, which will hold the rounded button, then three divs inside for each line. Making the Spotify logo in CSS įirst, let's start with the HTML we are going to need. So my approach will be to use rounded ellipses, only color the top border, then use pseudo-elements we can add the round ends to it.Īlright, let's do this thing. The closest we could get would be to do a square and add a border radius, but in that case, we would not be able to curve it. These rounded lines seem simple at first, but thinking about it, we don't have a "line" in CSS, nor can we apply rounded corners to these kinds of bent lines. We first see that the logo has a big rounded button in the background and three rounded lines. Note: The above image is the current logo Analysing the logo I won't be making a pixel-perfect representation because I like this older app icon. In this article, we'll be recreating the Spotify logo. My own twist to the Spotify logo made completly with CSS 24 Mar, 2022
0 kommentar(er)
