# Cool Design

<iframe height="600" style="width: 100%;" scrolling="no" title="3D card slider" src="https://codepen.io/Rogelio-KG/embed/RNbPqPO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Rogelio-KG/pen/RNbPqPO">
3D card slider</a> by Rogelio KG (<a href="https://codepen.io/Rogelio-KG">@Rogelio-KG</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Gadget

### Shapes
+ [Triangle](https://codepen.io/Rogelio-KG/pen/NWQNmjJ)

### Button
+ [Dark Mode Switch](https://codepen.io/Rogelio-KG/pen/ZEgWLBw)
+ [Cloud Button](https://codepen.io/Rogelio-KG/pen/PoLPNgo)
+ [Position Aware Button](https://codepen.io/Rogelio-KG/pen/XJrdzXK)
+ [The Other Buttons](https://blog.tarswork.com/post/a-selection-of-cool-css-button-effects#google_vignette)

### Text
+ [Background Text](https://codepen.io/Rogelio-KG/pen/NWQoKpQ)
+ [Background Text (clip)](https://codepen.io/Rogelio-KG/pen/pvzzLMX)
+ [Hollow Text](https://codepen.io/Rogelio-KG/pen/abePgzK)

### Cool
+ [Glowing Grandient Border](https://codepen.io/Rogelio-KG/pen/bGXRJXw)
+ [Blob](https://codepen.io/Rogelio-KG/pen/yLmobEE)
+ [Cube](https://codepen.io/Rogelio-KG/pen/PoMKLoj)
+ [Flip Card](https://codepen.io/Rogelio-KG/pen/WNVEPXO)
+ [Vanilla-tilt.js](https://micku7zu.github.io/vanilla-tilt.js/)
+ [Masonry](https://masonry.desandro.com/)

### Scroll
+ [Fade In on Scroll](https://codepen.io/Rogelio-KG/pen/KKOeMBV)
+ [Infinite Scroll](https://codepen.io/Rogelio-KG/pen/xxvzExz)

### Functional
+ [Scrollbar](https://codepen.io/Rogelio-KG/pen/abemOZy)
+ [Hambergur Menu](https://codepen.io/Rogelio-KG/pen/rNXWjNG)
+ [Lightbox](https://codepen.io/Rogelio-KG/pen/yLmMbjm)

### Hover Effects
+ [Underline](https://codepen.io/Rogelio-KG/pen/oNKLjrY)

### Animations
+ [Glowing Grandient Border - Animation](https://codepen.io/Rogelio-KG/pen/abewgpd)
+ [Infinite Banner](https://codepen.io/Rogelio-KG/pen/mybPrjV)
+ [Typewriter](https://codepen.io/Rogelio-KG/pen/LYwLBjW)
+ [Typewriter - Multiple Texts](https://codepen.io/Rogelio-KG/pen/WNVOmWV)

### 3D
+ [3D card slider](https://codepen.io/Rogelio-KG/pen/RNbPqPO)

## Fonts

### Chinese

### English
+ [Josefin](https://fonts.google.com/specimen/Josefin+Sans)