Cara Nyeleneh Menggambar Dengan CSS

Entah bingung ingin nulis apa, tapi yaudahlah lebih baik saya isi dengan tutorial nyeleneh ini yang sebenarnya jelek dan gak penting sekali.

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

Demo

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