看下面的图片，很棒的Photoshop可以正常工作吗？ 不，它们是由CSS3创建的。 是的，它们完全被CSS3“绘制”了 ！ 当我们看到足够多CSS3动画时，我们认为所有这些CSS3都可以作为潜在的Flash杀手do，但我们错了。 开发人员可能不满意动画的乐趣，因此，他们又一次突破了CSS3的界限，挑战了图形编辑器的领域。
这篇文章附带了35张精心制作CSS3图形，其中甚至包括您不会与CSS3相关的东西，例如Apple iPhone ，卡通人物Do啦A梦 ，以及更多惊喜！ 哎呀，其中一些甚至附带详细的教程，教您如何实现它！ 因此，不要错过学习使用CSS3和少量HTML创建图形的绝佳机会，让我们对CSS3淘气吧！
强烈建议您使用Safari的最新版本或Google Chrome的开发人员版本查看这些演示。 不过，大多数演示都支持最新版本的Firefox和Google Chrome 。
Hongkiat独家使用CSS3构建的RSS Feed图标！ 随链接一起提供了一个教程，您实际上可以学会“绘制” RSS Feed图标，甚至不使用单个图像。 用自己的双手创造CSS3奇迹！
是的，我的眼睛也不敢相信，但这是iMac完全与CSS3“组装”在一起的。
苹果键盘
这是使用CSS3构建的Apple Keyboard！ 哎呀，甚至可以按下键盘按钮。
苹果iPhone
哦，还有一件事：iPhoneCSS3。
CSS3真正令人敬畏的地方是它可以用来建造任何东西，包括动植物！
咖啡杯
累的一天？ 我们来点CSS3咖啡，最好搭配Safari / Google Chrome搭配使用。
此Do啦A梦以CSS3兼容性测试而闻名。 在Internet Explorer 8或更低版本中尝试一下，祝您愉快。
现在，您正在看完全用代码构建的猫！ 不幸的是，CSS3至少目前还不能产生声音效果。
蘑菇，Triforce，Poké球，Kirby
“作为书呆子，我做了一些书呆子创作–马里奥蘑菇，Triforce，Pokéball和Kirby。 对于那些使用恐龙浏览器的人，有一个截图，看起来像是它的样子。”
“它包含81个DOM元素，688行纯CSS和一个用于循环音频JavaScript函数。 我CSS没有通过CSSLint测试，对此我感到非常自豪。”
CSS3非常强大，它也可以用于构建Web设计的基本资产，例如这些模式。
邦邦
BonBon是精心打造CSS3按钮，其目标是：性感外观，真正灵活的按钮，并带有尽可能最小的标记。
惊人？ 是。 这些图标由圆角 ， 阴影 ， 渐变 ， rgba ， 伪元素和变换通过某些工具（例如westciv的工具和Border Radius）构建而成。
如果Web开发人员可以使用CSS3构建iPhone和Doraemon，那么就不可能构建社交媒体图标。 他们确实很好地构建了这些图标。
另一组社交媒体图标，显示CSS3创建可用图标的可能性。
奇特
“独特的是仅使用CSS制作的免费图标包。 它是为尽可能少依赖HTTP请求或根本不需要使用任何图像的站点和Web应用程序创建的。”
仅使用CSS和语义HTML的84个简单GUI图标。 仍然将其视为“非生产就绪”图标，但它们看起来非常有前途。
史蒂夫·乔布斯
除了Internet Explorer 8或更低版本之外，Twitter的失败之鲸也不会令您感到惊讶。
雨伞
CSS3使用户界面元素成为可能，而且看起来非常时尚！
Adobe Photoshop徽标
向不使用Photoshop的Photoshop致敬。
Android是由相当简单的形状组成的，但是它说明了CSS3的优点：您可以制作简单的东西，并只用代码而不用Photoshop对其进行任何修改。
使用CSS3呈现的复古Apple徽标，与创建时间一样出色。
几年前，谁曾想到过Atari徽标将使用CSS3重新创建。
使用CSS3可以轻松制作简单的徽标。 这里展示的这些徽标中最好的是提供了供您试用的代码！
由CSS3展示的由用户提供动力的著名展示站点Dribbble的徽标。
Magento的徽标不太难绘制，但结果看起来很专业。
我喜欢CSS3！
完美比例，向创作者提示。
Windows徽标！ 看起来真的很棒，而且很容易创建！
真的很棒！ 它适用于Internet Explorer 8或更低版本以外的主要浏览器。
Google Chrome徽标
我不确定您是否喜欢Google Chrome的新徽标，但是这个CSS3 Google Chrome徽标看起来很棒！
歌剧徽标
现在为您练习：CSS3和实际交易之间有什么区别？
没有CSS3，HTML5不会发光！
除了配色方案外，此CSS3克隆看上去与原始克隆相同。
反射
随着纯CSS3的徽标和图形的兴起，随之而来的讨论极大地辩论了CSS3生成的图形在实际生产环境中的可用性。
通常，CSS3图形是可以的，但是当您需要更改设计或仅调整图形大小时 ，它可能会很烦人 ，这里最大的麻烦是该技术尚未得到某些浏览器（如Internet Explorer）的完全支持。
你怎么看？ 您会在网站中使用CSS3制作的图形吗？ 您是否有针对其当前缺点的解决方案？ 让我们知道您的想法，如果您刚烘焙CSS3图形，请与我们分享！
更多
愿意实际使用CSS3吗？ 您来对地方了！ 以下是为帮助您熟练掌握CSS3而编写的指南和教程。
翻译自: https://www.hongkiat.com/blog/coding-graphics-with-css3/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
