<-- IE錯誤修正 --> NES.css 任天堂紅白機風格 CSS 框架!讓網站帶有復古 8-bit 效果 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 6 天前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 NES.css 任天堂紅白機風格 CSS 框架!讓網站帶有復古 8-bit 效果

Click the image to open in full size.

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



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

Click the image to open in full size.

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

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

使用教學

STEP 1

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

Click the image to open in full size.

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

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

Click the image to open in full size.

STEP 2

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

Click the image to open in full size.

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

Click the image to open in full size.

喜歡 NES.css 任天堂紅白機風格 CSS 框架!讓網站帶有復古 8-bit 效果 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
CSS Lint - 線上 CSS 檢測工具,讓你的樣式表更正確精簡 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-06-30 02:58 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 11:22 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2