css3图形_编码功夫:35个纯粹使用CSS3构建的图形

看下面的图片,很棒的Photoshop可以正常工作吗? 不,它们是由CSS3创建的。 是的,它们完全被CSS3“绘制”了 ! 当我们看到足够多CSS3动画时,我们认为所有这些CSS3都可以作为潜在的Flash杀手do,但我们错了。 开发人员可能不满意动画的乐趣,因此,他们又一次突破了CSS3的界限,挑战了图形编辑器的领域。

这篇文章附带了35张精心制作CSS3图形,其中甚至包括您不会与CSS3相关的东西,例如Apple iPhone ,卡通人物Do啦A梦 ,以及更多惊喜! 哎呀,其中一些甚至附带详细的教程,教您如何实现它! 因此,不要错过学习使用CSS3和少量HTML创建图形的绝佳机会,让我们对CSS3淘气吧!

强烈建议您使用Safari的最新版本或Google Chrome的开发人员版本查看这些演示。 不过,大多数演示都支持最新版本的FirefoxGoogle Chrome

Hongkiat独家使用CSS3构建的RSS Feed图标! 随链接一起提供了一个教程,您实际上可以学会“绘制” RSS Feed图标,甚至不使用单个图像。 用自己的双手创造CSS3奇迹!

rss feed图标

rss feed图标

是的,我的眼睛也不敢相信,但这是iMac完全与CSS3“组装”在一起的。

苹果imac

苹果imac

苹果键盘

这是使用CSS3构建的Apple Keyboard! 哎呀,甚至可以按下键盘按钮。

苹果键盘

苹果键盘

苹果iPhone

哦,还有一件事:iPhoneCSS3。

苹果iphone

苹果iphone

CSS3真正令人敬畏的地方是它可以用来建造任何东西,包括动植物!

樱花盛开

樱花盛开

咖啡杯

累的一天? 我们来点CSS3咖啡,最好搭配Safari / Google Chrome搭配使用。

咖啡杯

咖啡杯

此Do啦A梦以CSS3兼容性测试而闻名。 在Internet Explorer 8或更低版本中尝试一下,祝您愉快。

ra啦A梦

ra啦A梦

现在,您正在看完全用代码构建的猫! 不幸的是,CSS3至少目前还不能产生声音效果。

我的世界

我的世界

蘑菇,Triforce,Poké球,Kirby

“作为书呆子,我做了一些书呆子创作–马里奥蘑菇,Triforce,Pokéball和Kirby。 对于那些使用恐龙浏览器的人,有一个截图,看起来像是它的样子。”

蘑菇,三叉戟,pokeball,柯比

蘑菇,三叉戟,pokeball,柯比

“它包含81个DOM元素,688行纯CSS和一个用于循环音频JavaScript函数。 我CSS没有通过CSSLint测试,对此我感到非常自豪。”

喵喵猫

喵喵猫

CSS3非常强大,它也可以用于构建Web设计的基本资产,例如这些模式。

模式

模式

邦邦

BonBon是精心打造CSS3按钮,其目标是:性感外观,真正灵活的按钮,并带有尽可能最小的标记。

糖果按钮

糖果按钮

惊人? 是。 这些图标由圆角阴影渐变rgba伪元素变换通过某些工具(例如westciv的工具和Border Radius)构建而成。

ios图标

ios图标

如果Web开发人员可以使用CSS3构建iPhone和Doraemon,那么就不可能构建社交媒体图标。 他们确实很好地构建了这些图标。

社交媒体图标

社交媒体图标

另一组社交媒体图标,显示CSS3创建可用图标的可能性。

社交媒体图标

社交媒体图标

奇特

“独特的是仅使用CSS制作的免费图标包。 它是为尽可能少依赖HTTP请求或根本不需要使用任何图像的站点和Web应用程序创建的。”

奇特

奇特

仅使用CSS和语义HTML的84个简单GUI图标。 仍然将其视为“非生产就绪”图标,但它们看起来非常有前途。

gui-icons

gui-icons

史蒂夫·乔布斯

史蒂夫·乔布斯

史蒂夫·乔布斯

除了Internet Explorer 8或更低版本之外,Twitter的失败之鲸也不会令您感到惊讶。

fail鲸失败

fail鲸失败

雨伞

CSS3使用户界面元素成为可能,而且看起来非常时尚!

雨伞

雨伞

Adobe Photoshop徽标

向不使用Photoshop的Photoshop致敬。

Adobe Photoshop徽标

Adobe Photoshop徽标

Android是由相当简单的形状组成的,但是它说明了CSS3的优点:您可以制作简单的东西,并只用代码而不用Photoshop对其进行任何修改。

android徽标

android徽标

使用CSS3呈现的复古Apple徽标,与创建时间一样出色。

苹果徽标

苹果徽标

几年前,谁曾想到过Atari徽标将使用CSS3重新创建。

雅达利徽标

雅达利徽标

使用CSS3可以轻松制作简单的徽标。 这里展示的这些徽标中最好的是提供了供您试用的代码!

bp徽标

bp徽标

由CSS3展示的由用户提供动力的著名展示站点Dribbble的徽标。

盘带徽标

盘带徽标

Magento的徽标不太难绘制,但结果看起来很专业。

magento徽标

magento徽标

我喜欢CSS3!

麦当劳徽标

麦当劳徽标

完美比例,向创作者提示。

bird鸟

bird鸟

Windows徽标! 看起来真的很棒,而且很容易创建!

Windows徽标

Windows徽标

真的很棒! 它适用于Internet Explorer 8或更低版本以外的主要浏览器。

互联网浏览器徽标

互联网浏览器徽标

Google Chrome徽标

我不确定您是否喜欢Google Chrome的新徽标,但是这个CSS3 Google Chrome徽标看起来很棒!

谷歌浏览器徽标

谷歌浏览器徽标

歌剧徽标

现在为您练习:CSS3和实际交易之间有什么区别?

歌剧徽标

歌剧徽标

没有CSS3,HTML5不会发光!

html5徽标

html5徽标

除了配色方案外,此CSS3克隆看上去与原始克隆相同。

大众徽标

大众徽标

反射

随着纯CSS3的徽标和图形的兴起,随之而来的讨论极大地辩论了CSS3生成的图形在实际生产环境中的可用性。

通常,CSS3图形是可以的,但是当您需要更改设计或仅调整图形大小时 ,它可能会很烦人 ,这里最大的麻烦是该技术尚未得到某些浏览器(如Internet Explorer)的完全支持。

你怎么看? 您会在网站中使用CSS3制作的图形吗? 您是否有针对其当前缺点的解决方案? 让我们知道您的想法,如果您刚烘焙CSS3图形,请与我们分享!

更多

愿意实际使用CSS3吗? 您来对地方了! 以下是为帮助您熟练掌握CSS3而编写的指南和教程。


翻译自: https://www.hongkiat.com/blog/coding-graphics-with-css3/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值