Feb 04, 2021 08:00:00

NES.css, a cute 8-bit design NES-style CSS framework that can be used for free

' NES.css ' is a free CSS framework that makes it easy to create NES-style websites. NES.css is of Sakura Internet

Dashino Mr. has been developing, from the basic elements such as buttons and input form, it is available to SNS and character of the icon.

NES.css --NES-style CSS Framework
https://nostalgic-css.github.io/NES.css/#

nostalgic-css / NES.css: NES-style CSS Framework | NES-style CSS framework
https://github.com/nostalgic-css/NES.css

NES-style CSS framework 'NES.css' has been released | Black Everyday Company
https://kuroeveryday.blogspot.com/2018/12/nescss-released.html

NES.css is a JavaScript-independent CSS framework that allows you to specify the class attribute to create a NES-style website.

button

Radio buttons and checkboxes

Text input field

It is also possible to express the conversation with a balloon.

There are also badges and icons for SNS.

Cute pixel art icons are also available. The copyright of the icon belongs to Nintendo, so you need to follow Nintendo's guidelines when using it.

When actually using NES.css, it is OK if you add the following tag to the head part of HTML.

[code] [/ code]

Write HTML to display the button as a trial.

[code]








Gigazine

[/ code]

It looks like this when displayed. NES.css is a framework that contains only components, so the font remains the same.

If you want to create a more NES world view, load a font such as '

Press Start 2P ' to create a more atmosphere.

NES.css expresses a pixel art with the '

box-shadow ' property used when adding shadows, and the detailed implementation method is summarized in the developer's blog .

For those who want to create their own original pixel art CSS, you can easily output the pixel art CSS with 'DotGen.css' published by Mr. Darshino.

DotGen.css --CSS Collection
https://bcrikko.github.io/css-collection/tool/dotgen/index.html