English | 简体中文
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:
## 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
- Carousel
- Counter of checked check-boxes
- Flip on click
- Floating label on Textfield
- Font-Face (Latin)
- Info on hover/ Popover
- Image Gallery
- Loaders
- Dropdown Menu
- Mobile menu off canvas
- Burger menu
- Fancy menu
- Modal/Popup
- Mouse tracking
- Parallax scrolling
- Tabs
- Todo List
- Tooltips
- Treeview
- Twitter Heart Animation
- Dynamic Image Colorizing
- Ripple Effect
- Responsive Counter Showing # of Items That Didn't Fit Screen
- Neumorphism Card Design
Accordion / Toggle
Carousel
Counter of checked check-boxes
Flip on click
Floating label on Textfield
Font-Face (Latin)
Info on hover/ Popover
Image Gallery
Loaders
Dropdown Menu
Mobile menu off canvas
Burger Menu
Fancy Menu
Modal/Popup
Mouse tracking
Parallax scrolling
Tabs
Todo List
Tooltips
Treeview
Twitter Heart Animation
Dynamic Image Colorizing
Ripple Effect
Responsive Counter Showing # of Items That Didn't Fit Screen
Neumorphism Card Design
Contributing
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.
user-select: none;
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.nuemorphism-card-design.htmltoexamplesfolder.nuemorphism-card-design.giftoimagesfolder.Hope It Helps Savio Martin
Mention of accessibility issues of these demos
Hi there,
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.
Browser compatibility
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
http://codepen.io/ekrof/pen/YqmXdQ
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.
https://codepen.io/marcelesilv/pen/yLjrEzz