You Don't Need JavaScript

CSS is powerful, you can do a lot of things without JS.

README

English | 简体中文

You Don't Need JavaScript Join the community on Spectrum


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:


  1. ```markdown
  2. ## Subject

  3. [<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
  4. [<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
  5. [<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

  6. ***
  7. &nbsp;
  8. ```

 

Quick links

1. Tabs


## 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!