Counter Strike 1.6 UI tabanlı CSS kütüphanesi cs16.css

 (cs16.samke.me)
1 puan yazan GN⁺ 2025-01-25 | 1 yorum | WhatsApp'ta paylaş
  • cs16.css, Counter Strike 1.6’nın oyun UI hissini HTML bileşenlerine taşıyan bir CSS kütüphanesi; yalnızca sınıf ekleyerek hızlıca retro tarz oluşturmayı sağlıyor
  • Kurulum, HTML head bölümüne jsDelivr CDN’deki cs16.min.css stil sayfası bağlantısını ekleyerek yapılıyor
  • Butonlar, giriş alanları, select, radio grupları, slider, dialog, tooltip, progress bar ve tab’lere kadar geniş bir temel UI örneği yelpazesi içeriyor
  • Dialog, HTML <dialog> ve showModal() kullanıyor; tab’ler ise radio input ile label/panel yapısı üzerinden çalışıyor
  • Proje MIT License ile yayımlanmış; GitHub deposu ve geliştirici Samuel’in sayfası da bağlantı olarak verilmiş

Counter Strike 1.6 tarzı CSS kütüphanesi

  • cs16.css, Counter Strike 1.6 UI’ını temel alan bir CSS kütüphanesidir
  • Proje sayfası GitHub deposu ve geliştiriciyle ilgili bağlantılar sunuyor
  • Kurulum için HTML head etiketine jsDelivr CDN stil sayfasını eklemek yeterli
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Sunulan UI bileşenleri

  • Butonlar ve temel form öğeleri

    • cs-btn sınıfıyla buton stili uygulanıyor; disabled durumuna ilişkin örnek de içeriyor
    • cs-hr sınıfıyla ayırıcı çizgi stili oluşturulabiliyor
    • Checkbox’lar cs-checkbox, cs-checkbox__label yapısını kullanıyor
    • Giriş alanları cs-input, cs-input__label sınıflarını kullanıyor; normal giriş değeri ve disabled giriş değeri örnekleri var
    • Select, cs-select, cs-select__label sınıflarını kullanıyor; örnek Volvo, Saab, Opel, Audi seçeneklerinden oluşuyor

  • Seçim UI’ı ve değer ayarlama

    • Radio grubu, cs-fieldset içine radio input ve label yerleştirme yöntemiyle oluşturuluyor
    • Radio örneği Elephant, Monkey, Cheetah, Giraffe seçeneklerini kullanıyor
    • Slider, cs-slider yapısının içine range input eklenerek oluşturuluyor
    • Slider örneği Dark/Light değerlerini ve Brightness etiketini içeriyor

  • Dialog, tooltip, progress bar

    • Dialog, cs-dialog sınıfı uygulanmış HTML <dialog> öğesini kullanıyor
    • Butona tıklandığında dialog’u document.querySelector('.cs-dialog').showModal(); ile açan bir örnek içeriyor
    • Dialog altındaki butonlar OK, Cancel, Apply olarak yapılandırılmış
    • Tooltip, cs-tooltip ve içindeki span.text öğesini kullanıyor; Right, Left, Top, Bottom konum örnekleri var
    • Progress bar, cs-progress-bar içinde bars öğesi kullanıyor ve ilerleme durumunu width: 50% ile gösteriyor

  • Tab yapısı

    • Tab’ler, cs-tabs içine radio input, label ve panel yerleştirilen bir yapıdan oluşuyor
    • Tab One, Tab Two, Tab Three örnekleri ve her tab’in içeriği yer alıyor

Lisans ve geliştirici

  • Kütüphane MIT License ile yayımlanmıştır
  • Geliştirici Samuel olarak gösteriliyor

İlgili okumalar

1 yorum

 
GN⁺ 2025-01-25
Hacker News yorumları

  • Koleksiyonu daha da genişletmek için fırsat kolluyordum
    Retro CSS temaları olarak şunlar var: 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

  • Geçenlerde oğlumun Half-Life 2 oynadığını izlerken, menü gibi şeyler bu tarzda olduğunda ve gerçek bir bilgisayar sistemi arayüzü gibi göründüğünde çok daha gerçekçi ve sürükleyici hissettirdiğini fark ettim.
    Eski görünebilir ama endüstriyel ve gerçek gibi bir hissi var; aynı zamanda kullanımı kolay. Buna karşılık günümüzdeki birçok oyunda çiçekli süs yazıları andıran, aşırı stilize menüler çok fazla; gerçekçi değiller, deneyimi kötüleştiriyorlar ve kontrol etmek başlı başına işe dönüşüyor.

    • Günümüz UI eğilimi her şeyi düzleştirip işlevleri gizleyerek kullanıcı deneyiminin özü olan keşfedilebilirliği mahvediyorsa, “eskilik” bir kusur değil, bir özelliktir bence.
    • Modern oyunların menü UI’larından bahsetmeye başlamak bile istemiyorum.
      Yaklaşık bir yıl önce PS5 için en yeni CoD’u aldım; menüde ne olup bittiğini anlamak imkânsızdı. Gezinmesi mümkün olmayan karmakarışık bir yapıydı, delirecek gibi oldum; belki de sadece yaşlanmışımdır.
    • Oyunun stiline veya tonuna bağlı olarak aşırı stilize menüler de gayet uyabilir.
      Asıl sorun, günümüz oyunlarının çoğunda görülen tamamen düz, sıradan, renksiz, hiçbir tarzı ya da kimliği olmayan UI. Örneğin Nintendo bunu epey sık yapıyor.
    • Crysis 2 mi 3 mü hatırlamıyorum, menü sistemini sevmiştim. Gerçekten nanosuit’in içindeymişsin hissi veriyordu.
    • Eski UI’ların affordance’ı iyidir. UI öğesinin etkileşimli olup olmadığı görünür; “modern” UI ise bu açıdan oldukça berbat.

  • Çok iyi. Geçen yıl neredeyse 15 yıl aradan sonra CS 1.6’yı yeniden kurdum; bu aralar neredeyse her gün botlara karşı 10–15 dakika oynayıp kafamı boşaltıyorum.
    Eğlenceyi artırmak için kendi bot takımlarımı bile yaptım, 2008 civarındaki profesyonel takımlara karşı oynanan tam bir turnuva da hazırladım. Eskiden yaptığım haritaları da çok eski bir sabit diskten tekrar buldum; neredeyse 40 yaşına gelmişken onları oynayacağımı hiç düşünmezdim, geçmişteki kendime minnettarım.

    • CS her zaman kafa boşaltmak için iyiydi. Ranked 5’e 5 maçlar baskılı ve yoğundur, 30–45 dakika kadar sürer ve ihtiyaç duyulan kadar insan teması da sağlar. Birkaç yıl önce bıraktığımdan beri yerini dolduracak bir şey bulamadım.
    • 2005’te saatlerce kz_ haritaları oynadığıma dair güzel anılarım var. Bazı insanların becerisi gerçekten inanılmazdı. Gece 3’te bir kz haritasında tek başınayken birinin zıplayarak dolaştığını duymanın hissini tuhaf biçimde özlüyorum.
    • Arkadaşlarla LAN’da ya da çevirmeli bağlantıyla de_747 gibi özel haritalar oynadığımız anılar akın ediyor: https://gamebanana.com/mods/82979
      Bu haritanın hâlâ tüm zamanların atmosferi en iyi özel haritalarından biri olduğunu düşünüyorum. Gary Oldman ya da Harrison Ford rolü yapabileceğin başka hangi harita var ki?
    • Ben de CS 1.6’ya 15–16 yıldır dokunmadım; yeniden denesem eğlenceli olabilir. Mac M1’de çalıştırılabilir mi, yoksa sanal makine mi gerekir merak ediyorum. Bot ayarları ve yapılandırması için okunacak kaynak önerileri de almak isterim.

  • Teknik olarak Counter-Strike’a özgü bir UI’dan çok, aslında Steam UI değil mi?

    • Doğru. Ama Steam aslında Counter-Strike güncellemelerini ve hile önleme sistemini, yanlış hatırlamıyorsam VAC’i yönetmek için yapılmıştı.
      WON ID’nin, yani bugünkü SteamID’nin düşük olması madalya gibi görüldüğü zamanlardı. Düşük Slashdot hesap ID’si gibi bir şeydi.
    • Doğru. Steam istemcisi başlangıçta Valve oyunlarında kullanılan aynı VGUI kütüphanesi üzerine inşa edilmişti ve o dönem HL1/CS ile aynı stili kullanıyordu.
    • 2000 Martı civarında Half-Life’a eklendi, kısa süre sonra Counter-Strike’a da geldi. Steam’in ilk ne zaman çıktığından emin değilim ama 2002’den itibaren betası varmış gibi hatırlıyorum.
    • Bugün bile Steam’de daha az yaygın bir düğmeye basınca ya da nadir bir hatayı tetikleyince bir yerlerden bu tarzda bir pencere fırlayacakmış hissi hâlâ var.
      Windows 11’de de geçen yıla kadar ara sıra Windows 3.x tarzı iletişim kutularının çıkması ve hâlâ Windows 9x döneminden biraz kalıntı bulunması gibi.

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

    • Bu da ilerleme çubuğu için element kullanıyor.

  • VGUI hakkında daha fazla okuma: https://developer.valvesoftware.com/wiki/Category:VGUI
    İlginç bir bilgi olarak, CS 1.6’da config.cfg’ye ya da konsola setinfo "_vgui_menus" "0" koyarak veya menüde “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” yolundan eski WON UI’a geri dönebiliyordunuz.

    • Evet. Metin tabanlı menüler, Half-Life’ın 1998’de çıktığında kullandığı şeydi.
      Counter-Strike da 1999’da aynı metin tabanlı menüleri kullanıyordu; motor ancak 2000’de VGUI içerecek şekilde güncellendi. Muhtemelen Counter-Strike, o yöntemi tercih edenler için eski menüleri bırakmıştı.

  • Bunun CS 1.6’nın kendisinden ziyade Steam UI, yani sunucu tarayıcısı ve ayarlar tarafındaki UI olduğunu düşünüyorum.
    Ama Steam entegrasyonundan önce nasıl göründüğünü pek hatırlamıyorum.

    • CS 1.6 Steam’e özeldi. Steam fikrinden hoşlanmadığım için kayıt olmayı epey uzun süre erteleyip sonunda pes ettiğimi hatırlıyorum.
      Hâlâ 6 haneli Steam ID’ye sahibim; bir zamanlar anlamlı bir şeymiş gibi gelirdi ama aslında pek bir anlamı yoktu. CS 1.5 ve altındaki sunucu tarayıcısı uygulama menüsünün içine gömülüydü; bu Counter-Strike değil, gerçekten Steam UI. O dönemde arkadaş listesindeki kişilerle oynayabildiğiniz Go gibi oyunlar da yerleşik geliyordu.
    • Bu, Source motoru için yapılan VGUI2; Steam’de yeniden kullanıldıktan sonra oyunlar Steam üzerinden yayımlanınca GoldSource motoruna geriye taşındı.
    • O zamanlar Steam neredeyse bir CS 1.6 başlatıcısıydü.

  • Bıçağı eline alınca herkes daha hızlı koşar.

    • Call of Duty: Black Ops 6 gibi modern oyunlarda bile hâlâ böyle olması biraz komik. Sadece bıçak değil, genel olarak yakın dövüş silahları için de böyle.
    • Kalbim çarpıyor! Ellerim titriyor!

  • Harika. Oyuncu değilim ama oğlumun çeşitli oyunlar oynadığını gördüm; bu UI’ın belirli bir oyuna ait olmasından değil, temiz ve farklı olmasından hoşlandım
    Sayfalarda kullanılabilecek başka özgün CSS kütüphaneleri var mı merak ediyorum

  • 90’lar ve 2000’lerin başı UI’ın altın çağıydı

    • O dönem teknoloji şirketleri bilgisayarları sıradan bir ev eşyasına dönüştürmeye çalışıyordu; bu yüzden çok yoğun kullanıcı testleri yapıldı ve keşfedilebilirlik önem kazandıkça kullanıcı deneyimi de büyük ölçüde gelişti
      Ama yaklaşık 10 yıl önce, pazarlama ekran görüntülerinde daha kolay göründüğü gerekçesiyle minimalist, temiz, düz ve “şık” UI’ları tercih edip bu araştırmaların hepsini çöpe atmaya başladılar. Seçenekler ve özelleştirme kayboldu; bir seçenekler panelini açınca birileri kafası karışabilir diye Apple ve Microsoft masaüstünün nasıl görünmesi gerektiğine karar verir oldu. macOS kullanıcı deneyiminin neredeyse her kısmından nefret ediyorum; Dock da berbat ve tuhaf varsayılan ayarlar çok fazla. Kaydırma çubuklarını gizlemek, imleç ivmelendirmesi ve kaydırma tekerleğini tersine çevirmek özellik değil, bug’dır. Windows’ta en azından üçüncü taraf yazılımlarla görev çubuğunu ve Başlat menüsünü Win2K dönemindeki gibi görünüp hissettirmek mümkün. Modern kullanıcı deneyimindeki en büyük şikayetim, bir programın birden fazla penceresini tek bir öğede birleştirip metni kaldırmaları. Açık 3 Firefox penceresi varsa görev çubuğunda da 3 öğe olmalı; böylece tek tıklamayla istediğin pencereye gidebilirsin. Pencere başlığına durum bilgisini koyup onu bir şeyi izleyen widget gibi kullanmak da mümkün olur
    • WebSerial ile uğraşırken XP.css kullandım; eski seri modem ayarlarını hatırlattığı için estetik açıdan epey uygun olduğunu düşünüyorum
      https://web-serial-app.netlify.app/
      Kaynak: https://github.com/tanepiper/web-serial-controller
    • Tamamen katılıyorum
      Yine de adil olmak gerekirse ben hâlâ Windows 7’yi varsayılan temasız UI modunda kullanıyorum ve modern oyunları da pek oynamadığım için düzgün bir karşılaştırma yapmak zor