Is there any pre-built sample of iphone like bottom navigation using CSS 3?

Is there any pre-built sample of iphone like bottom navigation using CSS 3? is it possible 开发者_如何转开发to make these icons in CSS3, without images?

You may want to check out Sencha Touch, they provide a full HTML5 version of many common UI components for mobile web site development, including tab bars.

Try my itabbar www.itabbar.com Here a full css tabbar with jquery to change button color on click http://jsfiddle.net/onigetoc/4CgxM/ (View on Chrome or Safari)

I think this is possible to reproduce the basic icon with basic shapes in css For the moment I havec make the most basic look hat http://frommelt.fr/exos/icon.html

Of curse I don't lets go and I will make the other :)

Actually, in ChocolateChip-UI we use SVG images as background image masks and CSS3 background gradients to exactly recreate the iPhone toolbar icons. Webkit background image masks with with background images and background colors. Since CSS3 gradients are rendered by the browser as a canvas background image, they work just fine. The svg images are just black and transparent because they were created to use as masks with background colors.

That said, yes you could reproduce the images with just HTML elements and CSS. It would require a bunch of pieces, using a mix of relative and absolute positioning and would be very, very tedious to get all the pieces positioned properly and get the background gradients to match up perfectly. And then you would have to write some really complicated CSS to handle the hover state. I could do that but would I want to? Hell no! Using the SVG image masks is just so much easier. And because the SVG is just text, it's easy to edit them at any time. Oh yeah, and SVG is vector-based so you can scale them to any size without pixelation.