NES.css 红白机像素风 CSS 框架开源项目

我要开发同款
匿名用户2021年11月04日
77阅读
开发技术JavaScript
所属分类Web应用开发、CSS框架
授权协议MIT

作品详情

NES.css是一款 NES-风格(8位机) 的CSS框架,只需要CSS,不依赖其他任何JavaScript,可以使用它实现红白机风格的按钮,字体,对话框。

 

安装viapackagemanagernpminstallnes.css#oryarnaddnes.css

AltCSS(sass,scss...)

//style.scss@import"./node_modules/nes.css/css/nes.css"

JavaScript

//script.jsimport"nes.css/css/nes.min.css";需要安装css加载程序.

HTML

<!--index.html--><html><head><linkrel="stylesheet"href="./node_modules/nes.css/css/nes.min.css"></head><body></body></html>viaCDN<!--non-minified--><linkhref="https://unpkg.com/nes.css@2.3.0/css/nes.min.css"rel="stylesheet"/><!--latest--><linkhref="https://unpkg.com/nes.css@latest/css/nes.min.css"rel="stylesheet"/><!--corestyleonly--><linkhref="https://unpkg.com/nes.css/css/nes-core.min.css"rel="stylesheet"/>推荐字体语言字体(默认)PressStart2P英语Kongtext日语美咲フォント日语Nuもち韩语둥근모꼴中文Zpix(最像素)使用NES.css只提供组件,你需要定义自己的布局.

默认字体 PressStart2P 只支持英文字符.,把这个框架与其他非英语的语言一起使用的时候,,请使用另外的字体.。

请根据这个关于GoogleFonts的 说明 了解如何把它引入项目,或者按照如下方式简单引入:

<head><linkhref="https://fonts.googleapis.com/css?family=Press+Start+2P"rel="stylesheet"><linkhref="https://unpkg.com/nes.css/css/nes.css"rel="stylesheet"/><style>html,body,pre,code,kbd,samp{font-family:"font-familyyouwanttouse";}</style></head>浏览器支持NES.css与如下浏览器的最新版本兼容.

ChromeFirefoxSafari未经测试

IE/Edge
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论