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 the Google logo:
- position relative and absolute
- pseudo classes ::before and ::after
- positioning an element that is absolute
- transform: translateY
- create triangle
What we will be creating
We will create the Google logo in pure CSS. It will look like this:
Create our starter files
Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Logo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
In the style.css file add the following starter code:
body{
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: azure;
}
Dissecting the Google Logo
The Google logo is a multi-colored letter G. If we look at it closely it is basically a multi-colored circle with part of it removed and replaced with a line. Knowing that then we will use that in creating the Google logo.
Add the following line inside the body tag of your index.html file:
<div class="google-logo"></div>
Creating our multi-colored circle
The first step in creating the Google logo is to create a multi-colored logo. This first step is to create a circle with a different color for each corner. For this demo, I am going to set the circle to have a height and width of 300px.
Add the following code to your style.css file:
.google-logo {
position: relative;
width: 300px;
height: 300px;
padding: 0;
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: azure;
}
This is what our logo looks like now:
Position absolute and relative
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
If you define an element to have position of absolute, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor.
We defined the .google-logo to have a position of relative. The next step in the logo is to create the line part of the letter G. This element will have a position of absolute.
pseudo class ::before
We need to create the line part of the G letter. We will use the pseudo class :before to draw this line.
We will define the line to have a position of absolute. Then we will define its position by using the top and right properties.
We set the top to be 50%. That makes the top of the line to be at 50% of the circle. This puts the line below the center. This is not what we want. To move it to be in the center we will use a CSS trick using the transform property.
Add the following code to your style.css file:
.google-logo::before {
content: "";
/* z-index: 100; */
position: absolute;
top: 50%;
right: -95px;
transform: translateY(-50%);
width: 245px;
height: 100px;
background-color: #4285f4;
}
This is what our logo looks like now:
Creating a triangle
The last step of our logo is to create a triangle above the line. This triangle will be transparent which will hide part of our original multi-colored circle.
Here is what we want to accomplish:
We will use the pseudo class ::after to draw the triangle. To make the triangle hide part of the circle we will give it the same background color as our body which is azure.
In a previous article about creating the YouTube logo, I showed how to create a triangle in CSS. We will be doing exactly the same here.
Add the following code to your style.css file:
.google-logo::after {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid azure;
}
Final Logo
If you view your index.html file in a browser. you should see the completed Google Logo:
Let's Connect
Thanks for reading my article today. You can get the source code here.
If you like my content, please consider buying me a coffee ☕.
Top comments (13)
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
Thanks for that information about the logo. My goal was to get close enough with my design.
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!
Alica,
The many CSS topics in this logo is why I kept it for last.
Thanks for sharing.
I love the approach! Great one!
Altug,
Thank you so much
That's a really neat way of doing it! Thanks for sharing :)
Dominic,
Thank you so much
Very creative, I love this
Kasana,
Thank you so much.
woah this explains it in a very nice way!
Well i think creating logo with css must be pretty hard . But after looking at the code it is fairly easy as butter.