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
interesting approach.
btw. there is missing colon in
margin 10vh auto 0;
for#google
ruleah yes, thanks for pointing that out.
may you please also implement its animation?
Have tried it out ☺️ viewing G but not animating like your post gif
click bate :))
How ???
nice. this page on Instagram should mention your article
dev.to/rs9110/google-logo-with-jus...
Thanks alot
I am going to try this out🔥🔥
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.
That's creative
amazing