有没有像使用 CSS 3 的底部导航这样的 iphone 预构建示例？
有没有像使用 CSS 3 的底部导航这样的 iphone 预构建示例？是否可以在 CSS3 中制作这些没有图像的图标？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可能想查看 Sencha Touch，他们提供了许多常见的完整 HTML5 版本用于移动网站开发的 UI 组件，包括选项卡栏。
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.
试试我的 itabbar www.itabbar.com
这里有一个完整的 css 标签栏，带有 jquery，可以在单击时更改按钮颜色
http://jsfiddle.net/onigetoc/4CgxM/（在 Chrome 或 Safari 上查看）
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)
我认为这可以用CSS中的基本形状重现基本图标
目前我已经制作了最基本的帽子 http://frommelt.fr/exos/icon.html< /a>
当然，我不会放手，我会做另一个:)
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 :)
实际上，在 ChocolateChip-UI 中，我们使用 SVG 图像作为背景图像蒙版和 CSS3 背景渐变来精确地重新创建 iPhone 工具栏图标。 Webkit 背景图像蒙版带有背景图像和背景颜色。由于 CSS3 渐变由浏览器渲染为画布背景图像，因此它们工作得很好。 svg 图像只是黑色和透明的，因为它们被创建为用作具有背景颜色的蒙版。
也就是说，是的，您可以仅使用 HTML 元素和 CSS 来重现图像。这将需要一堆碎片，使用相对和绝对定位的混合，并且将所有碎片正确定位并使背景渐变完美匹配将非常非常乏味。然后你必须编写一些非常复杂的 CSS 来处理悬停状态。我可以这么做，但我愿意吗？天哪，不！使用 SVG 图像蒙版要容易得多。而且由于 SVG 只是文本，因此可以随时轻松编辑它们。哦，是的，SVG 是基于矢量的，因此您可以将它们缩放到任何大小，而无需像素化。
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.