DEV Community

loading...
Cover image for I Created Famous Logos with CSS

I Created Famous Logos with CSS

shahednasser profile image Shahed Nasser Originally published at blog.shahednasser.com Updated on ・4 min read

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.


Whatsapp

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.

Discussion (40)

pic
Editor guide
Collapse
luxzg profile image
luxzg • Edited

While I applaud the effort and how-to's, I'd have a different take on it. For any dev, it's also good to learn and look OUTSIDE of their comfort zone and existing toolset. For this task, I'd rather go the way of SVG, at least for more complicated / graphical logos (like Twitter, WhatsApp). SVG is essentially close relative to HTML as both are variants of XML style markup, so it comes easy to any web dev. But it offers the power of actual drawing, arcs, points, lines, etc. Twitter should be relatively simple 13-point shape. WhatsApp could be 11 or so points. And you can use something like Inkscape to actually draw any of them, for practice, then simply copy the code. Bonus is that you'll learn new skills, expand old ones, it is way more useful for later.down the line for more complex shapes, and it offers 100% replication of the official logos (no guessing, font swapping, pr approximation).

As challenge try RedHat logo in both CSS and SVG and see what takes longer (including learning Inkscape, I think you'd be faster with SVG). Edit: one with the face+hat, not just the hat :)

But as a practice run or self driven workshop to do some more CSS, these are real nice :)

Collapse
shahednasser profile image
Shahed Nasser Author

Thank you for your input. That’s another way to look at it. I might do another one for SVG as well, but the reason I chose CSS is because I use it more often so a practice is definitely needed. Also I already use Inkscape and know it’s capability so there’s no doubt in that.

Although yes it would be easier to do it all with SVG, but my purpose wasn’t to do it the easy way. I wanted to take on a challenge. I still think it’s a good idea for me to later on take on the same challenge but with SVG, so thank you for the input!

Collapse
wizlee profile image
Wiz Lee • Edited

@luxzg , any nice resources on learning svg? =) I am having trouble understanding how it works easily

Collapse
luxzg profile image
luxzg • Edited

Well, for my noob steps I usually go to sites like w3schools.com/graphics/svg_intro.asp :) But I personally also like to learn the hard way..trial error and lots of experimenting :)

If you install Inkscape you can try to create few simple files like: dot, straight line, circle, 2-point arc, triangle. Then save as SVG and open in any text editor to see how they are formed.

In basic form, it is xml style that describes shapes. Some shapes have predetermined tags, but going "drawing" mostly ends up with lines (paths). Just imagine it describes positions of pen drawing on canvas through coordinates, while defining stroke size (thickness of pen so to say) and color along the way.

Edit: just went through the link I posted real quick, it's real basic but good enough for quick start for all except paths. For a more in depth about paths you can use other resources, but I feel crucial for complete understanding is to know how vector graphics in general works. There are few types of points, simple points that is something like polyline if you have them connected, then two types of points that form a curve. If you have smooth wave like curve thats one type, if your points result in sharp .. "pointy" points (lol sorry, second language) that's other type. So if you were to draw a triangle you'd use one type, to draw a circle you'd use other type, to draw a moon-like shape you'd use third type, and to draw shape like capital letter "R" you'd mix and match. Thing is that with those 3 basic types, and using "move to" (moving pen in air) and "line to" (moving pen on canvas) you can form any line and shape, then color it with stroke and fills of different kinds... And you can create wonders, all in perfect vector graphics that can be resized infinitely.

Hope my edit helps some more to point you in the right direction :) In short SVG is VECTOR graphics described in XML. Once you learn vectors and XML you'll learn SVG automatically :D

Also, good way to learn even more about vectors, paths, strokes, and.moveTo LineTo logicnis by learning about Ghostscript and ... In few more tutorials you'll go from HTML to SVG to Ghostscript to PDF.. And then your views of digital worlds will expand crazily, yet will suddenly become "easy" and quite understandable :) I hope :D good luck!

Thread Thread
wizlee profile image
Wiz Lee

Thanks for your detailed explanation! =) Just by reading your explanation I understand more - especially that SVG is a description of coordinate (vector), stroke size and color. Will certainly try to create SVG by using Inkscape and observe what its SVG in text is.

Will explore Ghostscript too, hear about it but didn't look very close at it before. I am mainly interested in SVG due to its capabilities to create very nice performant animation in the web.

Collapse
perpetual_education profile image
Thread Thread
wizlee profile image
Wiz Lee

Going through the css-trick url. Looking compact and nice. Thank you!

Collapse
tqbit profile image
tq-bit • Edited

Can barely imagine how long the twitter logo with all those absolute positions must've taken

PS: If you want a real challenge, try to redo the Hitchhiker's Guide to the Galaxy logo, if that's even humanly possible

Collapse
shahednasser profile image
Shahed Nasser Author

It took some time but I felt so proud when I finished it

Collapse
hasnaindev profile image
Muhammad Hasnain

Damn. That's really cool. :D

Collapse
shahednasser profile image
Shahed Nasser Author

Thank you Muhammad!

Collapse
meherabsamir profile image
MeherabSamir

Splendid.You can try VS Code Logo,Github logo.

Collapse
shahednasser profile image
Shahed Nasser Author

Thanks! I’ll add that to my list

Collapse
jpchreim profile image
Jean Pierre Chreim

Great job, that's a great way to challenge ourselves and grow !

Collapse
shahednasser profile image
Shahed Nasser Author

Thanks Jean!

Collapse
uiuxarghya profile image
Arghya Ghosh

Amazing. That's really awesome :D
Keep it up!!

Collapse
shahednasser profile image
Collapse
mariorojas profile image
Mario Rojas

Nice job!!

Collapse
kalashin1 profile image
Kinanee Samson

The twitter and the Instagram logo would have been stressful I imagine, nice work

Collapse
shahednasser profile image
Collapse
ayush01arya profile image
Ayush01arya

👌👌

Collapse
rahxuls profile image
Rahul

That cutie twitter one 😍😍

Collapse
iamhtmldeveloper profile image
Amol Bhandare

Really that is awesome.... thank you

Collapse
shahednasser profile image
Collapse
brojenuel profile image
Jenuel Oras Ganawed

wow, I kinda say,, you did a good effort on the twitter logo.. nise nise 😁

Collapse
shahednasser profile image
Collapse
ybbond profile image
Yohanes Bandung Bondowoso

You've done a great job! Thanks for sharing the styles because some of them give me insights

Collapse
shahednasser profile image
Shahed Nasser Author

Thanks and glad it helps!

Collapse
lexmarie790 profile image
leximarie27

Oh wow this is awesome 👌 maybe one day I'll try a similar project :)

Collapse
shahednasser profile image
Shahed Nasser Author

I recommend as it is a nice practice

Collapse
azimjonkamolov profile image
Azimjon Kamolov

A lot of work, good job

Collapse
shahednasser profile image
Collapse
jayarghargh profile image
Justin R

these are fantastic :) Has anyone requested the wavy Coke logo?

Collapse
shahednasser profile image
Shahed Nasser Author

No they haven’t, thank you for the suggestion!

Collapse
manishbatra4 profile image
Manish Batra

Good job 👍🏻

Collapse
shahednasser profile image
Collapse
amberitas17 profile image
amberitas17

Can you teach me in css artworks? I want to learn

Collapse
shahednasser profile image
Shahed Nasser Author

Try to take on challenges like this one and others as well. Even if at first it’s hard and you have to google it, with time you’ll get better

Collapse
lilkedus profile image
Kedus Leji Yared

Twitter took my breath away 👏🏽👏🏽