Connect with us!

Google symbol design using HTML and CSS tutorial using VSCode

Salow
January 27, 2022
CSS, Symbol

CSS is a style sheet language which can help you to style your own webpage. We are all familiar with the various social media platforms like Google, Youtube and Facebook and have you wondered how they create them in CSS.

In this article we will see how to program in CSS to create a Google Symbol.

The most important properties that we use to create the heart element are:

Position is a common property which helps us to specify the type of positioning method used for an element.

Background is also a common property which is used to specify the background of an element.

Transform very useful property which applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move and skew elements.

Here is the CSS class for implementing it.

Table of Contents

Google symbol design Code Block

.google {
  position: relative;
  border-top: 20px solid #ea4335;
  border-right: 20px solid #4285f4;
  border-bottom: 20px solid #34a853;
  border-left: 20px solid #fbbc05;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.google::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 48px;
  height: 20px;
  background: #4285f4;
}
.google::after {
  content: "";
  position: absolute;
  border-top: 40px solid transparent;
  border-right: 40px solid #23272e;
  top: -20px;
  right: -20px;
}

Yay! We have created a Google symbol using CSS. Its very simple to use the class above and create this element.

Here is the output:

Google symbol using CSS and HTML

You can find the complete coding tutorial in the following Youtube video.

Video Tutorial for Creating Google Symbol

Google Symbol Shorts

Here is the complete code of HTML and CSS for creating Google Symbol

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
.google {
  position: relative;
  border-top: 20px solid #ea4335;
  border-right: 20px solid #4285f4;
  border-bottom: 20px solid #34a853;
  border-left: 20px solid #fbbc05;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.google::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 48px;
  height: 20px;
  background: #4285f4;
}
.google::after {
  content: "";
  position: absolute;
  border-top: 40px solid transparent;
  border-right: 40px solid #23272e;
  top: -20px;
  right: -20px;
}
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Google Symbol</h1>
    <div class="google"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own google symbol using CSS and HTML. Good luck and happy coding !