CSS3 Sliders v0.7
I took some time to play around with making some iOS style preference sliders. I wanted to use as much pure CSS as possible, as sort of a "gut check" or skill inventory.
The only image used in these examples is a small one that gives the vintage sliders a brushed aluminum appearance. Please view source and do with this code as you will. It'd be awesome if you sent a link back here if you do, though.
Please ignore the indicators under the second two sets of sliders. They are rife with non-breaking spaces. I know and I'm not proud.
Listing 1: iOS Style Sliders
- Class warfare
- Brain eating cyborgs
- Oven full of delicious chicken
- World peace
Listing 1a: Better iOS Style Sliders
- Class warfare
- Brain eating cyborgs
- Oven full of delicious chicken
- World peace
Listing 2: Vintage Sliders
- Unadvisable tattoos On Off
- Racist tea parties On Off
- Email notifications of meetings On Off
- Laugh tracks On Off
Listing 3: Three-state Sliders
"Small, medium, large", "good, better, best" or "never, sometimes, always"
- Unadvisable tattoos S M L
- Racist tea parties S M L
- Email notifications of meetings S M L
- Laugh tracks S M L