Beberapa waktu sebelumnya saya sudah pernah memposting bagaimana membuat logo sederhana dengan CSS. Kali ini kita akan membuat logo Google Drive dengan CSS yang saya kutip dari Harrison.
Adapun tampilan logo Google Drive yang diharapkan akan seperti di bawah ini.
Buat markup html seperti di bawah ini.
<div class="logo-container"> <div class="bar green"></div> <div class="bar yellow"></div> <div class="bar blue"></div> </div>
Pertama kita masukan dulu kode CSS untuk class logo-container
.
.logo-container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 320px; height: 280px; }
Selanjutnya mari kita bentuk bagian dari logo Google Drive yang berwarna hijau dengan CSS. Masukan kode CSS seperti ini.
.logo-container .green { background-color: #0BA25E; -webkit-transform: rotate(-60deg) skew(-30deg); transform: rotate(-60deg) skew(-30deg); left: -20px; top: 90px; height: 100.5px; z-index: 2; box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.2); }
Untuk bagian yang berwarna kuning, silahkan Anda masukkan kode CSS.
.logo-container .yellow { background-color: #FCCD48; -webkit-transform: rotate(60deg) skew(-30deg); transform: rotate(60deg) skew(-30deg); left: 108px; top: 40px; z-index: 3; box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3); }
Terakhir masukkan kode CSS berikut ini untuk bagian logo Google Drive yang berwarna biru posisi di bagian bawah.
.logo-container .blue { background-color: #2A71E9; -webkit-transform: skew(-30deg) translate(0, -50%); transform: skew(-30deg) translate(0, -50%); top: 227px; left: 58.5px; z-index: 1; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
Selamat Mencoba!
Leave a Reply