1. 爱猫说设计师网首页
  2. 素材资源
  3. UI界面

NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

回忆起来我的电玩之路应该是幼稚园时家中的任天堂红白机(NES)开始的,以前的休闲娱乐不多,顶多就是一些掌上型电玩和俄罗斯方块,当时 486 电脑价格还很高,一直到上了国小才接触到电脑,对于很多差不多年纪的朋友来说,现在想起那些画质很差、音乐很洗脑但又会一玩不可收拾的老游戏依然是津津乐道,虽然现在游戏声光效果做得非常优异,却似乎不如十几二十年前游戏那么耐玩,或许值得大家思考一下。

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

在红白机时代使用 8 位元(8-bit)处理器,游戏部分也是一格一格看起来很粗糙,实际上这样的风格还确实勾起许多童年的美好回忆,就连 Google Maps 也曾在愚人节推出过任天堂专用 8-bit 风格的地图彩蛋。只是如果你想做一个复古怀旧的网页,类似的风格要如何运用在网页上呢?

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

今天发现一个很有趣的开放源代码专案 “NES.css”,红白机风格的 CSS 框架,采用的当然是 8-bit 效果,只要透过 CSS 样式表就能将它载入网页。从范例网站看到针对各种网页元素进行的八位元效果,非常维妙维肖,包括按钮、容器、选项按钮、核选方块、表单、气泡框和图示等等,有兴趣的话可以在 NES.css 网站首页找到。

网站名称:NES.css
网站链接:https://github.com/BcRikko/NES.css

使用教学

STEP 1

开启 NES.css 的 CSS Framework 网站首页,可以看到这些写好的样式范本,例如普通按钮、主要按钮、成功、警告或失败等不同情况下颜色变化,也有显示于容器中的文字效果范例,对于表单的文字方块、按钮、核选方块也都有对应的效果。

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

在 NES.css 中收录的图示不多,只有几个互动、社群网站和 Github 图示图案,不过如果需要也可以去网路上找找有没有类似 8-bit 风格的图示,应该也有不少选择。

顺带一提,之前国外网友曾经复刻过以前掌上型游戏机神奇宝贝游戏的免费字型,有兴趣的朋友可以参考 “Pokemon Font 复刻 Game Boy 神奇宝贝游戏免费字型,二十年后经典重现” 介绍,这也是非常有时代感的字体。

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

STEP 2

开启 NES.css 的 Github 页面后可以找到相关档案,包括最重要的 CSS 样式表。

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

下方会有安装(载入)方式,其实只要透过 UNPKG 免费内容传递网络(CDN)服务直接载入 NES.css 就能在网页中使用,亦能指定要使用的样式表版本。

12 - NES.css 任天堂红白机风格 CSS 框架!让网站带有复古 8-bit 效果

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自投稿,不代表爱猫说设计师网立场,如若转载,请注明出处:https://www.imaoshuo.com/nes-css-rentiantanghongbaijifengge-css-kuangjiarangwangzhandaiyoufugu-8-bit-xiaoguo/

发表评论

登录后才能评论