Shahed Nasser

Posted on Feb 15, 2021 • Edited on Feb 24, 2021 • Originally published at blog.shahednasser.com

I Created Famous Logos with CSS

#css #webdev #devjournal

This article was originally posted on my personal blog

CSS is a powerful tool that can do almost anything once you have had a full grasp of it. Sometimes we're not aware of all the things you can do with CSS, and end up taking a complicated route to do what we need to be done. That's why we need to always practice CSS and grow our skills in it and knowledge of it.

I decided to take on a challenge to use CSS to create famous logos we see every day. It was a challenge that helped me think better in CSS and understand what means I can use to achieve the expected result.

I'll list the logos from the least difficult to the most difficult for me. You can check out the entire collection on CodePen.

Google

This one's concept is pretty simple. We have the letters of Google in different colors, and that's mostly it. However, there was one problem which is the font. Google uses a custom font for the logo called Product Sans, so I had to resort to what looked the closest to it from Google Fonts, and I choose Poppins.

Youtube

This was another easy one. It was a box with a triangle inside essentially. However, I had some trouble with making the rounded borders similar to the logo and had to settle for the next closest thing.

Facebook

My problem with the Facebook logo was similar to that of Google; I couldn't use the same font as it is a custom font, so I had to use Prompt as the f letter looked the most similar to the one in Facebook's logo.

Instagram

The concept of the logo is simple in Instagram, however, the gradient was a little bit tough. I had to use the help of the internet as well to get it right, but it was a nice take on gradients and seeing what more can be done with it. I haven't really used gradients heavily before and all of my uses of it were pretty simple, so it was a good practice.

This one was interesting. So, as I was doing the entire logo in CSS I had to also make the phone shape in the middle with CSS as well. The problem that I had was that I couldn't figure out how to make the left side of the phone as rounded as it is in the logo. Usually, we use rounded corners a lot which are easy to make, but I've never really tried making sort of an arc shape in CSS.

So I searched online and I came upon the border-bottom-left-radius property, which I already knew. However, one thing I probably learned as a beginner but totally forgot about now is that this property can take two values, one for length and one for percentage. The length determines the size of the circle radius or the semi-major and semi-minor axes of the ellipses, whereas the percentage is of the width or height of the box(or element). The first value is for the horizontal axis whereas the second part is for the vertical axis. This property has 4 variations to achieve the same to all 4 sides of the element.

After learning this, I was able to make the phone shape look better and I applied this as well to other logos I worked on. I never really tried using this property before so I still need more practice with it.

Twitter

This one was so frustrating to do and took the longest. I had to leave it at some point and come back to it later. Although it may not look perfect, I'm still really proud of it.

I had to rely a lot on :after and :before pseudo-elements and the border-radius property I learned with Whatsapp. I mostly needed to learn to look outside the box. I broke down the Twitter bird shape into 4 sections and worked my way through it. Although it was frustrating at some points, it was a needed practice not just for my skills in CSS, but also for my creativity as a developer.

Conclusion

I will do part 2 of this challenge and take on other famous logos. If you have ideas for logos that would present a good challenge, leave them in the comments! I also encourage you to take on similar challenges as it is a nice break from the same old and a good way to learn or relearn what we knew but forgot about.