選單

NES.css 任天堂紅白機風格 CSS 框架!讓網站帶有復古 8-bit 效果

NES.css 任天堂紅白機風格 CSS 框架!讓網站帶有復古 8-bit 效果

回憶起來我的電玩之路應該是幼稚園時家中的任天堂紅白機(NES)開始的,以前的休閒娛樂不多,頂多就是一些掌上型電玩和俄羅斯方塊,當時 486 電腦價格還很高,一直到上了國小才接觸到電腦,對於很多差不多年紀的朋友來說,現在想起那些畫質很差、音樂很洗腦但又會一玩不可收拾的老遊戲依然是津津樂道,雖然現在遊戲聲光效果做得非常優異,卻似乎不如十幾二十年前遊戲那麼耐玩,或許值得大家思考一下。

在紅白機時代使用 8 位元(8-bit)處理器,遊戲部分也是一格一格看起來很粗糙,實際上這樣的風格還確實勾起許多童年的美好回憶,就連 Google Maps 也曾在愚人節推出過任天堂專用 8-bit 風格的地圖彩蛋。只是如果你想做一個復古懷舊的網頁,類似的風格要如何運用在網頁上呢?

NES.css

今天發現一個很有趣的開放原始碼專案「NES.css」,紅白機風格的 CSS 框架,採用的當然是 8-bit 效果,只要透過 CSS 樣式表就能將它載入網頁。從範例網站看到針對各種網頁元素進行的八位元效果,非常維妙維肖,包括按鈕、容器、選項按鈕、核選方塊、表單、氣泡框和圖示等等,有興趣的話可以在 NES.css 網站首頁找到。

網站名稱:NES.css
網站鏈結:https://github.com/BcRikko/NES.css

使用教學

STEP 1

開啟 NES.css 的 CSS Framework 網站首頁,可以看到這些寫好的樣式範本,例如普通按鈕、主要按鈕、成功、警告或失敗等不同情況下顏色變化,也有顯示於容器中的文字效果範例,對於表單的文字方塊、按鈕、核選方塊也都有對應的效果。

NES.css

在 NES.css 中收錄的圖示不多,只有幾個互動、社群網站和 Github 圖示圖案,不過如果需要也可以去網路上找找有沒有類似 8-bit 風格的圖示,應該也有不少選擇。

順帶一提,之前國外網友曾經復刻過以前掌上型遊戲機神奇寶貝遊戲的免費字型,有興趣的朋友可以參考「Pokemon Font 復刻 Game Boy 神奇寶貝遊戲免費字型,二十年後經典重現」介紹,這也是非常有時代感的字體。

NES.css

STEP 2

開啟 NES.css 的 Github 頁面後可以找到相關檔案,包括最重要的 CSS 樣式表。

NES.css

下方會有安裝(載入)方式,其實只要透過 UNPKG 免費內容傳遞網路(CDN)服務直接載入 NES.css 就能在網頁中使用,亦能指定要使用的樣式表版本。

NES.css

分享本文