作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技,

实际上CSS3发展到今天已经强大到超乎你的想象,

当然对于低端浏览器使用者来说,还是以前那样——囧

有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点

 

以下内容转载自【http://design.yesky.com/show/466/11497966_3.shtml】

设计欣赏:纯CSS3「绘制」的图形图标

IE 标志

  作者: Andreas Jacob

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  任天堂游戏图标

  作者: Drew

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  电影《回到未来》片名

  作者: Lucas Garron

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  CSS 雨滴

  作者: Sean Martell

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  Bahamas CSS 标志

  作者: ForestMist

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  Reddit 网站的外星人标志

  作者: Matthew James Taylor

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  纯 CSS 社会媒体网络标志

  作者: insicdesigns

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  CSS3 实现的 iPhone 图片

  作者: Jeff Batterton

  简直疯了。

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  Twitter 图片

  作者: Jeff Batterton

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  美剧《迷失》片名动画

  作者: Marcos Esperon

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  奥林匹克标志

  作者: Doug Neiner

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  jQuery 标志

  作者: Doug Neiner

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  jQuery UI 标志

  作者: Doug Neiner

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  CCS 标志一宗

  作者: Justin Sepulveda

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  Opera 标志

  作者: David DeSandro

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  iOS icons

  作者: Louis Harboe

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

作者: Zander Martineau

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

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

  作者: Andreas Jacob

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  纯 CSS 图标一宗

  作者: Andrew Kelly

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  CSS3 实现的 Photoshop 标志

  作者: Radu Chelariu

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

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

  作者: Nicolas Gallagher

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  一套 CSS 图标

  作者: Lucian Marin

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  基于纯 CSS3 的 Twitter 图标

  作者: Giacomo Bartoli

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

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

  加拿大 Go Transit 公司标志

  作者: Collin Henderson

  基于 CSS3 的 border-radius 属性

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

以上文章转载自【http://design.yesky.com/show/466/11497966_3.shtml】

 

当然作为一个前端开发工程师,这种变态的作图方式在实际项目中并没有太多的实际作用,

1、PC项目中,利用css spirte技术处理的图片对宽带普及的今天来说,其实不算什么,有时候话大力气的CSS3制作图像还不如平一个图标来的高效,而且CSS3对IE9支持只有不到80%,IE8/IE7/6支持基本为0

2、手机项目中,虽然流量显得那么的珍贵,但是手机的CPU性能还不够强大,尤其是五花八门的安卓手机,即便是CPU跑分性能够强还有CSS3渲染性能不够的情况

因此这些图片在当前网络时代里还是只能起到小小的「炫富」作用——囧

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?,布布扣,bubuko.com

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

上一篇:Asp.Net 文件操作基类


下一篇:ExtJS表格——行号、复选框、选择模型