词条信息

admin
admin
超级管理员
最近编辑者 发短消息   

相关词条

热门词条

更多>>
什么是端口?到底是做什么的呢?
端口一般指两种,一种是硬件比如路由器或者交换机的插网线的端口,一种是软件的逻辑的概念,比如http的80端口!...
7种进阶方法让你快速测试端口连通性
Ping是Windows、Linux和Unix系统下的一个检查网络连通性的命令工具,对于大部分互联网用户来说很...
电脑开机,总需要按F1,是什么原因造成的?
一.主板掉电这个说法是行业内的叫法了,一般是主板的CMOS电池没电了导致的。也是最常见的一种提示你按F1的提示...
社保降费对个人有什么影响?
下调城镇职工基本养老保险单位缴费比例是政府给企业发的一个大红包,特别是对于企业来说是一个利好,但是对个人来说有...
车辆“出险”对下年保费的影响,到底有多大?
【出险对交强险的影响】【出险对商业险的影响】车辆“出险”对下年保费的影响,到底有多大?这里有必要先提下车险第三...

精选图集

更多>>
简易百科旧版 >>所属分类 >> CSS    设计素材   

设计欣赏:纯CSS3“绘制”的图形图标

标签: css3

顶[0] 发表评论(0) 编辑词条
纯CSS3“绘制”的图形图标(1)

  尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计。如果你看到本文介绍的这些精美图标,你可能很难相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标,那么微妙的色彩与纹理,真的难以置信。

  奥林匹克标志

  作者: Doug Neiner

  基于纯 CSS,以 em 为单位,可动态调整尺寸,需要浏览器支持 border-radius 属性,目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  jQuery 标志

  作者: Doug Neiner

  这是大家最钟爱的 JavaScript 框架 jQuery 的标志,使用 CSS3 的 border-radius 属性。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  jQuery UI 标志

  作者: Doug Neiner

  这是 jQuery UI 库的标志,同样,基于 CSS3 的 border-radius 属性。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  CCS 标志一宗

  作者: Justin Sepulveda

  全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  Opera 标志

  作者: David DeSandro

  做得非常漂亮,大量使用了 border-radius, gradient 属性,不过在不同浏览器显示不太一致,尤其在 IE 中。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  iOS icons

  作者: Louis Harboe

  非常伟大的作品,使用了 CSS3 的高级功能。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  请点击“下一页”,欣赏更多精彩作品。

2纯CSS3“绘制”的图形图标(2)

  简单 css 图标

  作者: Zander Martineau

  这份作品可以教你如何使用 CSS 实现三角形,如何实现诸如 RSS 图标,心形图,三角形一类的简单图形。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  基于纯 CSS 的超级玛丽 3D 动画图标

  作者: Andreas Jacob

  基于 CSS3 和 CSS 4D 框架 ,动画部分很精彩,但目前只支持 Safari 5。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  纯 CSS 图标一宗

  作者: Andrew Kelly

  使用了 CSS3 的渐变,阴影,圆角等属性,效果很出众。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  CSS3 实现的 Photoshop 标志

  作者: Radu Chelariu

  完全基于 CSS3,没借助任何图形。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  10 个令人赞叹的 CSS 社会媒体网络标志

  作者: Nicolas Gallagher

  全部基于简单的,语义化 HTML 标签,没有任何空的,多余的对象,没有 JavaScript,没有图片。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  一套 CSS 图标

  作者: Lucian Marin

  一套基于 CSS 的图标,非常精致。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  基于纯 CSS3 的 Twitter 图标

  作者: Giacomo Bartoli

  很显示,使用了 @font-face 和少量阴影及圆角。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  加拿大 Go Transit 公司标志

  作者: Collin Henderson

  基于 CSS3 的 border-radius 属性

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  请点击“下一页”,欣赏更多精彩作品。

3纯CSS3“绘制”的图形图标(3)

 

  IE 标志

  作者: Andreas Jacob

  在 Firefox 3.6+ 以及 Safari 5 上显示最佳。使用了圆角,渐变,阴影等属性。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  任天堂游戏图标

  作者: Drew

  使用纯 CSS 实现的一些任天堂公司的游戏图标。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  电影《回到未来》片名

  作者: Lucas Garron

  和原版惊人相似,在 Webkit 引擎的浏览器中显示最佳。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  CSS 雨滴

  作者: Sean Martell

  右边是原始图片,左边是 CSS 生成的效果

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  Bahamas CSS 标志

  作者: ForestMist

  巴哈马群岛标志,右边是原始图,左边是 CSS 效果。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  Reddit 网站的外星人标志

  作者: Matthew James Taylor

  使用 “O O _ ( ) ( ) O O O O / – o O O O O O O O O ? ? ( ) ( )” 几个字母以及文字效果。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  纯 CSS 社会媒体网络标志

  作者: insicdesigns

  又一套 CSS3 社会网络媒体标志。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  CSS3 实现的 iPhone 图片

  作者: Jeff Batterton

  简直疯了。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  Twitter 图片

  作者: Jeff Batterton

  相当精彩的 CSS 图形效果。参见《纯CSS3实现的 Twiiter 图画》

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

  美剧《迷失》片名动画

  作者: Marcos Esperon

  在 Webkit 引擎的浏览器中显示最佳。

设计欣赏:纯CSS3实现的图形图标设计_天极设计在线整理

 

 

 

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇可用CSS3实现的常见网页设计应用
下一篇几个比较好用的CSS清理工具软件

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的百科词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>