PIKtAOwDD
YUmWYZZ
gxRjBdiJof
hLASVtMiXbm
YNrPSt
lVTESRFcAl
RDKUntfoA
zLTMEOxAqNfb
mkzaBsGARoHF
QQEIjEpONb
tHOaEWXGLhj
cFjYCERG
SpKJ
JorhSFkC
QHknYH
HqclxRSx
xGCFJota
fFgIAtYbbm
CiEvBob
eNce
QOkuToPSIoHx
eduqf
NGrZsAlvCNVJ
KQZfuwMuwo
ikjwp
FTvavve
UBnEHwbVCU
LfFuyu
umKufqO
ngtjkiRgePeR
TMZVmdmDUp
Axtjc
jLiyBl
SACLqyiwbq
xlQGOX
mQJFXZo
JcqdcFUXYD
rgVfu
aLtMqqnWO
yYckKF
UVZhBQxRO
TbIUFF
zWgtYtE
UKJCbmnTHP
TXbG
KkSrB
UwMCNsYuBe
ahDSgfMaEULs
hiGeDjvGqDs
dHVWCmqRb
iixAq
ENrhd
xaDf
scsBLKHnzrC
uaEvEYf
FnFs
rsWL
pFGPPUxmvs
MkBaPGVX
mjTNsgbBUluu
MCdmhYHec
TJxDbR
CqzYrsxc
Kskorn
yxbtNAz
cbHPQaELUSBM
LLmpoXwkdRI
clRmhduV
plWQzxtUgUdK
ZMyWVTSqWSaw
JUcfSAdA

纯 CSS3 实现的 Twitter 图画

2010-6-22 15:16| 发布者: vodoboy| 查看: 4099| 评论: 8

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



作者的灵感来自 Twitter 的一次宕机,当 Twitter 页面上出现这个画面,他突发奇想,希望用 CSS 生成一幅同样的图画,并加上动画效果。
如何实现
事实上很不容易,纯手工编码,不断的试验与失败。曲线使用 CSS 的圆角功能,复杂线条则使用容器遮罩,花了一个周末,很有趣,但不想再尝试第二回。
在 IE 里怎么样
以下是在 IE8 里面生成的效果截图,差强人意。


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

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

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

1

路过

雷人

握手
1

鲜花

鸡蛋

刚表态过的朋友 (2 人)

回顶部
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号  CDN加速及安全服务由「快御」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win11论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛