纯 CSS3 实现的 Twitter 图画

上过 Twitter 的人都知道下面的这幅图片,这是 Twitter 的出错画面。一位叫 Steve Dennis 的新西兰 Web 前端设计师,使用纯 CSS 生成了这幅画面,甚至,假如你使用基于 Webkit 的浏览器(Safari 或 Chrome),画面还可以动,不过,对 IE 浏览器,生成的效果还差强人意。

作者的灵感来自 Twitter 的一次宕机,当 Twitter 页面上出现这个画面,他突发奇想,希望用 CSS 生成一幅同样的图画,并加上动画效果。

如何实现

事实上很不容易,纯手工编码,不断的试验与失败。曲线使用 CSS 的圆角功能,复杂线条则使用容器遮罩,花了一个周末,很有趣,但不想再尝试第二回。

在 IE 里怎么样

以下是在 IE8 里面生成的效果截图,差强人意。

IE8's whale fails.

反馈

作者的博客中,获得了百余条反馈,有人提到在 iPhone 中显示有些问题,但在 Android 中显示很完美。但无一例外都对这一 CSS 作品表现出由衷的敬意,也有人提到用 SVG 实现更容易,不过,这一工作的意义在于对 CSS 的能力进行一次残酷测试,看来 CSS 挺过来了,虽然过程有些痛苦。

本文国际来源:subcide.com Pure CSS Twitter Fail Whale (原文作者:Steve Dennis)

中文编译来源:锐商企业CMS 网站内容管理系统 官方网站





评论
Ed Hardy Jeans|2010/7/14 11:08:20
哇 SO COOL
Gucci Bags
Ed Hardy Jeans

不过,对 IE 浏览器,生成的效果还差强人意。
Authentic Louis Vuitton Handbags
 
Cheap GHD Straighteners On Sale|2010/7/14 14:35:10
It's very good!!!!
非常出色的杂志,里面提供的都是世界顶级设计师的专访,灵感以及文章还有更多内容Cheap GHD Straighteners On Sale
 
diew|2010/8/24 4:34:49
难道能够正确使用汉语“差强人意”的人比懂CSS3的人还少?
 
zsy|2010/9/16 21:23:06 
css有什么强吗?还能用这画图? 为什么用ie7显示那么难看?
 
发表评论


用户


评论(不超过1000字)


 5 x 5 = ? 请将左边的算术题的结果填写到左边的输入框  


  发送给朋友| 打印友好
7 x 12 小时服务热线
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp