CSS is simple and its very useful. But you will find it even more powerful, if you go beyond its simple use and challenge yourself to do something extra ordinary. JavaScript developers have been doing it for while by dynamically playing with CSS classes, selectors and properties to produce awesome widgets and controls.
With increased awareness about some crazy features, CSS3 has in store for us; more and more developers are now playing with idea of pushing CSS to do things, normally done with the help of JavaScript. This roundup provides a categorized list of pure CSS UI components that you may find useful in your own quest to push CSS beyond its ordinary use.
Before proceeding further, you should note that most of these components are developed as proof of concepts and may not be suitable for production. However these are great resources to learn and discover unique ways to use CSS.
Accordion
- Accordion Menu Using CSS3
- CSS Only Accordion
- Accordion Effect Using CSS3
- Cross Browser Pure CSS3 Horizontal Accordion
- Cross Browser Pure CSS3 Vertical Accordion
- Accordion Using Only CSS3
- Pure CSS Sideways Accordion
Chart / Graph
Gallery
LightBox
Menu / Navigation
- Free CSS Drop Down Menu Framework
- CSS3 Dropdown Menu
- Horizontally Centered Drop Down Menus with Pure CSS
- Pure CSS Fish Eye Menu
- Elegant Drop Menu with CSS Only
- Bubble Effect with CSS
- Disjointed Rollover Effect to Animates a Pointer Along Horizontal Menu
- Two Level Horizontal Menu
- Sliding Navigation without JavaScript
Tabs
Tool Tip
- Pure CSS Speech Bubbles
- CSS Bubble Tooltips
- CSS Tooltips – Floating HTML Elements
- Create a Fancy Web Form With Field Hints Using Only CSS3
- Pure CSS Tooltip
- Image Free CSS Tooltip Pointers
Miscellaneous
- Pure CSS Animated Progress Bar
- Realistic Looking Button with CSS3
- Buttons with CSS3 and RGBA
- SlickMap CSS
- Pure CSS Social Media Icons
- Sexy CSS Buttons
- Social Media Icons in Pure CSS
Please feel free to suggest any addition, correction or updates in your comments. You may also want to look at:
Great list of resource, I am for sure bookmarking this.
A definite bookmark !! CSS rocks
Great List! Very long with great articles. Bookmarked!
Not to toot my own horn — too much ;) — but I also have tutorial on making pure CSS3 Pie Charts:
http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/
Really useful article. Thanks!
Thanks for the list and including our article. :)
Great list, dude! I can see my tutorial here! Thanks!
@Teylor @Lam
Thanks for sharing your work with community. Also appreciate your support for W3Avenue.
@Saud – very good list, good work
and thank u for share. Best regards!
great compilation… thanks
thanks for this.. good stuff
bookmarking… done.
This is great set of resources! Thanks for sharing.