Menggambar secara digital bisa kita lakukan dengan berbagai software gratis jika memakai crack seperti Photoshop, namun apalah daya jika hanya punya laptop kecil yang jalanin Mozilla saja ngadat. Sehingga ide menggambar dengan CSS pun terbayang, yah walaupun tampak seperti Minecraft.
Tutorial ini adalah tutorial yang sangat dasar, jika kamu pernah belajar CSS dasar, maka trik ini dibawahnya dasar lagi. Sebenarnya menggambar dengan CSS bisa kita sempurnakan lagi dan hasilnya bisa seperti gambar hasil kreasi photoshop, namun karena malas mikir, maka yang simple saja sebagai dasar pemahaman.
Disini saya menggunakan box-shadow sebagai media menggambar, jadi gambar ini punya elemen induk/utama yang berupa kotak yang tidak jelas yang dibuat dengan CSS sederhana {width:1em;height:1em;background:red;overflow:hidden}, jika selector itu dipanggil maka akan menghasilkan sebuah kotak kecil, nah kotak itu yang akan kita kreasikan menggunakan box-shadow.
Klik link dibawah
Untuk Source Code nya bisa di copy paste dari sini.
<style>
.bungkusgalon {width: 50px;margin: auto;margin-top: 20px}
#logo {animation: mantul 3s infinite;border-radius: 0 6px 5px;font-size:20px;padding: 4px;background: #ee352a;font-family: arial;color: #fff;margin:auto;margin-top:170px;margin-left:520px;width: 1em;height: 1em;background: red;overflow: hidden;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
@keyframes mantul{
0% {transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
25% {transform: rotate(-20deg);background: green;box-shadow: 0 1em 0 0 green,0 2em 0 0 green,0 3em 0 0 green,0 4em 0 0 green,0 5em 0 0 green,0 6em 0 0 green,0 7em 0 0 green,0 8em 0 0 green,1em 8em 0 0 green,2em 8em 0 0 green,3em 8em 0 0 green,4em 8em 0 0 green,5em 8em 0 0 green,6em 8em 0 0 green,7em 8em 0 0 green,7em 7em 0 0 green,6em 6em 0 0 green,5em 5em 0 0 green,4em 4em 0 0 green,5em 3em 0 0 green,6em 2em 0 0 green,7em 1em 0 0 green,7em 0 0 0 green,6em 0 0 0 green,5em 0 0 0 green,4em 0 0 0 green,3em 0 0 0 green,2em 0 0 0 green,1em 0 0 0 green,9em 0 0 0 green,9em 1em 0 0 green,9em 2em 0 0 green,9em 3em 0 0 green,9em 4em 0 0 green,9em 5em 0 0 green,9em 6em 0 0 green,9em 7em 0 0 green,9em 8em 0 0 green,10em 0 0 0 green,11em 0 0 0 green,12em 0 0 0 green,13em 0 0 0 green,14em 0 0 0 green,15em 0 0 0 green,16em 1em 0 0 green,16em 2em 0 0 green,15em 3em 0 0 green,14em 4em 0 0 green,13em 5em 0 0 green,14em 6em 0 0 green,15em 7em 0 0 green,16em 8em 0 0 green}
50% {transform: rotate(20deg);background: purple;box-shadow: 0 1em 0 0 purple,0 2em 0 0 purple,0 3em 0 0 purple,0 4em 0 0 purple,0 5em 0 0 purple,0 6em 0 0 purple,0 7em 0 0 purple,0 8em 0 0 purple,1em 8em 0 0 purple,2em 8em 0 0 purple,3em 8em 0 0 purple,4em 8em 0 0 purple,5em 8em 0 0 purple,6em 8em 0 0 purple,7em 8em 0 0 purple,7em 7em 0 0 purple,6em 6em 0 0 purple,5em 5em 0 0 purple,4em 4em 0 0 purple,5em 3em 0 0 purple,6em 2em 0 0 purple,7em 1em 0 0 purple,7em 0 0 0 purple,6em 0 0 0 purple,5em 0 0 0 purple,4em 0 0 0 purple,3em 0 0 0 purple,2em 0 0 0 purple,1em 0 0 0 purple,9em 0 0 0 purple,9em 1em 0 0 purple,9em 2em 0 0 purple,9em 3em 0 0 purple,9em 4em 0 0 purple,9em 5em 0 0 purple,9em 6em 0 0 purple,9em 7em 0 0 purple,9em 8em 0 0 purple,10em 0 0 0 purple,11em 0 0 0 purple,12em 0 0 0 purple,13em 0 0 0 purple,14em 0 0 0 purple,15em 0 0 0 purple,16em 1em 0 0 purple,16em 2em 0 0 purple,15em 3em 0 0 purple,14em 4em 0 0 purple,13em 5em 0 0 purple,14em 6em 0 0 purple,15em 7em 0 0 purple,16em 8em 0 0 purple}
75% {transform: rotate(-20deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
100%{transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
}
</style>
Untuk penerapannya. Copy kode berikut
<div id="logo"></div>Sederhana bukan ?. Silahkan dipelajari dasarnya dan bisa dikembangkan sendiri.
Sekian artikel saya, terima kasih.
Artikel Terkait
Buat Template Sendiri Dari 0
Kali ini saya akan berbagi pengalaman tentang pembuatan template blogger yang mandiri, maksudnya eksklusif karena kita bikin sendiri. Saya awalnya iseng-iseng saja ingin ... 
Cara Paling Mudah Memotong Snippet Tanpa JS
Pernahkah kawan merasa risih dengan snippet bawaan blogger yang memiliki kode <data:post.snippet> terasa terlalu panjang terutama pada post homepage ? Jika pernah ... 
Cara Menggunakan If Else dan Else If Pada JS
Kali ini saya akan memberikan pembelajaran dasar pada javascript, ya gak perlu sulit sulit karena saya bukan expertnya JS :D.
Berbicara tentang pengkondisian pada JS sebenarny ... 
Cara Membuat Like Box Facebook Float
Kali ini saya akan mencoba share cara memasang Like Box Facebook Float atau melayang.
Dengan memakai widget ini, sobat pasti akan mudah mencari liker FPnya di Facebook melalu ... 
Desain "Poni" iPhone X Yang Menjamur
Oke sepertinya ini sedikit melenceng dari Niche blog ini cuma ya karena didorong oleh keinginan yang luhur untuk menulis saya memutuskan untuk menulis saja dan persetan deng ...
