10個驚人的復古CSS套件

2020-12-25 51CTO

10個驚人的復古CSS套件

是否想發現可在下一個項目中使用的非典型CSS設計?下面是我最喜歡的一些。

作者：杭州程式設計師小張來源：今日頭條|2020-12-24 07:02

是否想發現可在下一個項目中使用的非典型CSS設計?下面是我最喜歡的一些。

NES.css

NES-style(8bit-like)的CSS框架，非常適合您的復古瀏覽器遊戲。

https://nostalgic-css.github.io/NES.css/

RPG UI

Web中用於老式RPG GUI的輕量級純CSS框架;包括按鈕，複選框，圖標，滑塊，光標和許多其他有趣的東西。

http://ronenness.github.io/RPGUI/

98.css & XP.css

98.css是Windows 98風格，不附帶任何JavaScript，因此與任何前端框架兼容。也可用於Windows XP。

https://jdan.github.io/98.css/

Wired Elements

一組具有手繪草圖外觀的常見UI元素，以足夠的隨機性繪製，以確保沒有兩個渲染完全相同。

https://wiredjs.com/

BOOTSTRA.386

1980年代的DOS啟發了Twitter Bootstrap主題。

http://kristopolous.github.io/BOOTSTRA.386/

Geo Bootstrap

為現代網絡打造的另一個永恆的Twitter Bootstrap主題會引起很多懷舊感(如果您的年齡足夠大，可以回憶起這些更簡單的時代)。

http://code.divshot.com/geo-bootstrap/

PSone.css

受NES.css啟發的Playstation 1樣式CSS框架

https://micah5.github.io/PSone.css/

PaperCSS

PaperCSS是一組常見的UI元素，外觀很酷。

https://www.getpapercss.com/

Terminal CSS

適用於終端愛好者的現代且最小的CSS框架。該套件使用純CSS編寫，約為3k gzip。

https://terminalcss.xyz/

Isometric Sass

最後一個是一個庫，該庫無需使用JavaScript即可創建等距的2D，並充分利用了CSS三維轉換。

https://morgancaron.github.io/IsometricSass/

【責任編輯：

趙寧寧

TEL：（010）68476606】

點讚 0

相關焦點

  • 超棒的前端開發界面套件 - InK
    在線演示 前面我們曾經介紹過jkit這個jQuery的UI套件，今天介紹另外一款幫助你開發界面元素的JS套件InK。 InK是一個能夠幫助你快速開發web界面的界面套件，使用簡單並且可擴展。使用了HTML/CSS/Javascript技術來設置布局，展示常用的界面元素，並且實現互動的特性，所有這些都是以內容為中心的，並且對於用戶，開發人員和設計師來說都非常友好。
  • 最新變速套件混搭兼容性整理 內含後撥最大齒容數驚人真相
    速套件在舊車上，或是存放於家中的某個角落，偶然也會有興起之時想要將這些閒置利用起來，這時就不得不重談那個老話題：變速套件混搭兼容性。因此在10速年代的兼容性並不是那麼好，10速與11速混用也是如此。 　　而到了11速時代，情況卻發生了較大的改變，雖然在實際使用過程中，小編發覺例如CP的飛輪直接安裝於SRAM套件中使用，變速會稍有不順，且會產生異響，但這些問題通過技師調教都可以解決。
  • 保時捷明年將推傳統內飾套件 復古風格
    日前我們從相關渠道獲悉，保時捷或將在明年推出傳統內飾套件供消費者選擇，其突出了情懷及簡約。在本人看來更是為了還原最純粹的駕駛感和機械感。看了以下要點，本文算讀完一半內飾方面經典的「五炮筒」設計將被保留；中控顯示屏的面積將縮小；保時捷設計還將同步推出手錶等產品。
  • 10 個 GitHub 上超火的 CSS 技巧項目,找到寫 CSS 的靈感!
    You-need-to-know-css該項目是 CSS 的各種效果實現，尤其是動畫效果。筆者把自己的收穫和工作中常用的一些 CSS 小樣式總結成這份文檔。目前文檔一共包含 43 個 CSS 的小樣式（持續更新…），所以還是很不錯的學習 CSS 的項目來的。
  • 10個關於css高頻面試題
    +, Safari 4 , Chrome 3opacity不透明度allbox-sizing控制盒模型的組成模式FF3+, Opera 10, Safari 4, Chrome 3outline外邊框FF3+, safari 4, chrome 3, opera 10background-size不指定背景圖片的尺寸safari 4, chrome 3, opera 10background-origin
  • 17個CSS知識點整理
    8、css的基本語句構成是？選擇器{屬性1:值1;屬性2:值2;……}9、你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?IE(IE內核)、火狐（Gecko）、谷歌（webkit）、opear(Presto) 10、寫出幾種IE6 BUG的解決方法雙邊距BUG：float引起的，使用display；像素問題：使用float引起的，使用dislpay:inline -3px；超連結hover
  • DIV+CSS教程_DIV+CSS布局_DIV+CSS實例教程手冊
    第1天：XHTML CSS基礎知識文件類型2.語言編碼3. html標籤4. css風格5. css優先權6.派生選擇器4，css選擇器的分組5，垂直二級清單6，相對定位和絕對定位第5天：Hyperlink偽類
  • 10 個 CSS 高頻面試題,你都會嗎?
    3+, Safari 4 , Chrome 3opacity不透明度allbox-sizing控制盒模型的組成模式FF3+, Opera 10, Safari 4, Chrome 3outline外邊框FF3+, safari 4, chrome 3, opera 10background-size不指定背景圖片的尺寸safari 4, chrome 3, opera 10background-origin
  • 10個實用的CSS和JavaScript動畫插件/框架/庫
    10個實用的CSS和JavaScript動畫插件/框架/庫 站長之家（CHINAZ.com）12月1日編譯：在網站中嵌入動畫已經成為今年的設計趨勢之一
  • 【教程】html+css零基礎入門教程之CSS邊框
    為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值。
  • 復古雙傑:2019凱旋復古摩託車連袂登場
    以當代科技結合因循守舊的造車理念，賦予經典車款仿佛昨日世界的經典外觀與懷舊的駕馭感受，箇中高手是來自大不列顛的凱旋；然而凱旋並不因此而自滿，為了超越昨天的自己，投入當代科技，將初代Street Scrambler / Street Twin脫胎換骨，以全新姿態登場，並挾以多項成套改裝套件，帶給勇於展現個人風格的車主更多的想像空間。
  • 重現1960年代的美好:山葉R3復古跑車套件
    正當現代跑車在工業技術進步、對車輛風阻知識的更了解，演變成更利於破風的外型之下，來自美國南加州的GG Retro Fitz，推出能讓現代化的YZF-R3，搖身一變成為1960年代跑車的子彈型整流罩套件：ROCKET STREET。
  • CSS工程化
    SMACSS等等BEM全稱是：Block Element Modifier一個完整的BEM類名：block__element_modifier，例如：banner__dot_selected，可以表示：輪播圖中，處於選中狀態的小圓點三個部分的具體含義為
  • CSS實現水平垂直居中的10種方式
    倉庫，歡迎大家star僅居中元素定寬高適用absolute + 負marginabsolute + margin autoabsolute + calc居中元素不定寬高absolute + transformlineheightwriting-modetablecss-table
  • HTML+CSS:認識css的概念與語法,了解css的優勢
    之前的文章給大家介紹了下網頁中常用的html的基本知識，從這篇文章開始我們開始介紹css的內容。可以這麼說學完了html你可以做出網頁的框架，學好了css之後呢，你就可以給做好的框架進行美化填色，做出各種各樣的網頁。
  • 【專欄試讀】(10)讓「盒子」動起來:① 浮動 | CSS
    前言：前 10 篇文章，我們基本上都是在用「理論」學習「理論」。從這篇開始，我們試著用「實踐」來學習理論，然後又用於實踐。一個原則：把代碼拷貝到 JS Bin 上，對照效果搞懂每行代碼「是什麼」、「為什麼」、「怎麼樣」？
  • 一文詳解 CSS-in-JS
    https://www.nonenglishengineer.com/css-design-patterns/https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9bhttps://engineering.fb.com/2020/05/08
  • 高級前端開發工程師總結:8個不可錯過的CSS開發工具
    網上學習製作工具1、 EnjoyCSS地址：https://enjoycss.com/這個工具非常簡單，是我們學習使用CSS時的救星。你可以使用一些簡單的UI設計元素，然後通過這個工具將其轉換為CSS代碼。EnjoyCSS極大地改變了我的工作流程。由於易於使用，它使我花費在創建複雜CSS樣式上的時間和精力減少了。
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。（1）css的繼承規則CSS的某些樣式代碼是具有繼承性的，那麼究竟什麼是繼承呢？（2）css代碼的權重優先級css就像工程師一樣是很嚴謹的，有的時候我們為同一個元素設置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼：上邊的代碼中，p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？
  • CSS入門
    -- <link rel="stylesheet" href="style.css"> 導入css文件--> <link rel="stylesheet" href="style.css"></head><body><h1>hello world!