Membuat Logo Google Chrome dengan CSS

Hallo teman-teman, Bertemu kembali dengan saya diwebsite ini. Seperti lazim ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia situs.

Di Kesempatan kali ini saya akan memberikan panduan mengenai Cara Merancang Logo Google Chrome dengan CSS.  Seperti lazim ya teman-teman, pada membangun logo google chrome ini teman-teman telah lebih dahulu mengenal dengan HTML dan CSS. Karena basicly dari sebuah situs itu ya pasti ada yang namanya HTML dan CSS.

Oke Seketika saja kita mulai, Pertama-tama teman-teman buka text editor yang teman-teman gunakan, lalu kemudian ketik script HTML dibawah ini :

<div class='wrapper'>
  <div class='icon'>
    <div class='fix'></div>
    <div class='part1'></div>
    <div class='part2'></div>
    <div class='part3'></div>
  </div>
</div>

Jikalau telah dengan HTMLnya, langkah berikutnya teman-teman masukan kembali script CSS nya seperti dibawah ini :

body {
  background: #F8F6F5;
}

.wrapper .icon {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  box-shadow: 0 0 7px #222;
  overflow: hidden;
}
.wrapper .icon::before {
  content: ;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  background: #4C8EC1;
  border: 10px #F8F6F5 solid;
  z-index: 1000;
}
.wrapper .icon .fix {
  height: 150px;
  width: 300px;
  position: absolute;
  left: 150px;
  top: -60px;
  background: #E65141;
  z-index: 1000;
}
.wrapper .icon .part1,
.wrapper .icon .part2,
.wrapper .icon .part3 {
  height: 150px;
  width: 300px;
  position: absolute;
  transform-origin: center bottom;
}
.wrapper .icon .part1::after,
.wrapper .icon .part2::after,
.wrapper .icon .part3::after {
  content: ;
  height: 150px;
  width: 300px;
  position: absolute;
}
.wrapper .icon .part1 {
  background: #E65141;
  top: -60px;
  z-index: 1;
}
.wrapper .icon .part1::after {
  transform: rotate(-60deg);
  left: -50px;
  background: #E65141;
}
.wrapper .icon .part2 {
  background: #FCD209;
  transform: rotate(120deg);
  top: 20px;
  right: -55px;
  z-index: 3;
}
.wrapper .icon .part2::after {
  transform: rotate(-60deg);
  left: -40px;
  background: #FCD209;
}
.wrapper .icon .part3 {
  background: #4CB749;
  transform: rotate(240deg);
  top: 20px;
  left: -55px;
  z-index: 2;
}
.wrapper .icon .part3::after {
  transform: rotate(-60deg);
  left: -50px;
  background: #4CB749;
  z-index: 1;
}
.wrapper .text {
  position: absolute;
  top: 680px;
  right: 0;
  bottom: auto;
  left: 0;
  font-size: 48px;
  text-align: center;
  font-family: Open Sans Condensed;
}

Disini kita menggunakan yang namanya CSS internal dan teman-teman tinggal meletakan script CSS yang diatas tadi kedalam tag htmlnya atau lebih tepatnya diletakan diantara tag head diHTML.

Jikalau telah silahkan teman-teman simpan dengan nama google.html lalu kemudian silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jikalau berhasil karenanya hasilnya akan seperti di gambar dibawah ini :

Oke teman-teman, kalau hasilnya telah seperti di gambar diatas karenanya teman-teman telah berhasil pada Merancang Logo Google Chrome dengan CSS. Dan silahkan teman-teman modif sesuai yang teman-teman inginkan.

Oke lumayan sekianlah pembahasan kali ini mengenai cara Merancang Logo Google Chrome dengan CSS, semoga dapat bermanfaat bikin teman-teman dan hingga bertemu di pembahasan berikutnya.

Terimakasih

Sumber https://kursuswebsite.org