Develoka

Baca Artikel

  •     Lihat Daftar Artikel
  • Koleksi CSS Gokil

    Kumpulan project yang dibuat hanya dengan CSS

    by rmdwirizki — Posted on May 13, 2018

    Pada dasarnya CSS hanya digunakan untuk mendesain sebuah halaman web, tapi belakangan ini ramai sekali di sosial media tentang malpraktik atau penyalahgunaan CSS oleh coder-coder kurang kerjaan (kreatif), mulai dari membuat game sampai lukisan dengan gaya realis, hasilnya juga bagus banget. Entah, karena mereka lupa, ngga ngerti atau benci sama javascript, haha.

    Berikut ini kumpulan project gokil yang ngga akan kamu sangka ternyata dibuat hanya dengan pure CSS dan HTML.

    Tower of Hanoi

    Tower of hanoi adalah sebuah puzzle atau game aritmatik yang objective-nya adalah memindahkan semua kepingan dari satu pilar ke pilar lainnya dengan syarat kepingan yang lebih besar tidak boleh berada di atas kepingan yang lebih kecil - cek detail permainan.

    Game Tower of Hanoi

    Link project

    Jika kamu liat source code-nya, pembuatan game ini mengandallkan elemen input radio dan selector :checked untuk kontrolnya, yang sulit adalah penerapan logika dan aturan permainan karena tidak bisa dilakukan oleh CSS, jangankan perulangan, percabangan aja gabisa. Tapi si author niat banget sih, bikin banyak sibling selector untuk ngatesinnya.

    Mario Kart

    Yang ini lebih gila lagi, hanya dengan CSS, tanpa javascript, dan tanpa image. Bahkan kontrol keyboard dan asset sprite-nya berhasil diakali dengan CSS. Detail banget, bisa nampilin multiple scene sampai pilih karakter segala.

    Mario Kart Game

    Link project dan Link artikel penjelasannya

    Untuk kontrol keyboard, menarik sekali dia bikin pake attribut pattern di elemen input dikombinasikan dengan selector :valid, :invalid dan :placeholder-shown.

    
    

    Walaupun kamu cuma bisa milh karakter dan gerak kiri kanan, tapi untuk dedikasi author-nya yang membuat ini tanpa javascript perlu dikasih penghargaan.

    Untuk koleksi project game yang dibuat hanya dengan CSS lainnya kamu bisa cek di link berikut. Disitu ada game teka-teki silang, minesweeper, sampai game shooter (tembak-tembakan).

    3D Solar System

    Saya pribadi paling suka projek yang ini, visualisasi dan simulasi tata surya dibuat menarik karena interaktif dan representatif dengan skala yang terukur. Kalo liat kodenya memang ada javascript, tapi js cuma dipake buat ngubah zoom dan mode tampilan yang setnya udah dibuat pake CSS.

    3D Solar System

    Link project

    Kalo js-nya diapus masih berjalan lancar. Cuma jadinya masuk mode tampilah default / top down.

    3D Solar System -JS

    Parallel park

    Tutorial parkir secara paralel yang dikemas dengan menarik. Memang tidak ada yang spesial dari segi kode dan teknik penggunaan CSS tapi eksekusinya bagus, terlihat punya misi dan dapat menyampaikan pesan dengan baik.

    Parallel park

    Link project

    Kuncinya ada di penempatan div untuk tombol atau breadcrumb sebagai pemicu animasi. Karena selector CSS belum mendukung akses ke arah atas (parent node), maka pilihannya harus ditempatin di sebelah div container mobil supaya bisa pake sibling selector.

    Lukisan Monalisa

    Percaya atau ngga, lukisan ini dibuat hanya dengan kurang lebih 7500 line CSS dan 1 line HTML. Sebuah masterpiece untuk lukisan masterpiece karya Da Vinci.

    Monalisa

    Link project

    Yang lebih mengherankan, lukisan CSS ini hanya menggunakan satu selector dan satu property. Ya, 7500 line hanya untuk property box-shadow. Kayanya sih ini di-generate pake tools yang ngubah format file gambar ke CSS, ngga kebayang bisa nulis kode box-shadow sebanyak itu dengan hasil yang sempurna.

    Lukisan Francine

    Ini bukan lukisan minyak atau gambar, tapi pure CSS! Berbeda dengan lukisan monalisa sebelumnya yang masih keliatan pixelated (kotak-kotak), yang ini halus banget.

    Francine

    Link project

    Lukisan ini sangat detail, terdiri dari 1133 div yang koding dengan dedikasi tinggi. Entah memakan waktu berapa lama untuk mengerjakannya, tapi kerja yang bagus! Kita bahkan bisa memodifikasi sendiri tiap bagian tubuhnya melalui inspect atau chrome dev tools.

    Francine Inspected

    Lukisan ini juga akan tampil unik di berbagai versi browser lama, yang memilki nilai seninya tersendiri.

    Francine Old Browser

    Urutan dari kiri ke kanan pada IE6 di Windows 7, IE5 di MacOS, IE 7 di Windows 98 dan Chrome 9. Oh ketinggalan ada juga tampilan dari browser Opera versi lama.

    Francine Old Opera

    Evolusi ini terjadi karena dukungan browser terhadap spesifikasi CSS yang beragam pada browser, khususnya browser tipe lama. Ada yang tidak mendukung property seperti gradient, box-shadow, transform atau border-radius.

    Akhir kata

    Kenapa mereka melakukan ini semua? Bukan maksud mempersulit diri tapi kebanyakan dari mereka melakukannya karena mereka mampu. Menjawab tantangan dan memanfaatkan teknologi sampai batas maksimal, memberikan inspirasi bahwa batasan bisa diatasi dengan kerja keras.