I liked this: Web2.0Share信息图推荐:智能手机平台那些事

25 9月

今天和大家推荐一些手机平台(iPhone、Android、Blackberry)相关的信息图,更多信息图可以查看这里

手机发展史

从1970年以来手机发展历程:1973年,Martin Cooper发明了第一台移动电话;1983年,Motorola Dynatac 8000X发售,重量约两英镑,零售价是4000美元;1992年,世界上第一封短信被发出,内容是“圣诞快乐”;1996年,世界上第一台翻盖手机Motorola StarTAC上市

大图地址:http://ikeepu.com/bar/awhp/

移动平台现状比较

Visionmobile 根据“2011 开发者经济调查报告”中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状。这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web。

大图地址:http://ikeepu.com/bar/8wrl/

Battle of the Smartphones:Android Vs. iPhone

大图地址:http://ikeepu.com/bar/9h0y/

Android发展史

大图地址:http://ikeepu.com/bar/8zlv/

黑莓手机的市场全貌

大图地址:http://ikeepu.com/bar/bmpm/

手机各个平台应用大PK

DamnDigital 全球一共有826200个应用,iPhone占有37.5万,android为22.5万。操作系统上android份额36%(应用41%收费),iOS有26%(应用71%收费),黑莓还有23%(应用75%收费)

大图地址 :http://ikeepu.com/bar/abn3/

关于App Store的一些数据

从2008年至2011年5月App Store应用数据,2008年7月500个应用,2009年11月1万个应用,2009年4月达到一亿次应用下载,2009年10月10万个应用,2010年4月20万应用,2010年6月5亿次下载,2011年2月10亿次下载。

大图地址:http://ikeepu.com/bar/5qg4/

往期信息图推荐

相关阅读推荐

# 本站新浪官方微博:http://t.sina.com.cn/web20share

# 本文采用“署名-非商业-保持一致”CC协议进行授权,转载本文请注明本文链接


© watsonxu for Web2.0Share | 订阅 | 热文 | 评论 | 广告 | 联系 | 讨论小组 |

您可能也喜欢:


Web2.0Share信息图推荐:乔布斯和苹果之道


Web2.0Share信息图推荐:电子商务那点事


Web2.0Share周刊:随身Q、着迷网、钥匙网、Weiex等


Web2.0Share周刊:分享一些Mobile相关资讯


Web2.0Share周刊:魔乐手机管家、果合、魔图精灵等

无觅


posted on 天涯海阁-Web2.0Share: http://www.web20share.com/2011/09/web20share-infographics-20110924.html

I liked this: iPhone为什么比Android好

17 9月

曾经在不同场合与很多安卓青探讨过一些或浅或深的知识层面问题,如今想来具备真正独立思考能力与当量知识储备的,也只有一人而己;换言之,绝大部分时候只是对牛弹琴。那么我将从以下七点来说明iPhone 4比Android手机们好在哪里:工业设计,操作系统,屏幕显示,开发环境,生态环境,硬件配置,杂项。

一、工业设计

林徽因当年动身学建筑的原因,按她自己来说是:”建筑是唯一一门将工程与艺术结合至完美的学科。“词句上可能略有偏差。这句话放到现在来看,应该把”唯一“去掉,因为设计学科几乎都有这方面特质。

工业设计本身的效用并不是如绝大部分人所想的,只具备”好看“这一特性。这门学科的水很深,从材料到交互,从人性到科技,却还带着无数的限制(比如材料产能不够或者价格过高,比如要为产品部分特性放弃某些绝妙的思想),可以说拖着汽车跑步也绝对不为过。
苹果在iPhone 4之上的工业设计,精妙绝伦,按乔布斯的说法是”它就和一款老莱卡相机一样美丽“。但它不仅仅于此,它环绕着机身的不锈钢圈,不仅是天线(虽然引发了问 题),也是固定机身的梁,同时也减少了内部占用空间,iPhone 3.5寸手机有1420电池,而i9000 4英寸手机只有1500而且稍厚。它两边的玻璃,不仅与IPS屏幕的光学有着最美丽的匹配,也起着防刮的作用(注意苹果从未说过它防摔)。我觉得一个有正 常审美的人,在看到iPhone 4之后都必须承认它是人类史上最美丽的工业设计之一。它的设计恰到好处,每一个设计都不拖泥带水,与手机功能息息相关。这就是工业设计的作用。它不仅仅是 美观,它还必须是功能。

当然它还有一个特性,那就是营销,也就是工业设计上很臭名昭著的指导原则”有计划的废止制度“。有计划的废止制度,是指”每一两年对产品进行小改变,三到 四年对产品进行一次大改变“;它是一直到现在都适用的指导原则。它最臭名之处在于,诱引人们放弃手头上依旧可用的产品去追逐最新的产品,造成大量的资源浪 费。但是很明显,它骨子里散发的营销气质是苹果非常看重的。从第一代iPod到iPhone的产品进化,苹果把这项原则用到了极致。

二、操作系统

自苹果收购了乔布斯的NeXT之后,花了六年把它打磨成了Mac OS X;又在2005年左右花了两年半时间,基于它制造了iOS。从各种意义上来说,iOS是一个传统技术的操作系统。它有一个基于微内核Mach的 Darwin内核,有一个叫做Cocoa Touch的运行时,用的是Objective-C这个C语言的超集。而Android在Linux内核之上,集成了一个Java虚拟机Dalvik,整 个应用层跑在虚拟机之上,而开发语言用的是Java。

事实上双方的选择都是很有道理的。苹果有Mac OS X十年基础,当然会选择自己最精通的技术,把iOS打造成一个传统系统,也可以无缝链接Mac OS X的开发者资源。而谷歌没有任何操作系统经验,为了要争取最大的开发者资源,他们选择了世界上最大的Java社区。虽然起点相同,但走出的第一步方向就已 经截然相反。

究其根底,只在于Java只有自动内存回收,而Objective-C自动与手动内存回收均可(注意iOS只有手动内存回收)。这小小的区别导致,谷歌只 能做一个Java虚拟机,而苹果可以继续他们在Mac OS X上的经验。而这个行为导致了两者在系统流畅性上的最大区别。Java由于只有自动内存回收,系统会在任意时间停掉所有进程开始回收内存,这个过程是人类 可以感受到的数百毫秒。而iOS由于可以手动管理内存,可以在用户操作的间歇由程序员进行回收,用户不会在频繁使用过程中感受到停顿。在日常使用中这个停 顿其实是可以忍的,但是在游戏过程中这个停顿是不可以忍的,比如想像一下一只愤怒的小鸟在空中停顿了零点几秒再继续飞行。

谷歌事实上意识到了这个问题,于是它在Android 2.3版本中大修了这个问题并将之作为一个特性大书特书。且抛开2.3的普及性不谈,单说这个大修的行为,也并没有修好这个问题。于是谷歌抛出了第二个在 开发上的修补:引入C/C++ NDK。可以说到了这一步, Android整个内核往上的应用层才有了与iOS抗衡的实力,可惜时间已经过去了近四年,iOS积累了十五年,Android刚刚起步。

而在内核之下呢?基于微内核Mach的Darwin 对比 当今服务器主流Linux又如何?当年Linux创始人曾经与某位牛人吵过一场著名的架,正是关于微内核与内核对比,Linus一直到现在都认为微内核只 是纸上谈兵而在现实中解决不了实际问题。在这场吵架之后的岁月,坚持内核的主流系统只剩下Linux一家,而微内核系统已经延展到了基于SVR4的IBM AIX/HP-UX,GNU/Hurd,Mac OS X,Blackberry QNX,Windows(是的,你没有看错)。Time will tell,这句话从来都没有错。Android三方ROM所困扰的驱动问题,正是Linux内核的最大局限,植根于骨子的病是治不好的。

三、屏幕显示

在2010年WWDC上,乔布斯在介绍那块视网膜屏幕的时候说了一句”We think it(IPS)’s quite a blt better than OLED“,他的理由是”提供了更精准的颜色,以及更大的可视角度“。事实上在流明上也远超。

历数当前的主流Android厂商,HTC和摩托罗拉用的只有TFT/SLCD这些非常便宜的屏幕(当然他们用了所谓qHD高分辨率来吸引眼球),三星拥 有自家的Super AMOLED(以及Super AMOLED Plus),LG作为苹果屏幕提供商也有几款高端机型使用了IPS,索尼则是自家的Bravia。以上所有Android屏幕,屏幕质量 (IPS/Super AMOLED Plus)勉强可以并肩的分辨率(800*480 vs 960*640)远远不如,分辨率勉强可以并肩则屏幕质量远远不如。

正如乔布斯在WWDC上所说的:”我们建立了这样一个标准,在未来几年内我不认为有竞争对手可以减少哪怕一步差距“。时间飘过一年,还没有人让他说错。

四、开发环境

在第二点操作系统里,已经略有提及两者开发工具差距。下面打算谈谈App Store对比Android Market。

App Store大概已经超过50万应用了,Android Market大约30万,当然这是建立在谷歌根本无审核而苹果严格审核下的,如果去掉一部分Android里面的色情、壁纸和铃音等垃圾应用相信 Android Market会继续缩水。当然在这么大的数目下,数量已经不是竞争关键,应用质量才是真正的关键。

应用质量如何提升?很俗,钱。开发者有钱,才会有好应用。开源项目很多都是公司或社区付钱给开发者的,而不是绝大部分人想当然都是免费劳动。那么钱从哪里 来?当然是消费者,消费者直接购买应用,或点击之上的广告,或游戏内购买道具/服务。一个消费者肯为应用花多少钱,才是能否赚大钱的关键。

很明显的,iOS用户所花的钱远超Android用户,这事其实有很多原因,我也不想一一点明,不然会被人说优越感之类。当然我也不是信口雌黄,调查到处 都是。这样的差距,事实上已经表现在开发者对两家平台的态度上。iOS已经成为开发者心目当中的首选平台,因为它之上的用户更愿意购买应用,开发者更愿意 用实力来赢取金钱而不是广告。而Android很多相应的应用,要么免费加广告的形式(比如愤怒的小鸟),要么干脆没有(比如到现在都没有的 Instagram)。有人说日常工具实际上需求量并不大,我承认,但谁能保证某一天iOS首发甚至独占的工具就不会进入你的日常工具列表?这样的例子已 经出现很多了,比如红极一时的Instagram,比如实用派的EchoEcho等等。

再转向娱乐应用。保持一个平台长久新鲜感的应用,正是娱乐。在iOS上的娱乐应用,无论是数量还是质量都远胜Android。究其原因,一是用户更愿意花 钱从而开发者更有激情,二是开发更加便利不需要考虑数百机型。事实上这个世界上大部分正经游戏都是用C++开发的,而Objective-C与C++天生 一家的特性吸引了太多游戏开发者(你可以直接用C++给iOS开发游戏),而Android的Java…

无论是开发者的态度,软件的质量以及开发的便利性,iOS都完胜Android。

五、生态环境

所谓生态环境,其实很简单,就是谁能提供更多东西供消费者把玩。iTunes作为全世界可能是第一大的信用卡绑定数字商店(因为亚马逊没有公布过数字),其上的音乐、书籍、电影、电视剧、播客甚至大学教学视频数量都远胜所有竞争对手。
作为竞争对手的惠普、谷歌,根本就没有这样全面的数字商店;而微软、诺基亚,虽然数量较为齐全,却从未获得过多数用户支持(或许是装机量太小,或许是低端用户居多)。

Palm前高管曾经感叹过,智能手机时代得四者得天下:一是生态环境,二是软硬件结合,三是开发者,四是云计算。苹果之所以一直坚持使用iTunes来管 理所有iDevice,生态环境正是其中一个原因。为什么Palm要死皮赖脸在iTunes去掉DRM后用iTunes来同步Palm Pre甚至不惜与苹果打官司?为什么微软在Windows Phone 7和Zune之上步iTunes后尘只允许用Zune软件来同步?

生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!生态环境!Think different。

六、硬件配置

主要是那块SoC芯片配置。在手持设备时代,与PC时代最大的不同就是,PC时代的芯片是由双巨头独占的,他们负责从设计到制造,你只需要购买;而手持设 备时代,或者说后PC时代,只有ARM一家寡头,它只负责设计。你把图纸买回去,进行深加工,然后自行制造或联系代工厂。

这儿就有无限的可能性。毕竟从头设计一个架构是非常非常非常麻烦的事,但在已经成熟的架构上再进行加工是相对容易的事。苹果与大部分Android厂商 (不包括三星)不同之处在于,苹果和三星自行设计,而其它厂商从三方芯片设计厂商购买成品。这些三方芯片设计厂商包括TI,NV,三星等等。而苹果与三星 的不同在于,苹果自己做软件。

是的,苹果是唯一一个既做硬件又做软件的手持设备公司。只有苹果可以在硬件中插入对软件的优化,又可以在软件中用上特制的模块。事情得从苹果一次入股以及两次收购说起。

首先是苹果入股Imagination。Imagination可能大家并不太熟悉,它是一家芯片厂商,出产低功耗显卡。如果说ARM是后PC时代的 Intel/AMD,那么Imagination则是NV/ATI。它出产的PowerVR显卡几乎配置在所有SoC芯片上,iPhone四种机型都使用 了PowerVR显卡。苹果又同时收购了两家小芯片厂商,P.A Semi以及Intrinsity,两家均以低功耗芯片著称。

在第一代iPad之上,苹果启用自家芯片,称为A4。基于ARM,集成PowerVR,看上去和当时的主流手机芯片并没有什么不同。但只要你轻轻往里面看 一看,你就会发现,什么叫做细节决定成败。前面已经说过,iPhone 4内部工业设计高度集成,电池容量相比4英寸手机也不输,其中A4芯片也是一大功臣。它基于45nm(当时代工最高技艺),使用了3D层叠技术,集成了内 存控制芯片,大大减少了占用面积,比上代相比足足少了80%。外观只是一方面,内涵更重要。A4最大的内涵是,它极其省电。待机耗电大约只有竞争对手的 30%,使用耗电更是只有25%-75%。

省电的两大秘密是,收购自P.A Semi的独立唤醒技术,以及Imagination为A4量身定制的VXD375芯片。前者很好理解,也就是不用的东西让它睡着,用着的时候再叫醒。当 然轻描淡定的一句话丝毫冲淡不了此架构的复杂度,基于”如果你不能用一句话解释它,你就根本理解得不够透彻“我也不愿再做更多说明。而后者,则是A4区别 于其它芯片最大的地方。

一般而言,显卡是用来控制渲染而CPU是用来处理运算的。但是显卡功耗太大,根本不可能一直满负荷运转,大部分情况下芯片们只是以一半甚至更低效率运行。 而苹果A4,在只有桌面或视频等2D应用时运用VXD375,而在3D游戏时动用PowerVR显卡。在去年Imagination公司的产品列表上,有 两系列视频芯片,一系列负责解码冠名VXD,另一系列负责编码冠名VXE。但是两者型号都是为0结尾,只有苹果A4的VXD是以5结尾。事实上,它也根本 不对外出售,可以说是Imagination为苹果A4量身定制的一块专攻2D芯片。它的好处,不仅省电,而且流畅。正是前面所说的,硬件可以为软件所定 制,软件可以动用硬件特制模块的好处。

在今年亮相的A5之上,相信也有类似的设计,但是我这里还没有足够资料说明这一点。当然,A5更加没有对手;如果说与A4大体设计相似的芯片还是比较多的话,与A5这样双核ARM双核PowerVR的芯片类似的,几乎绝迹。

七、杂项 用户体验

永远见仁见智,如果再提到用户界面隐喻相信又是新一轮争论。但是有两点很明显,iOS系统流畅度与触控精准度远超所有竞争对手,有视频测试为证。

摄像头:摄影是光的艺术。一味追求像素点但拍出来的照片却因为光线问题满是噪点,这是iPhone大部分对手的通病。关于iPhone所用的镜头优越性在2010 WWDC有完整论述,可以去找来看。

在他看来,苹果不只是一家科技公司,也不是一家人文公司,而是一家注重科技与人文结合的公司。他认为,人们在这样的时代讨论着速度、内存、硬盘而不去关注 人真正需要的东西,不去注重自己的产品能够带给人们什么,是完全错误的。科技与人文结合,植根于苹果的用户体验、苹果的工业设计,植根于苹果的每一根骨 头,植根于苹果追求完美的DNA。

在我的人生里面,见识过无数牛鬼蛇神妖魔鬼怪标榜自己是完美主义。但在他们的人生当中,我却从未发现他们拥有过自信但不固执的心态来不断修正着自己的价值 观,而是一次次中庸的妥协;你从未追求过,从未争取过,从未付出过,又怎么会轻而易举的得到呢?人类史上,曾经有过一次又一次又一次又一次乃至无数次完美 理念的失败,原因也许正如陈升在《拿起来放下》里面所唱的:”这个世界变成这样,没有人没有人是无辜的。“

人生是脚印,不是口水。但愿你能真正走在完美主义的道路上,或者如果不愿走,也请不要诋毁追求完美的人。

源地址:http://ucdchina.com/post/10698

posted on 所有文章 – UCD大社区: http://ucdchina.com/snap/10698

I liked this: 设计创新的十九条秘笈

17 9月

1、不做重复的设计。
2、做重复的设计一定做的不重复。
3、不用已经用过的元素。
4、用用过的元素一定要用的不留痕迹。
5、实在没有思路的时候,去“抄”别人的设计。
6、抄别人的设计一定要抄别人为什么这样设计。
7、找到前人的制高点继承,一定比每次从零开始做更高。
8、做设计不是简单的画图,一定要开拓非设计的知识面,否则就是美工。
9、当大家都在用白色时,我用黑色。
10、当大家都在用黑色时,我把黑色用的不一样。
11、对自己作品一定有信心让自己得意。
12、得意不超过两天,第三天开始讨厌自己的作品。
13、如果还是很得意,那就把作品展示给更多的人看。
14、一定要向最刁难的观众学习,这就是下一次可以创新的点。
15、创新不是想出来的,很多想法来自于平时“多余”的积累。
16、创新不是吹出来的,很多想法来自于平时“无聊”的实践。
17、创新不是造一个五个轮子的汽车。
18、创新是99%的老元素加上1%的新想法。
19、当有新项目来时,回到第一条。
posted on 蓝色理想: http://www.blueidea.com/design/doc/2011/8553.asp

I liked this: CSS3 pointer-events介绍

17 9月

其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。

在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题,拿来当例子来说:

Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。

貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。

嗯,上面只是个简单的例子,来看下具体用法:

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

  • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
  • none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
  • 其它属性值为SVG专用,这里不再多介绍了。

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持,Opera在SVG中支持该属性但是HTML中不支持。好吧,还是有点儿悲催~~


posted on 前端观察: http://www.qianduan.net/css3-pointer-event-description.html

I liked this: 移动手持及平板电脑和网页应用设计UI规范

9 9月

Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too.

Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app.

More tips on mobile web design on the Programming the Mobile Web book.

Do you know any other UI Guideline? Insert the link on the comment area.

源地址:http://www.gaolewen.com/read.php?139

posted on 所有文章 – UCD大社区: http://ucdchina.com/snap/10662

I liked this: 使用html5 postMessage和window.name实现多浏览器跨域

8 9月

http://feedads.g.doubleclick.net/~ah/f/mblfmm6fhtqrklq9d6687fcj2g/300/250?ca=1&fh=280#http%3A%2F%2Fwww.js8.in%2F752.html

跨域是个“很古老”的问题,因为浏览器的同源策略,导致不同域名下不能进行跨域名请求数据,虽然这样设计安全了很多,但是对于大型的网站同时维护多个域名就需要进行跨域操作。例如:微博开放平台的jssdk实现的跨域请求数据,再例如weibo.com和sina.com的同步登录。

之前我也说过不少跨域的方式了,有结合服务器端的,有纯粹javascript实现的跨域,例如:《利用跨域资源共享(CORS)实现ajax跨域调用》、《用document.domain+iframe实现Ajax跨子域》、《通过JSONP实现完美跨域》。在我的上一篇文章《javascript入门到高级PPT》中也提到了跨域。
当然也有不少关于跨域的文章,例如口碑UED的文章《跨域资源共享的10种方式》等等。大家可以去阅读一下。

今天我说的html5 postMessage和window.name也不是一种新的跨域方式,因为有不少人写文章写了,而实际应用的我不知道有哪些人?不过新浪微博的新旧两个jssdk都是采用这种方式,包括之前的人人网的xd.html,当然现在的人人和facebook都是通过flash实现的跨域,这不是今天说的内容。

html5 postMessage实现跨域

postMessage是html5的一个新功能,可以实现不同域名之间的通信,通过给postMessage方式发送数据,监听则通过在父子窗口添加onmessage事件进行。
缺点也就很明显了,只有支持html5的浏览器才支持这种跨域方式,像IE6、7当然就拒之门外了!

window.name实现跨域

window.name实现跨域也是一个比较老的问题,之前kejun写过一个demo,可是给的却是同域名的通信。
其实kejun的实例中就是实现跨域的,不过他采用了同一个域名,而且过程比较崎岖:

  1. 建立iframe,指定src为被跨域的页面
  2. 被跨域文件修改window.name,将数据传给window.name
  3. 将iframe.src修改为本域代理文件,然后就可以取到contentWindow.name
  4. 进行处理数据,清除iframe

充分的运用了window.name因为页面的url改变而name不改变的特性。
但是如果我们是自己用,还是可以的,而如果我们放出去要别人使用我们写的东西,那样学习成本太大。

多浏览器双向跨域

为了解决上面的问题,我们使用的方法就是如果支持postMessage的浏览器就使用postMessage,如果不支持的就采用window.name的方式,幸运的是在IE6、7中支持跨域设置window.name,而我们就可以简单的通过window.name来跨域。然后建立计时器来监听window.name是否发生了变化,如果变化则接收并分析window.name,然后做请求。

废话不多说了~直接来个跨域的demo。

多浏览器双向跨域demo

收藏本文到:新浪微博 | QQ书签 | 人人网 | 豆瓣 | 开心网 | 腾讯微博 | Google书签 | 百度搜藏
声明:文章未声明为原创文章,本文链接 http://www.js8.in/752.html. 转载请注明转自 JS8.IN ™

相关文章


© 断桥残雪 for 断桥残雪部落格, 2011. |
No comment |在微博关注我:@清-三水清

收藏到:
人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博

Post tags: , ,

posted on 断桥残雪部落格: http://www.js8.in/752.html

I liked this: 纯CSS3透明水晶盒

8 9月

相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图:

纯CSS3透明水晶盒

  1. 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个;
  2. 投影镜像,让盒子的立体感更强烈;
  3. 边角线的处理,让盒子面与面之间过渡和谐。

你可以点击这里下载 源代码(只是写了moz下的效果,webkit的就没写了)

盒子的HTML结构很简单,如下:

1
2
3
4
5
6
7
8
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

一个大盒子包住“前、后、左、右、上、下”6个面,因为定位产生层高的关系,所以它的顺序其实是“后、下、左、前、上、右”,下面的div就会自然的叠在上面,就可以不写z-index了。

一、框架定位

初始化盒子面,顶好宽高、定位、背景色等属性,然后把变换原点设定在右上角。

盒子面一个个做,先从简单的入手,前后左右难度系数是一样的,一个斜切SKEW效果就可以实现,然后就是再分开定位:“前、后面”用 skew(0deg,20deg); Y轴正向斜切,“左、右面”用skew(0deg,-20deg); Y轴负向斜切,然后再定位对齐,基本的框就出来 了。

然后就是鸡肋“上、下面”,它需要旋转后斜切才能完成,所以难度系数也就上升了,这里我说 “旋转后斜切”,而不是 “斜切后旋转”,是有区别的,我的写法如下:

-moz-transform:rotate(-40deg) skew(30deg,20deg);

如果这样写:

-moz-transform:skew(30deg,20deg) rotate(-40deg);

那跟预期的效果不一样,确定了的斜切效果会因为后面的旋转而变形。

不知道你有没有亲手做过那个盒子,我在做的时候发现,为什么它顶部的“盒子盖”比侧面的“盒子壁”多嵌套了一层DIV,用来分离transform变换效果,我尝试着只用一个DIV去实现,结果证明,只要先写rotate再skew就可以保持skew的斜切效果,从而html结构跟css代码也就简洁了很多。

二、边框线

如果你看了代码,没有头晕的话,会不会有这么一个疑惑,为什么不用border来写边框线?

如果用border来写的话,border的宽度会跟width重叠,导致盒子占据的空间为200+1+1=202px,很恶心的数字,而且border也不贴着边界,如图:

纯CSS3透明水晶盒

所以用这样一种做法来实现边框效果:box-shadow/text-shadow ;

一般我们是用border来给元素描边,前几天逛论坛的时候,看到这样一种做法:给文字描边

一般思维会想到text-shadow这个属性,但是它是投影,跟描边还是有区别的,text-shadow写法如下:

text-shadow:2px 0px 0px #f00

投影效果如图:

纯CSS3透明水晶盒

具体的投影资料可以参考我这篇文章:CSS3阴影

上面是在没有羽化的情况下向右偏移,然而text-shadow可以多重投影,那么如果向上下左右四个方向同时投影,会怎么样呢?

text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;

投影效果如图:

纯CSS3透明水晶盒

就变成适应文字形状的描边效果了,当初因为border不能满足文字的描边需求,才想出这样的法子来实现描边,那现在反推,既然border不能用来描边了,那就用box-shadow投影描边的方法来实现边框。

做出来的效果如下:

纯CSS3透明水晶盒

我给底部写了个投影:

-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);

少许的向前向右偏移,基本的造型效果就已经出来了,但是这样还不行,盒子的透明是透明了,但是感觉朦朦胧胧的,应该加强透明的处理,要不然体现不出通透性(可以跟第一个图对比下)。

三、通透性

每个面受光不同,所以透明度也应该有所区别,我把上,前,右对着浏览者的透明度调低于后面,然后拉出半透明到透明的渐变叠加到基本的盒子颜色上,产生层次,我都是很淡的过渡色叠加,渐变写法如下:

background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));

由左上到右下拉斜线渐变,从0% 0.3到40% 0.2,70% 0.2到100% 0.1;颜色很淡,如果把系数调大调深的话,渐变色就会很明显,由于里面各个面的渐变各不同,就不一一解释,相信看了源文件就会明白的了,我也是跟着自己感觉拉的渐变,没有很专业的光线投射研究,如果有错的地方你看出来了还望指出。

当调整出各个面的颜色之后,发现“前上右”面与面之间有边线分割,看起来很整齐,但是后面我原本没有画边线,结果‘左’跟‘后’有点混,所以还是12条边线一一画出,妥当些,前面的边线透明度为0.6,侧面的0.4,后面的0.2,突出层次。

四、投影

原本想用reflect来实现投影的,但是效果不理想,投影会夹杂着原图层的背景色,做不出来半透明到透明的效果来,而且reflect是webkit独 有的,firefox没有,另想它法,然而不可能为了投影效果添加新标签,得不偿失,在抛弃IE的情况下自然而然的会想到伪类,上面边框渐变 已经用了after,所以这里的投影我用before来做,同时,伪类做投影还有个好处:伪类层是相对于原图层的,所以修改原图层位置变形状态的时候,伪类层也会相对的修改。定位在对应的面正下方,向着用户的只有前跟右,所以就做了两个投影,如图:

纯CSS3透明水晶盒

普通状态盒子是闭合的,如“前”面所示,伪类层也跟着原图层一样进行了斜切变换,然后我设置了鼠标滑过就“打开”的效果,仅仅是这样一行代码:

.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}

让不用去修改伪类投影层,它自动的就适应了原图层,恢复了变换状态。

还有一个点,就是投影是由上至下呈半透明至透明的渐变,对于背景色这个很容易就可以实现,但是边框呢?

我还没处理边框的状态是这样的:

纯CSS3透明水晶盒

下面的投影是“平”,所以边框线的渐变投影务必做出来,那怎么才能实现边框的纵向渐变,网上有很多关于渐变边框的做法,不过都是横向的利用多重边框的特性来制作,纵向的没有,我尝试用border来写,给border-color写个渐变,结果根本读不出来,单单调节border的透明度也只是做到单色透明,不能渐变透明,观察之后,想出了个“烂点子”,我上面说了,投影是由上至下呈半透明至透明的渐变,那么把两个不透明的东西叠加在一起会怎么样?

比如一个透明度为0.3的层叠在另外一个透明度为0.3的层上面,那就会在交界的地方产生一个透明度为0.6的区域,如图:

纯CSS3透明水晶盒

说到这样你应该懂了吧,我写了这么一句修改面的宽度:

.under .box_before:before{ width:201px;}

让两个面半透明面重叠,这样中间重叠区域就会变深,做出了“伪边框”的效果,至于到透明部分,0 + 0 = 0,所以透明的区域依然透明,从而实现了边框纵向渐变的效果。

五、内容

我原本只是想做个盒子,既然做出来了,当然要跟实际项目联系一下,如果允许的话我也想运用到真正的项目上去,将盒子作为载体模块,在上面发布文章,甚至我想把他弄成可以旋转的做图片墙。

挂上文字后效果如下:

纯CSS3透明水晶盒

html代码如下:

<div class="inBox">
<div class="conBox">
<h3>中秋节要来啦</h3>
<p>中秋节要来啦,龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>

之所以要在inBox里面套一个conBox,conBox用来设定内边距padding,这样做是因为inBox设定了width,如果width跟padding混在一起叠加,会使容器的宽度变形,所以一般分开为妙;至于h3写个title,是因为我在写gotrip的时候,h1,h2,h3标题没有统一分级,使用混乱,而css是这样写的,比如:.inBox h1{ };

当时写了一批之后有同事提出需要将h1改成h3,如果我一开始就这样写.inBox .title{ },那他说修改的时候我也就只需要修改html标签,我不用动css的,吃一堑长一智,这里写下来跟大家分享。当然有时候也不必太过强求,毕竟 起类名是一件很伤脑细胞的事 哈。

个人博客原文地址:纯CSS3透明水晶盒


posted on 前端观察: http://www.qianduan.net/transparent-crystal-with-pure-css3-box.html