10 Desain Karakter yang Dibuat Sepenuhnya Dengan HTML & CSS

Saya selalu terkejut betapa banyak yang dapat Anda lakukan dengan CSS. Pengembang web tahu bahwa CSS memungkinkan Anda membuat beberapa tata letak halaman yang luar biasa dan efek animasi khusus.

Tetapi Anda juga dapat menggunakannya untuk banyak proyek menyenangkan. Seperti, misalnya, membangun desain karakter hanya dengan CSS. Kedengarannya aneh bukan?

Yah itu pasti. Dan saya telah mengumpulkan beberapa desain karakter paling aneh (namun paling keren), semuanya terbuat dari 100% kode HTML & CSS murni.

1. Angry Birds

Siapa yang tidak suka Angry Birds? Mereka mulai sebagai permainan dan entah bagaimana mendapatkan film mereka sendiri setelah menusuk budaya pop.

Dan pena oleh Rachel Bull ini membuktikan bahwa Angry Birds bahkan dapat menemukan jalan mereka ke CSS.

Ironisnya ada satu gambar di halaman ini, dan itu digunakan untuk menyematkan jenis kustom di bagian paling atas. Setiap elemen lain dari kurva burung-burung itu hingga gradien khusus semuanya berjalan pada CSS murni.

Mungkin bukan cuplikan kode yang paling praktis tetapi tentu saja sebuah inspirasi.

2. Frankenstein

Frankenstein karya Mary Shelley dikenal luas sebagai makhluk berkulit hijau yang dihidupkan kembali. Meskipun secara teknis itu adalah monster Frankeinstein, itu tidak terlalu bagus.

Dan meskipun makhluk Frankenstein ini mungkin agak salah diberi judul, ini masih salah satu desain karakter terbaik yang pernah saya lihat.

Ia bekerja hanya pada 40 baris HTML dan pengembang Victoria Ninni Bergquist bahkan menambahkan beberapa CSS untuk membantu monster itu berkedip. Cukup rapi!

3. Alien Cerita Mainan

Pixar's Toy Story memiliki begitu banyak karakter yang mudah diingat dan orang-orang asing yang aneh ini tentu saja merupakan bagian dari pemeran itu.

Sunyoung Park membuat pena ini sebagai demo untuk CSS dan untuk menguji batas-batas pengkodean frontend. Itu harus ditampilkan dengan benar di semua browser utama dan bahkan beberapa browser lama. Meskipun itu sedikit bergantung pada properti rotate().

Untungnya ini hadir sebagai bagian dari fitur transformasi CSS yang mendukung browser sejak IE9+. Jadi alien hijau kecil ini dapat menyenangkan sebagian besar dunia yang terhubung ke Internet.

4. Aku Aku

Jika Anda memiliki PlayStation maka Anda mungkin tahu tentang Crash Bandicoot. Orang gila bernama Aku Aku ini adalah replika sempurna dari topeng… makhluk… benda.

Setiap elemen memiliki div sendiri dengan kelas relevan yang mendefinisikan fitur tersebut (mis. mata, bibir hidung).

Saya akan mengatakan bagian terberat dari keseluruhan desain ini adalah mahkota bulu di kepalanya. Ditambah animasi keren yang mungkin mendorong gamer untuk mengambil game Crash lama mereka.

5. Bayi Tupai

Berikut adalah contoh bagus lain dari animasi yang dicampur dengan desain karakter CSS.

Josh Bader mengkodekan karakter Squirtle ini menggunakan CSS murni dan hanya 15 baris HTML. Menakjubkan!

Untuk mendapatkan efek berjalan, Josh menambahkan kelas semu :after ke setiap elemen dengan animasi berulang. Sebuah prestasi yang sangat sederhana setelah Anda melihat di bawah tenda dan bahkan lebih mengejutkan bagaimana kode kecil seperti itu diperlukan untuk membangun karakter seperti ini.

6. Rick Tanpa Morty

Dalam pena ini Anda akan menemukan karya aneh dari pengembang James Gilmore yang membuat Rick chibi-fied dalam CSS murni.

Desainnya sebenarnya menggunakan beberapa bayangan drop CSS yang bagus untuk menciptakan kedalaman dan memberi karakter ini beberapa kehidupan. Belum lagi animasi berulang yang juga berpadu apik dengan desainnya.

Perhatikan ini juga berjalan di Sass dan jika Anda ingin mengotak-atiknya, ada variabel khusus dalam kode. Ini diformat dengan sangat baik, jadi ini akan menjadi cuplikan yang luar biasa untuk dipelajari untuk mempelajari Sass.

7. Brian Griffin

Inilah desain karakter lain oleh Rachel Bull, yang ini menampilkan Brian Griffin dari Family Guy.

Sungguh mengejutkan betapa banyak detail yang bisa Anda dapatkan hanya dengan CSS murni. Seluruh gaya Brian sangat cocok dengan gaya seni pertunjukan, dan menggunakan bayangan jatuh yang terasa sangat realistis.

Meskipun yang satu ini cukup teknis dengan lebih dari 150+ baris CSS dan menggunakan perpustakaan Kompas untuk boot.

8. Emmet

Dari The Lego Movie itu Emmet dengan segala kejayaannya. Rachel sekali lagi membuat cuplikan ini dari awal menggunakan CSS dan Haml, cara sederhana untuk menulis HTML modern.

Beberapa dari elemen ini benar-benar menonjol karena cukup mengesankan untuk dijalankan hanya di CSS. Khususnya, pusaran rambut benar-benar terlihat seperti potongan Lego plastik. Gila bahwa ini bahkan mungkin!

Ada banyak logika Sass yang hebat di CSS, dan jika Anda seorang dev nerd, Anda akan menikmati melihat-lihat pena ini. Baik kode maupun hasilnya sangat bagus.

9. CSS Eevee

Dibangun di sekitar fenomena Pokemon Go, Eevee CSS murni ini dibuat oleh David Khourshid.

Ini menggunakan latar belakang dan gaya halaman yang mirip dengan aplikasi saat membuat ulang seluruh Pokemon dalam CSS murni. Dengan sedikit tekstur dan beberapa lapisan cerdas, David membuat Eevee ini benar-benar terlihat 3D!

Animasinya juga merupakan sentuhan yang bagus, dan membuat semuanya terasa lebih realistis. Baik Anda penggemar Pokemon atau belum pernah menyentuh game ini, Anda harus mengakui bahwa ini adalah pekerjaan yang bagus.

10. Miki Tikus

Meskipun kepala Mickey Mouse ini sedikit lebih sederhana, ini juga merupakan prestasi yang luar biasa. Anda mungkin berpikir itu akan lebih mudah untuk dikelola karena statis, namun pena mendorong lebih dari 450+ baris Sass.

Bagian yang paling teknis adalah mengatur semua bentuk dan mengatur ulang elemen agar sejajar dengan benar di atas satu sama lain.

Namun hasilnya fantastis, dan Anda dapat melihat kemiripannya dengan kartun Mickey awal.

11. Putri Zelda

Saya telah menyimpan yang terbaik untuk yang terakhir dengan desain karakter Zelda ini. Dia agak pendek di kaki tapi secara keseluruhan gayanya akurat.

Pengembang Charlie Marcotte menggunakan Sass dan transformasi CSS khusus untuk mengatur semua elemen. Ditambah HTML mentah disederhanakan sedikit berkat preprocessor Pug.

Jika Anda mencoba untuk mendorong batas pengetahuan CSS Anda, mengapa tidak mengambil proyek serupa? Ini adalah cara yang bagus untuk menguji keterampilan Anda, dan Anda selalu dapat membagikan apa pun yang Anda buat di komentar di bawah.