DEV Community

Cover image for Learn CSS: Create the Google Logo

Learn CSS: Create the Google Logo

Jennifer Bland on January 05, 2023

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating t...
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

A simplified approximation of the logo, but pretty good. The real logo is actually pretty odd in its construction, but somehow visually works!

Designer Brilliantly Explains Why Google's Geometrically Flawed Logo Is Not A Design Error

Google's "G" logo is not geometrically perfect. It's not a perfect circle and the color arcs don't align with each other. The internet and the design

favicon digitalsynopsis.com
Collapse
 
ratracegrad profile image
Jennifer Bland

Thanks for that information about the logo. My goal was to get close enough with my design.

Collapse
 
arbrazil profile image
Arica R.

Hi Jennifer, I recently coded this logo and my work can be found here: codepen.io/arbrazil/pen/bGjbWyW. I was amazed that the format began as a box, then a circle, and finally the logo that we all know and love!

Collapse
 
ratracegrad profile image
Jennifer Bland

Alica,

The many CSS topics in this logo is why I kept it for last.

Thanks for sharing.

Collapse
 
altugdesign profile image
Altug Gurkaynak

I love the approach! Great one!

Collapse
 
ratracegrad profile image
Jennifer Bland

Altug,

Thank you so much

Collapse
 
jd2r profile image
DR

That's a really neat way of doing it! Thanks for sharing :)

Collapse
 
ratracegrad profile image
Jennifer Bland

Dominic,

Thank you so much

Collapse
 
joshuakasana profile image
Kasana Joshua

Very creative, I love this

Collapse
 
ratracegrad profile image
Jennifer Bland

Kasana,

Thank you so much.

Collapse
 
vulcanwm profile image
Medea

woah this explains it in a very nice way!

Collapse
 
shivamdangi7 profile image
Shivam Singh Dangi

Well i think creating logo with css must be pretty hard . But after looking at the code it is fairly easy as butter.

Collapse
 
Sloan, the sloth mascot
Comment deleted