- cs16.css là một thư viện CSS mang cảm giác UI trong game Counter Strike 1.6 vào các component HTML, cho phép tạo nhanh phong cách retro chỉ bằng cách gắn class
- Cách cài đặt là thêm liên kết stylesheet cs16.min.css từ CDN jsDelivr vào phần
head của HTML
- Bao gồm nhiều ví dụ UI cơ bản, từ nút, ô nhập, select, nhóm radio, slider, dialog, tooltip, thanh tiến trình cho đến tab
- Dialog dùng HTML
<dialog> và showModal(), còn tab hoạt động bằng cấu trúc radio input cùng label/panel
- Dự án được phát hành theo MIT License, có liên kết tới repository GitHub và trang của tác giả Samuel
Thư viện CSS phong cách Counter Strike 1.6
- cs16.css là thư viện CSS dựa trên UI của Counter Strike 1.6
- Trang dự án cung cấp liên kết tới repository GitHub và các liên kết liên quan đến tác giả
- Để cài đặt, chỉ cần thêm stylesheet từ CDN jsDelivr vào thẻ
head của HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;
Các UI component được cung cấp
-
Nút và các phần tử form cơ bản
- Áp dụng kiểu nút bằng class
cs-btn, đồng thời có cả ví dụ về trạng thái disabled
- Có thể tạo kiểu đường phân cách bằng class
cs-hr
- Checkbox dùng cấu trúc
cs-checkbox, cs-checkbox__label
- Ô nhập dùng các class
cs-input, cs-input__label, với ví dụ cho giá trị nhập thông thường và ô nhập disabled
- Select dùng các class
cs-select, cs-select__label; ví dụ gồm các tùy chọn Volvo, Saab, Opel, Audi
-
UI lựa chọn và điều chỉnh giá trị
- Nhóm radio được tạo bằng cách đặt radio input và label bên trong
cs-fieldset
- Ví dụ radio dùng các lựa chọn Elephant, Monkey, Cheetah, Giraffe
- Slider được cấu thành bằng cách đặt input
range bên trong cấu trúc cs-slider
- Ví dụ slider gồm các giá trị Dark/Light và nhãn Brightness
-
Dialog, tooltip, thanh tiến trình
- Dialog dùng HTML
<dialog> được áp dụng class cs-dialog
- Có ví dụ mở dialog khi nhấn nút bằng
document.querySelector('.cs-dialog').showModal();
- Các nút ở cuối dialog gồm OK, Cancel, Apply
- Tooltip dùng
cs-tooltip và span.text bên trong, với ví dụ các vị trí Right, Left, Top, Bottom
- Thanh tiến trình đặt phần tử
bars bên trong cs-progress-bar và biểu thị trạng thái tiến trình bằng width: 50%
-
Cấu trúc tab
- Tab có cấu trúc đặt radio input, label và panel bên trong
cs-tabs
- Bao gồm ví dụ Tab One, Tab Two, Tab Three cùng nội dung của từng tab
Giấy phép và tác giả
- Thư viện được phát hành theo MIT License
- Tác giả được ghi là Samuel
1 bình luận
Ý kiến trên Hacker News
Tôi đã chờ cơ hội để mở rộng bộ sưu tập này thêm nữa
Có các theme CSS retro như sau: 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
Gần đây khi nhìn con trai chơi Half-Life 2, tôi nhận ra rằng khi menu và những thứ tương tự có phong cách này và trông giống UI của hệ thống máy tính thật, cảm giác sẽ thực tế và nhập vai hơn rất nhiều
Dù có thể trông cũ kỹ, nó mang lại cảm giác công nghiệp và chân thực, đồng thời cũng dễ dùng. Ngược lại, nhiều game ngày nay có menu được cách điệu quá mức, kiểu chữ trang trí hoa mỹ, nên trở nên phi thực tế, trải nghiệm kém và ngay cả việc thao tác cũng thành ra nặng nhọc
Khoảng một năm trước tôi mua bản CoD mới nhất trên PS5, nhưng hoàn toàn không hiểu trong menu đang xảy ra cái gì. Cấu trúc lộn xộn không thể điều hướng khiến tôi phát điên, và cũng có lúc tôi nghĩ chắc là mình già rồi
Vấn đề thật sự là UI trong nhiều game hiện nay hoàn toàn phẳng, chung chung, không màu sắc, không có chút phong cách hay bản sắc nào. Ví dụ như Nintendo làm kiểu này khá nhiều
Quá tuyệt. Năm ngoái tôi cài lại CS 1.6 sau gần 15 năm, và dạo này hầu như ngày nào cũng chơi 10~15 phút với bot để thư giãn đầu óc
Để vui hơn, tôi còn tự tạo cả đội bot và làm hẳn một giải đấu đầy đủ để đấu với các đội chuyên nghiệp khoảng giai đoạn 2008. Tôi cũng tìm lại được mấy map mình từng làm từ một ổ cứng cực kỳ cũ, không ngờ gần 40 tuổi rồi mà vẫn còn chơi nó, và thấy biết ơn phiên bản quá khứ của chính mình
Đến giờ tôi vẫn thấy đây là một trong những custom map có bầu không khí hay nhất mọi thời đại. Còn map nào khác mà bạn có thể nhập vai Gary Oldman hay Harrison Ford nữa chứ
Về mặt kỹ thuật thì đây không hẳn là UI riêng của Counter-Strike, mà vốn là Steam UI đúng không?
Đó cũng là thời mà WON ID, tức SteamID ngày nay nếu có số nhỏ thì được xem như một loại huân chương. Kiểu giống ID tài khoản Slashdot thấp vậy
Nó giống như trên Windows 11 đến tận năm ngoái đôi khi vẫn hiện ra hộp thoại kiểu Windows 3.x, và vẫn còn sót lại đôi chút tàn dư từ thời Windows 9x
https://alpynedreams.github.io/vgui.css/demo_greensteam
Đọc thêm về VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
Một sự thật thú vị là trong CS 1.6, bạn có thể thêm
setinfo "_vgui_menus" "0"vào config.cfg hoặc console, hoặc vào menu “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” để quay lại WON UI cũCounter-Strike cũng dùng cùng kiểu menu văn bản đó vào năm 1999, và phải đến năm 2000 engine mới được cập nhật để bao gồm VGUI. Có lẽ Counter-Strike đã giữ lại menu cũ cho những người thích kiểu đó
Tôi nghĩ đây không hẳn là bản thân CS 1.6, mà là Steam UI, tức phần UI của trình duyệt server và cài đặt
Dù vậy tôi không nhớ rõ trước khi tích hợp Steam thì nó trông như thế nào
Tôi vẫn còn Steam ID 6 chữ số, hồi đó trông có vẻ như mang ý nghĩa gì đó nhưng thật ra cũng chẳng có ý nghĩa mấy. Trình duyệt server của CS 1.5 trở xuống được nhúng trong menu ứng dụng, và đây không phải Counter-Strike UI mà thật sự là Steam UI. Hồi đó Steam còn có cả những game như Go được tích hợp để chơi với người trong danh sách bạn bè
Cầm dao lên là ai cũng chạy nhanh hơn
Ngầu thật. Dù không phải game thủ, tôi vẫn từng thấy con trai mình chơi nhiều game, và điều tôi thích ở UI này là nó không chỉ gắn với một trò chơi cụ thể mà còn gọn gàng và khác biệt
Tôi cũng tò mò không biết còn có thư viện CSS độc đáo nào khác có thể dùng cho trang web không
Thập niên 90 và đầu những năm 2000 là thời kỳ hoàng kim của UI
Nhưng khoảng 10 năm trở lại đây, họ bắt đầu vứt bỏ toàn bộ nghiên cứu đó để ưu tiên những UI tối giản, sạch sẽ, phẳng và “sành điệu”, chỉ vì ảnh chụp màn hình dùng cho marketing trông dễ hiểu hơn. Quyền lựa chọn và khả năng tùy biến biến mất, và Apple cùng Microsoft lại là bên quyết định desktop nên trông như thế nào chỉ vì ai đó có thể bị rối khi mở bảng tùy chọn. Tôi ghét gần như mọi khía cạnh trong trải nghiệm macOS, Dock thì tệ khủng khiếp, và có quá nhiều giá trị mặc định kỳ quặc. Ẩn thanh cuộn, tăng tốc con trỏ, đảo chiều bánh xe cuộn không phải là tính năng mà là lỗi. Windows ít nhất vẫn có thể dùng phần mềm bên thứ ba để làm thanh tác vụ và menu Start trông và hoạt động như thời Win2K. Điều khiến tôi khó chịu nhất trong UX hiện đại là việc gộp nhiều cửa sổ của cùng một chương trình thành một và bỏ luôn phần chữ. Nếu mở 3 cửa sổ Firefox thì thanh tác vụ cũng phải có 3 mục, để tôi có thể nhấp một lần là đến đúng cửa sổ mình muốn. Như vậy cũng có thể dùng tiêu đề cửa sổ để hiển thị trạng thái, kiểu như một widget để theo dõi thứ gì đó
https://web-serial-app.netlify.app/
Mã nguồn: https://github.com/tanepiper/web-serial-controller
Nhưng nói công bằng thì tôi vẫn đang dùng Windows 7 ở chế độ UI mặc định không theme, và cũng chưa chơi nhiều game hiện đại nên khó mà so sánh cho chuẩn được