Library CSS cs16.css Berbasis UI Counter Strike 1.6

 (cs16.samke.me)
1 poin oleh GN⁺ 2025-01-25 | 1 komentar | Bagikan ke WhatsApp
  • cs16.css adalah library CSS yang menghadirkan nuansa UI game Counter Strike 1.6 pada komponen HTML, sehingga gaya retro bisa dibuat cepat hanya dengan menambahkan class
  • Instalasinya dilakukan dengan menambahkan link stylesheet cs16.min.css dari CDN jsDelivr ke head HTML
  • Mencakup berbagai contoh UI dasar, mulai dari tombol, kolom input, select, grup radio, slider, dialog, tooltip, progress bar, hingga tab
  • Dialog menggunakan HTML <dialog> dan showModal(), sedangkan tab bekerja dengan struktur radio input serta label/panel
  • Proyek ini dirilis dengan MIT License, dan turut menautkan repositori GitHub serta halaman pembuatnya, Samuel

Library CSS Bergaya Counter Strike 1.6

  • cs16.css adalah library CSS yang berbasis UI Counter Strike 1.6
  • Halaman proyek menyediakan tautan ke repositori GitHub dan tautan terkait pembuatnya
  • Untuk instalasi, cukup tambahkan stylesheet CDN jsDelivr ke tag head HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Komponen UI yang Disediakan

  • Tombol dan Elemen Form Dasar

    • Gaya tombol diterapkan dengan class cs-btn, dan contoh status disabled juga disertakan
    • Class cs-hr dapat digunakan untuk membuat gaya garis pemisah
    • Checkbox menggunakan struktur cs-checkbox, cs-checkbox__label
    • Kolom input memakai class cs-input, cs-input__label, dengan contoh nilai input biasa dan input disabled
    • Select menggunakan class cs-select, cs-select__label, dan contohnya terdiri dari opsi Volvo, Saab, Opel, Audi

  • UI Pilihan dan Pengaturan Nilai

    • Grup radio dibuat dengan menempatkan radio input dan label di dalam cs-fieldset
    • Contoh radio menggunakan pilihan Elephant, Monkey, Cheetah, Giraffe
    • Slider disusun dengan memasukkan input range ke dalam struktur cs-slider
    • Contoh slider mencakup nilai Dark/Light dan label Brightness

  • Dialog, Tooltip, Progress Bar

    • Dialog menggunakan HTML <dialog> dengan class cs-dialog
    • Tersedia contoh membuka dialog saat tombol diklik dengan document.querySelector('.cs-dialog').showModal();
    • Tombol di bagian bawah dialog terdiri dari OK, Cancel, Apply
    • Tooltip menggunakan cs-tooltip dan span.text di dalamnya, dengan contoh posisi Right, Left, Top, Bottom
    • Progress bar menempatkan elemen bars di dalam cs-progress-bar dan menampilkan status progres dengan width: 50%

  • Susunan Tab

    • Tab memiliki struktur penempatan radio input, label, dan panel di dalam cs-tabs
    • Disertakan contoh Tab One, Tab Two, Tab Three beserta konten masing-masing tab

Lisensi dan Pembuat

  • Library ini dirilis dengan MIT License
  • Pembuatnya ditampilkan sebagai Samuel

Bacaan terkait

1 komentar

 
GN⁺ 2025-01-25
Opini Hacker News

  • Saya sudah menunggu kesempatan untuk memperbanyak koleksi
    Untuk tema CSS retro, ada yang seperti ini: https://alexbsoft.github.io/win95.css/ Windows 95, https://botoxparty.github.io/XP.css/ Windows XP, https://cs16.samke.me/ Counter-Strike 1.6, https://edwardtufte.github.io/tufte-css/ Edward Tufte, https://jdan.github.io/98.css/ Windows 98, https://khang-nd.github.io/7.css/ Windows 7, https://micah5.github.io/PSone.css/ PlayStation One, https://nostalgic-css.github.io/NES.css/ NES, https://sakofchit.github.io/system.css/ Apple System, https://thesimscss.inbn.dev/ The Sims

  • Baru-baru ini saya melihat anak saya bermain Half-Life 2, dan saya merasa bahwa hal-hal seperti menu dengan gaya seperti ini, yang terlihat seperti UI sistem komputer sungguhan, terasa jauh lebih realistis dan imersif
    Mungkin terlihat usang, tetapi ada kesan industrial dan nyata, sekaligus mudah digunakan. Sebaliknya, banyak game sekarang punya menu yang terlalu distilisasi seperti huruf dekoratif bermotif bunga, sehingga terasa tidak realistis, pengalamannya buruk, dan mengoperasikannya sendiri jadi seperti pekerjaan

    • Kalau tren UI sekarang membuat semuanya datar dan menyembunyikan fungsi, sehingga merusak kemudahan ditemukan yang merupakan inti pengalaman pengguna, maka “keusangan” menurut saya bukan cacat, melainkan fitur
    • Saya bahkan tidak mau mulai membahas UI menu game modern
      Sekitar setahun lalu saya membeli CoD terbaru untuk PS5, dan saya sama sekali tidak bisa memahami apa yang terjadi di menunya. Strukturnya kacau balau sampai mustahil dinavigasi, rasanya membuat gila, dan mungkin saya memang sudah tua
    • Tergantung gaya atau tone game-nya, menu yang sangat distilisasi juga bisa cocok
      Masalah sebenarnya adalah UI yang banyak ada di game sekarang: sepenuhnya datar, generik, tanpa warna, tanpa gaya atau identitas apa pun. Misalnya Nintendo cukup sering melakukan ini
    • Saya suka sistem menu di Crysis 2 atau 3. Benar-benar memberi rasa seperti berada di dalam nanosuit
    • UI lama punya affordance yang bagus. Terlihat apakah suatu elemen UI bisa diinteraksikan atau tidak, sedangkan UI “modern” cukup buruk dalam hal ini

  • Bagus sekali. Tahun lalu saya memasang lagi CS 1.6 setelah hampir 15 tahun, dan belakangan hampir setiap hari saya bermain 10–15 menit melawan bot untuk mengosongkan pikiran
    Supaya lebih seru, saya juga membuat tim bot sendiri, bahkan membuat turnamen penuh melawan tim-tim pro sekitar tahun 2008. Saya juga menemukan kembali map yang pernah saya buat dulu di hard disk yang sangat tua; saya tidak menyangka masih akan memainkannya ketika hampir berusia 40 tahun, dan saya berterima kasih kepada diri saya di masa lalu

    • CS selalu bagus untuk mengosongkan pikiran. Game ranked 5v5 terasa menekan dan intens, memakan waktu sekitar 30–45 menit, dan juga memenuhi kebutuhan kontak dengan orang lain secukupnya. Sejak berhenti beberapa tahun lalu, saya belum menemukan penggantinya
    • Saya punya kenangan indah bermain map kz_ berjam-jam pada 2005. Skill sebagian orang benar-benar luar biasa. Ada rasa rindu yang aneh terhadap sensasi sendirian di map kz pukul 3 pagi lalu mendengar seseorang berlari-lari
    • Kenangan bermain map kustom seperti de_747 bersama teman lewat LAN atau dial-up langsung membanjir: https://gamebanana.com/mods/82979
      Sampai sekarang saya masih menganggap map ini salah satu map kustom dengan atmosfer terbaik sepanjang masa. Di map mana lagi kita bisa roleplay sebagai Gary Oldman atau Harrison Ford
    • Saya juga sudah 15–16 tahun tidak menyentuh CS 1.6, sepertinya menarik kalau dicoba lagi. Saya penasaran apakah bisa dijalankan di Mac M1, atau perlu mesin virtual. Saya juga ingin rekomendasi bahan bacaan tentang cara menyiapkan dan mengonfigurasi bot

  • Secara teknis, bukankah ini bukan UI khusus Counter-Strike, melainkan awalnya Steam UI?

    • Benar. Namun Steam awalnya dibuat untuk mengelola update Counter-Strike dan sistem anti-cheat, kalau ingatan saya benar VAC
      Itu juga masa ketika WON ID, atau SteamID sekarang, yang rendah dianggap seperti medali. Rasanya seperti ID akun Slashdot yang rendah
    • Benar. Klien Steam awalnya dibuat di atas library VGUI yang sama yang dipakai di game-game Valve, dan saat itu memakai gaya yang sama seperti HL1/CS dan lainnya
    • Ini ditambahkan ke Half-Life sekitar Maret 2000, lalu tak lama kemudian masuk ke Counter-Strike juga. Saya tidak yakin kapan Steam pertama kali keluar, tetapi sepertinya beta sudah ada sejak 2002
    • Bahkan sekarang pun, kalau menekan tombol yang jarang dipakai di Steam atau memicu error yang jarang terjadi, masih ada perasaan seolah jendela bergaya ini akan muncul dari suatu tempat
      Mirip seperti di Windows 11 yang sampai tahun lalu kadang masih memunculkan dialog bergaya Windows 3.x, dan masih menyisakan sedikit peninggalan era Windows 9x

  • https://alpynedreams.github.io/vgui.css/demo_greensteam

    • Ini juga memakai element untuk progress bar

  • Bacaan lebih lanjut tentang VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
    Fakta menariknya, di CS 1.6 kita bisa kembali ke WON UI lama dengan memasukkan setinfo "_vgui_menus" "0" di config.cfg atau konsol, atau lewat “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” di menu

    • Benar. Menu berbasis teks adalah yang dipakai Half-Life saat dirilis pada 1998
      Counter-Strike juga memakai menu berbasis teks yang sama pada 1999, dan baru pada 2000 engine-nya diperbarui agar menyertakan VGUI. Mungkin Counter-Strike mempertahankan menu lama untuk orang-orang yang lebih menyukai cara itu

  • Menurut saya ini bukan CS 1.6 itu sendiri, melainkan Steam UI, yakni UI untuk server browser dan pengaturan
    Namun saya tidak terlalu ingat seperti apa tampilannya sebelum integrasi Steam

    • CS 1.6 memang khusus Steam. Saya ingat cukup lama menunda registrasi karena tidak suka dengan konsep Steam, lalu akhirnya menyerah
      Saya masih punya Steam ID 6 digit, yang dulu terasa seperti punya makna, walaupun sebenarnya tidak terlalu berarti. Server browser di CS 1.5 ke bawah tertanam di dalam menu aplikasi, dan ini sebenarnya Steam UI, bukan Counter-Strike. Pada masa itu juga ada game seperti Go bawaan yang bisa dimainkan dengan orang-orang di daftar teman
    • Ini adalah VGUI2 yang dibuat untuk engine Source, lalu dipakai ulang di Steam dan kemudian di-backport ke engine GoldSource ketika game-game dirilis lewat Steam
    • Saat itu Steam hampir seperti launcher CS 1.6

  • Semua orang berlari lebih cepat saat memegang pisau

    • Agak lucu bahwa hal itu masih berlaku bahkan di game modern seperti Call of Duty: Black Ops 6. Bukan hanya pisau, tapi senjata jarak dekat secara umum
    • Jantung berdebar! Tangan gemetar!

  • Keren. Saya bukan gamer, tapi pernah melihat anak saya memainkan berbagai game, dan saya suka karena UI ini bukan sekadar milik game tertentu, melainkan rapi dan berbeda
    Penasaran apakah ada library CSS unik lain yang bisa dipakai di halaman web

  • Era 90-an dan awal 2000-an adalah masa keemasan UI

    • Saat itu perusahaan teknologi sedang berusaha menjadikan komputer sebagai barang rumah tangga yang umum, sehingga mereka melakukan pengujian pengguna besar-besaran, dan pengalaman pengguna juga berkembang pesat seiring discoverability menjadi penting
      Namun sekitar 10 tahun lalu, karena screenshot untuk pemasaran terlihat lebih mudah dibuat, mereka mulai membuang semua riset itu demi UI yang minimalis, bersih, datar, dan “modern”. Pilihan dan kustomisasi menghilang, lalu Apple dan Microsoft dibiarkan menentukan seperti apa desktop seharusnya terlihat hanya karena membuka panel opsi bisa membuat seseorang bingung. Saya tidak suka hampir semua bagian pengalaman pengguna macOS, Dock juga buruk, dan terlalu banyak default yang aneh. Menyembunyikan scrollbar, akselerasi pointer, dan membalik arah scroll wheel itu bug, bukan fitur. Windows setidaknya bisa dibuat agar taskbar dan menu Start terlihat dan terasa seperti era Win2K dengan software pihak ketiga. Keluhan terbesar saya terhadap pengalaman pengguna modern adalah menggabungkan beberapa jendela dari satu program menjadi satu dan menghilangkan teks. Kalau ada 3 jendela Firefox yang terbuka, harus ada 3 item taskbar juga, supaya bisa pindah ke jendela yang diinginkan dengan sekali klik. Ini juga memungkinkan judul jendela dipakai seperti widget untuk memantau sesuatu dengan menaruh status di sana
    • Saat mengutak-atik WebSerial, saya memakai XP.css, dan rasanya cukup cocok secara estetika karena mengingatkan pada pengaturan modem serial zaman dulu
      https://web-serial-app.netlify.app/
      Sumber: https://github.com/tanepiper/web-serial-controller
    • Sepenuhnya setuju
      Namun agar adil, saya masih memakai Windows 7 dalam mode UI default tanpa tema, dan juga belum banyak mencoba game modern, jadi sulit membandingkannya dengan tepat