You Don't Need JavaScript 
Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.
Style Guide:
- ```markdown
- ## Subject
- [<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
- [<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
- [<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)
- ***
-
- ```
Quick links
##
Accordion / Toggle
[

](http://www.mraffaele.com/labs/css-only-accordions/)[

](http://codepen.io/cristina-silva/pen/pyXQrj)[

](http://codepen.io/PaulZi/pen/zBbVvV)[

](http://codepen.io/ekrof/pen/YqmXdQ)
##
Carousel
[

](http://codepen.io/SitePoint/pen/MyPVdK)[

](https://codepen.io/cavico/pen/yOjwya)[

](https://codepen.io/FabianK/pen/zJLLrR)
##
Counter of checked check-boxes
[

](https://codepen.io/anon/pen/eZWXOZ)[

](http://codepen.io/lonekorean/pen/wKbzv)
##
Flip on click
[

](https://codepen.io/RuudBurger/pen/bwjry)
##
Floating label on Textfield
[

](http://codepen.io/KtorZ/pen/ZOzdqG)
##
Font-Face (Latin)
[

](https://yusugomori.com/projects/css-sans/fonts)
##
Info on hover/ Popover
[

](https://codepen.io/guuslieben/pen/gabQWM)[

](http://codepen.io/cristina-silva/pen/XXOpga)[

](http://codepen.io/SitePoint/pen/akAmPw)[

](http://codepen.io/ekrof/pen/YqmXdQ)
##
Image Gallery[

](https://codepen.io/shaishgandhi/pen/yJzamw)[

](http://codepen.io/pavlovsk/pen/sjubp)
##
Loaders
[

](http://codepen.io/lucadem1313/pen/vKWqRV)[

](http://codepen.io/lucadem1313/pen/XKzLER)[

](http://codepen.io/brunjo/pen/xbwVXJ)[

](http://codepen.io/brunjo/pen/ByjRPy)[

](http://codepen.io/brunjo/pen/LEGyrJ)[

](http://codepen.io/brunjo/pen/bNEWjV)[

](http://codepen.io/brunjo/pen/wBKmbm)[

](http://tobiasahlin.com/spinkit/)[

](http://codepen.io/viduthalai1947/pen/JkhDK)
## Dropdown Menu
[

](https://codepen.io/antoniputra/pen/BzyWmb)[

](http://codepen.io/cristina-silva/pen/NNOodj)
##
Mobile menu off canvas
[

](https://codepen.io/fabricionaweb/pen/xOLwxj)
## Burger Menu
[

](https://codepen.io/eduardoboucas/pen/BNyKwO)
## Fancy Menu
[

](http://codepen.io/lbebber/pen/RNgBPP)
##
Modal/Popup
[

](https://codepen.io/peiche/pen/vhqym)[

](https://codepen.io/chrisburnell/pen/scyKF)
##
Mouse tracking
[

](https://codepen.io/Momciloo/pen/GoGRrQ)
##
Parallax scrolling
[

](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)
##
Tabs
[

](https://codepen.io/llgruff/pen/ZGBxOa)[

](https://codepen.io/fusco/pen/Wvzjrm)
##
Todo List[

](http://codepen.io/scryptonite/pen/oLGzdj)
##
Tooltips
##
Treeview
[

](https://codepen.io/rgg/pen/WrKyzj)
## Twitter Heart Animation
[

](http://codepen.io/thebabydino/pen/RRRRZE)
##
Dynamic Image Colorizing
[

](http://codepen.io/noahblon/pen/ZbjmbK)
##
Ripple Effect
[

](http://mladenplavsic.github.io/css-ripple-effect/)
##
Responsive Counter Showing # of Items That Didn't Fit Screen
[

](https://codepen.io/pavlovsk/pen/QqrZzv/right/)
##
Neumorphism Card Design
[

](https://codepen.io/saviomartin/pen/LYNgqKW)
Contributing
Welcome to contribute to this project. Send us a Pull Request now!