So, here's how to create the Google logo with just HTML and CSS.
First, place a div in your html with an id of google.
<div id="google"></div>
Then, hop into css and input the following code.
#google {
position: relative;
border-top: 100px solid #EA4335;
border-right: 100px solid #4285F4;
border-bottom: 100px solid #34A853;
border-left: 100px solid #FBBC05;
border-radius: 50%;
background-color: #FFFFFF;
width: 300px;
height: 300px;
padding: 0;
margin: 10vh auto 0;
}
That should leave you with a circle that has 4 of the Google's color. To turn that into a 'G', input the code below.
#google::before {
content: "";
z-index: 100;
position: absolute;
top: 50%;
right: -95px;
transform: translateY(-50%);
width: 245px;
height: 100px;
background: #4285F4;
}
#google::after {
content: "";
z-index: 101;
position: absolute;
border-top: 200px solid transparent;
border-right: 200px solid #FFFFFF;
top: -100px;
right: -100px;
width: 0;
height: 0;
}
Voila, you just created the Google logo using only HTML and CSS. ✌️
Top comments (15)
A little tip for future posts, you can embed a demo of your code by writing it somewhere like JSFiddle and then embedding it like so
may you please also implement its animation?
interesting approach.
btw. there is missing colon in
margin 10vh auto 0;for#googleruleah yes, thanks for pointing that out.
Have tried it out ☺️ viewing G but not animating like your post gif
click bate :))
How ???
That's creative
Thanks alot
nice. this page on Instagram should mention your article
dev.to/rs9110/google-logo-with-jus...
I am going to try this out🔥🔥
Magnifique 🔥🔥🔥
amazing
Looks quite different to the real logo. Needs some work
If you want it to be exact you'll have to do something like:
I think Rosis did a good job considering he was just using borders and pseudo elements.