How to design chrome logo with html and css only

Sandeep Chahal
Wednesday, December 2 2020
#tech
1

How to design chrome logo with html and css

Is it true that Chrome logo can be designed using html and css besides corel-draw? Of course, it can be done with it. Infact in a very simple way here we go!

Step1: open six div tags so that the first div serve as big container for others while the last is put inside the second to the last div like the following :


<div>

  <div></div>

  <div></div>

  <div></div>

  <div>

    <div></div>

  </div>

</div>

Step2: give each one of them id , chrome for the first div, division1 for the second, division2 for the third, division3 for the fourth, circle for the fifth and center for the six so that it look like the following:


<div id="chrome">

    <div id="division1"></div>

      <div id="division2"></div>

      <div id="division3"></div>

      <div id="circle">

       <div id="center"></div>

      </div>       

    </div>

  </div>

If you run this code it will display noting so we need style tag or css page to write our css code.

Step3: we need to design the container(chrome) that will carry everything with the following codes:


#chrome {

  border-radius: 50%;

  position: relative;

  overflow: hidden;

  height: 210px;

  width: 210px;

  left: 40vw;

  top: 30vh;

}

read full blog here

Comments

Wednesday, December 9 2020

I like it :)