umbrUI - CSS3 range slider, checkbox + radio button

umbrUI

Pictos enabled CSS3 UI elements

There was a request, so I tried. The outcome: No JavaScript, no images and just minimal markup - but a ton of messy CSS3. And only Safari will render it properly. Chrome is close, but the 3D perspective doesn't work. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. No Safari? You can see a screenshot of the range slider, checkbox and radio button.

If you're curious about the name. Umbra means shadow in latin. Read more details.

Credits: Made by simurai. The Rocker switches are based on Mike Bernardo's original design.

PS: For the icons I'm using the Pictos Font.


			<span class="slider"><input type="range" min="0" max="100" /></span>
			
			

			
			<input type="checkbox" data-icon1="P" data-icon2="v" />
			
			

			
			<input type="radio" name="player" data-icon="4" />

Ads by Yoggrt