English | 简体中文
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.
## 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) ***
- Accordion / Toggle
- Counter of checked check-boxes
- Flip on click
- Floating label on Textfield
- Font-Face (Latin)
- Info on hover/ Popover
- Image Gallery
- Dropdown Menu
- Mobile menu off canvas
- Burger menu
- Fancy menu
- Mouse tracking
- Parallax scrolling
- Todo List
- Twitter Heart Animation
- Dynamic Image Colorizing
- Ripple Effect
- Responsive Counter Showing # of Items That Didn't Fit Screen
- Neumorphism Card Design
Accordion / Toggle
Counter of checked check-boxes
Flip on click
Floating label on Textfield
Info on hover/ Popover
Mobile menu off canvas
Twitter Heart Animation
Dynamic Image Colorizing
Responsive Counter Showing # of Items That Didn't Fit Screen
Neumorphism Card Design
Welcome to contribute to this project. Send us a Pull Request now!
HTML files for demos
The demos should be accessible without JS, as mentioned in #29. I didn't port all the examples because there are assets used in the demos, and I'm not sure if there is a license for them.
I think add in the css code:
will be better, because when I quickly click on these stuff will not appear like when the double click on the selected character style. My English is not good enough, hope you can understand what I mean.:joy:
Added Nuemorphism cards to the list
Hi Bro, I have developed Nuemorphism card Design and added it.
readme.mdwith my project at the last.
Hope It Helps Savio Martin
Mention of accessibility issues of these demos
these demos are really interesting from a CSS Proof of Concept or technical point of view, but are a real nonsense from accessibility point of view.
Please mention it before it comes to production and create problems for people who need accessible solutions.
Kind regards, Nicolas
Add compatibility information.
This repo is awesome, this could be replacing some basic js library (accordion, tab). But, please add browsers compatibility information. e.g Flex isn't supported yet in many old browser like IE8.
If you add compatibility info, frontend developers could add fallback (polyfill) for old browsers.
It would be awesome if this page had a browser-compatibility table that not just shows that these things work in css but also that they work cross/browser/platform.
Another awesome demo
It has at least two additional examples not covered by existing demos:
add my darkmode
Description: It's a switch that works in a fun way, aiming to reduce light exposure while reading and help with eye strain.
-Please add this contribution pull-requests to Hacktoberfest2022.