بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
TIPS BLOG Koala tidur di ranting pohon dengan bahasa pemrograman CSS3 adalah sesuatu hal baru dimana gambar tidak lagi dilakukan dengan alat pensil, kuas, ballpoint ataupun dengan cat air. Tapi dengan keunggulan bahasa CSS3, hal itu bisa terwujud sempurna. Karena beberapa property yang terpasang pada bidang desain CSS3 dapat dilakukan secara leluas sesuai yang dimau. Sudah banyak trik membuat aneka animasi dengan CSS3 yang sudah tersebar dan ditulis di beberapa blog tutorial.
Tidak sedikit dari blogger mengulas secara mendalam berbagai cara dan trik membuat berbagai variasinya. Dan kali ini saya akan memberikan cara membuat binatang koala tertidur di ranting pohon. Setidaknya dengan cara yang disampaikan dibawah ini bisa menambah kasanah ilmu tentang utak-atik CSS3 yang sudah sangat populer sebagai bahasa pemrograman paling ringan dan tentu saja mudah diterapkan.
Apa itu Koala?
Pertama saya akan membahasa dulu tentang Koala. Apa itu Koala. Koala adalah sejenis binatang Mamalia yang menghuni benua Australia, salah satu benua besar yang paling dekat dengan Indonesia. Sebagai salah satu mamalia langka, mamalia ini dilindungi oleh pemerintah setempat. Dan bahkan seseorang pun tidak berani untuk menangkapnya apalagi memeliharanya di rumah sebagai hewan peliharaan. Karena akan terkena denda bagi yang melanggarnya. Koala termasuk dalam mamalia menyusui. Bentuknya yang lucu dan imut sering digambarkan sebagai hewan yang sering terpampang pada buku gambar anak-anak.Baca Juga :
Kelebihan Koala?
Nah sekarang kita berbicara tentang kelebihan binatang satu ini ya. Koala sanggup tidur dalam ranting pohon dalam waktu yang cukup lama dan tidak biasa, berbeda dari hewan lainnya. Kehebatan mamalia satu ini selain tidur dalam waktu cukup lama adalah bentuk sidik jari yang cukup mendekati sempurna seperti halnya sidik jari yang terdapat pada jari-jari manusia, bahkan para ilmuwan yang berkesempatan untuk meneliti Koala menggunakan alat penyidik jari cukup dibuat kesulitan membedakan sidik jari antara koala dengan manusia. Karena memang benar-benar sulit dibedakan. Itu kelebihan binatang yang erat dengan benua Kanguru ini.Baca Juga : Membuat Ikon Burung Twitter Beterbangan di Beranda Blog
Tujuan pembuatan
Sekelumit cerita diatas adalah bahan kita kali ini dalam membuat trik CSS3 Membuat Koala Tidur di Ranting Pohon dengan bahasa pemrograman yang sudah tidak asing lagi di telinga kita yaitu CSS3 ya teman-teman. Dalam penerapan kali ini, elemen-elemen seperti mata, telinga, hidung, muka dan badan dibuat dengan bahasa CSS3 ini. Ketika elemen berdiri sendiri, maka gambar itu tidak akan bisa dimaknai apapun. Tapi ketika elemen-elemen tersebut digabungkan maka akan terbentuk sebuah kreasi baru yakni hewan Koala. Mungkin kalian juga bertanya-tanya, bagaimana bisa ya seekor mamalia bisa digambar tidak dengan alat atau aplikasi desain tapi dengan bahasa pemrograman, ya itulah salah satu keunggulan bahasa pemrograman satu ini. Powerfull dan Interaktif dalam membangun karya di blog.Baca Juga : Menampilkan Widget Hantu Melayang di Halaman Blog
Dalam penerapan kali ini, kita langsung saja untuk membahas tentang cara pembuatannya. Sehingga tidak perlu panjang lebar lagi dalam menerangkannya. Cukup dengan mempraktekkan yang mesti dipraktekkan, dan memaksimalkan usaha, saya yakin kalian dapat melakukannya.
1. Masuk ke Tema
2. Pilih Sesuaikan : Edit HTML
3. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas dari kode ]]></b:skin> itu
*{padding:0;margin:0;box-sizing:border-box;}
body{background-color:#b9e188;}
.container{height:500px;width:500px;position:absolute;transform:translate(-50%,-50%);left:50%;top:50%;}
.branch{background-color:#7b5319;width:90%;height:22px;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;border-radius:12px;}
.body{background-color:#767677;height:100px;width:150px;position:absolute;top:150px;left:150px;border-radius:50% 50% 50% 50%/ 60% 60% 40% 40%;}
.body:before,.body:after{content:"";position:absolute;background-color:#767677;height:70px;width:35px;border-radius:18px;}
.body:before{top:60px;left:115px;transform:rotate(-15deg);}
.body:after{top:70px;left:20px;}
.face{position:absolute;background-color:#8f8d8f;height:115px;width:115px;top:150px;left:88px;border-radius:50%;}
.ear-1,.ear-2{background-color:#efd8db;height:38px;width:38px;border-radius:50%;position:absolute;}
.ear-2{box-shadow:0 -5px 0 12px #a9a9ac;top:135px;left:172px;}
.ear-1{box-shadow:-3px -5px 0 12px #a9a9ac;top:205px;left:65px;}
.ear-1:before,.ear-1:after{position:absolute;content:"";background-color:#5c5b5d;height:70px;width:35px;border-radius:18px;}
.ear-1:before{top:8px;left:50px;}
.ear-1:after{left:160px;top:5px;}
.branch:before{position:absolute;content:"";height:15px;width:15px;background-color:#aaa7aa;bottom:60px;left:267px;border-radius:50%;}
.branch:after{position:absolute;content:"";height:30px;width:30px;background-color:#768b36;bottom:20px;left:360px;border-radius:30px 0;}
.eye{height:10px;width:20px;position:absolute;box-shadow:0 3.5px #343434;border-radius:50%;transform:rotate(-30deg);top:74px;left:16px;}
.eye:before{content:"";position:absolute;height:10px;width:20px;box-shadow:0 3.5px #343434;border-radius:50%;left:50px;}
.eye:after{content:"";position:absolute;background-color:#343434;height:35px;width:30px;left:20px;border-radius:50% 50% 50% 50%/ 60% 60% 40% 40%;}
.face:after{content:"";position:absolute;background-color:#efd8db;height:14px;width:14px;top:62px;left:86px;opacity:0.9;border-radius:50%;}4. Kemudian lanjut ke Tata Letak dan taruh kode dibawah ini dalam konten kosong disitu terus save
<div class="container">
<div class="ear-1"></div>
<div class="branch"></div>
<div class="body"></div>
<div class="ear-2"></div>
<div class="face">
<div class="eye"></div>
</div></div>Itulah sekelumit tutorial membuat Koala Tertidur di Ranting Pohon dengan CSS. Lumayan mudah khan, tinggal copas saja itu kode dan taruh di blog kalian. Terima kasih semua teman-teman yang sudah mampir kesini dan membaca artikel Trik CSS Membuat Koala Tidur di Ranting Pohon. Wujudkan segala mimpi-mipimu, jangan biarkan mimpimu hilang terbawa angin dan memadamkan api semangatmu. Gapailah setinggi langit, ingat ! Tuhan tidak memberikan ujian hidup melebihi kemampuan umatnya. Dan kita sekarang, sedang diuji dengan jalan ujiannya masing-masing. Salam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Trik CSS Membuat Koala Tidur di Ranting Pohon Bergaya Unik . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
