l-hammer/You-need-to-know-css

# 🎢 Interesting usage

Some intersting CSS project here, welcome to contribute~ 

### NES.css

NES red and white style CSS framework, the main implementation principle is through the clever combination of font [Press+Start+2P](https://fonts.google.com/specimen/Press+Start+2P) and `box-shadow`, which is very interesting, especially the implementation of icon. The source code is highly recommended ~ :thumbsup:

<!-- [NES.css](https://bcrikko.github.io/NES.css/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://bcrikko.github.io/NES.css/" width="100%" height="429px"></iframe>

?> **GitHub:** [BcRikko/NES.css](https://github.com/BcRikko/NES.css)

### Shapes generated

Shapes implemented with CSS gradients

<!-- [Shapes generated](https://yuanchuan.name/gradient-shapes/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://yuanchuan.name/gradient-shapes" width="100%" height="429px"></iframe>

?> **GitHub:** [yuanchuan/gradient-shapes](https://github.com/yuanchuan/gradient-shapes)

### CSS Grid Generator

Generate basic CSS Grid code to make dynamic layouts!

<!-- [CSS Grid Generator](https://cssgrid-generator.netlify.com/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://cssgrid-generator.netlify.com/" width="100%" height="429px"></iframe>

?> **GitHub:** [sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator)

### Epic Spinners

CSS animation loading

<!-- [Epic Spinners](https://epic-spinners.epicmax.co/#/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://epic-spinners.epicmax.co" width="100%" height="429px"></iframe>

?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners)

### CSS file icons

File icon implementated by pure CSS

<!-- [CSS file icons](https://colorswall.github.io/CSS-file-icons/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://colorswall.github.io/CSS-file-icons" width="100%" height="429px"></iframe>

?> **GitHub:** [colorswall/CSS-file-icons](https://github.com/colorswall/CSS-file-icons)

<!-- ### THE COLOUR CLOCK

Colour clock

[THE COLOUR CLOCK](http://thecolourclock.co.uk/ ':include :type=iframe width=100% height=429px')

?> similar with it [hex color clock](http://www.jacopocolo.com/hexclock/), **GitHub:** [jacopocolo/Hex-clock](https://github.com/jacopocolo/Hex-clock) -->

### magic

CSS animation effects

<!-- [magic](https://minimamente.com/example/magic_animations/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://minimamente.com/example/magic_animations" width="100%" height="429px"></iframe>

?> **GitHub:** [miniMAC/magic](https://github.com/miniMAC/magic)

### A Single Div

CSS drawing with only one HTML element

<!-- [A Single Div](https://a.singlediv.com/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://a.singlediv.com" width="100%" height="429px"></iframe>

?> **GitHub:** [lynnandtonic/a-single-div](https://github.com/lynnandtonic/a-single-div)