Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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
8 Jawaban:
maaf saya pelajar baru. ini logo IG yang bisa kita gunakan dimana ya hehhee
ya dimana aja sis, tergantung sis mau naruh dimana :)
@satyakresna & @fauzi1994 thanks gan.... ;)
@growdeuno klo copy-paste kode paling setengah menit selesai gan :) klo nulis sendiri, sekitar 5 menit + dapet belajar