Membuat Logo Google Chrome dengan CSS

Hallo teman-teman, Bertemu kembali dengan saya diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada Kesempatan kali ini saya akan memberikan tutorial tentang Cara Membuat Logo Google Chrome dengan CSS. Seperti biasa ya teman-teman, dalam membuat logo google chrome ini teman-teman sudah lebih dahulu mengenal dengan HTML dan CSS. Karena basicly dari sebuah website itu ya pasti ada yang namanya HTML dan CSS.

Oke Langsung saja kita mulai, Pertama 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>

Jika sudah dengan HTMLnya, langkah selanjutnya 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.

Jika sudah silahkan teman-teman simpan dengan nama google.html lalu kemudian silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika berhasil maka hasilnya akan seperti pada gambar dibawah ini :

Oke teman-teman, jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Logo Google Chrome dengan CSS. Dan silahkan teman-teman modif sesuai yang teman-teman inginkan.

Oke cukup sekian pembahasan kali ini tentang cara Membuat Logo Google Chrome dengan CSS, semoga dapat bermanfaat buat teman-teman dan sampai bertemu di pembahasan selanjutnya.

Terimakasih

Kategori