Membuat Logo Baru Instagram dengan CSS

hallo semua, lama gk berbagi nih... gimana progress belajarnya? semoga meningkat terus ya udah pada tau kan Instagram punya logo baru? ya....walopun banyak yg lebih suka dengan logonya yg lama

but, btw kali ini saya akan berbagi bagaimana membuat logo baru Instagram ini dengan CSS silahkan lihat previewnya: <a href='http://codepen.io/maddock/pen/dMEVPO'>http://codepen.io/maddock/pen/dMEVPO</a>

okeh.....mari kita mulai dengan membuat htmlnya

<div class="box"> <!-- kotak luar -->
  <div class="box-in"></div> <!-- kotak dalam -->
  <div class="lens1"></div> <!-- lensa besar -->
  <div class="lens2"></div> <!-- lensa kecil -->
</div>

Berikut CSSnya

.box {
  background-color: #D33187;
  border-radius: 70px;
  position: fixed;
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0 35px 25px 0 rgba(78, 98, 213, .3) inset;
}

.box::before {
  content: "";
  width: 300px;
  height: 300px;
  background-image: radial-gradient(35% 85%, farthest-corner, #FDDA74 20%, #EF6541 50%, rgba(255, 255, 255, 0) 65%);
  position: absolute;
  border-radius: 50%;
  top: 35%;
  left: -20%;
}

.box::after {
  content: "";
  width: 300px;
  height: 300px;
  background-image: radial-gradient(35% 30%, farthest-corner, #4E62D5 10%, #803CAD 35%, rgba(255, 255, 255, 0) 60%);
  position: absolute;
  border-radius: 50%;
  top: -60%;
  left: -25%;
}

.box-in {
  width: 150px;
  height: 150px;
  border-radius: 50px;
  border: 15px solid white;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.lens1 {
  width: 70px;
  height: 70px;
  position: absolute;
  border-radius: 50%;
  border: 15px solid white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

.lens2 {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background: white;
  top: 25%;
  left: 65%;
  z-index: 6;
}

okeh.... sekian dulu berbaginya, seperti biasa klo ada yg ditanyakan silahkan komen dibawah silahkan rate klo menurut agan tutorial ini bermanfaat dan menambah ilmu agan Salam dan Keep Coding

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

8 Jawaban:

Luar biasa bli! Mantap

avatar satyakresna
@satyakresna

82 Kontribusi 55 Poin

Dipost 7 tahun yang lalu

maaf saya pelajar baru. ini logo IG yang bisa kita gunakan dimana ya hehhee

avatar Viryaanisa11
@Viryaanisa11

0 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

ya dimana aja sis, tergantung sis mau naruh dimana :)

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

keren keren bang!

avatar A_Fauzi
@A_Fauzi

15 Kontribusi 2 Poin

Dipost 7 tahun yang lalu

@satyakresna & @fauzi1994 thanks gan.... ;)

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

Berapa lama proses pembuatannya ?

avatar growdeuno
@growdeuno

16 Kontribusi 4 Poin

Dipost 7 tahun yang lalu

@growdeuno klo copy-paste kode paling setengah menit selesai gan :) klo nulis sendiri, sekitar 5 menit + dapet belajar

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

Luarrr biasa

avatar pemudakoding
@pemudakoding

342 Kontribusi 120 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban