本文主要整理自Tim的这篇文章。我们来看看到底会不会浪费资源，并寻找下最优的方案。

直接看结果吧~~

测试一：img标签

运行测试

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下：

1
2
3

<div id="test1">
	<img src="images/test1.png" alt="" />
</div>

1
2
3

@media all and (max-width: 600px) {
	#test1 { display:none; }
}

测试结果

如果有一种应该100%避免的隐藏图片的方法，那就是display:none。它基本上是没有用的。貌似Opera Mobile和Opera mini不会下载图片，而其它浏览器都会下载。Opera可以比较好的控制资源的下载，对于用户看不到的内容，它不会预先下载。

结论

很简单：不要这样用。

测试二：背景图片display:none

运行测试

在本例中，div被设置了background-image。如果屏幕宽度小于600px，div就被设置为display:none。HTML和CSS代码如下：

1

<div id="test2"></div>

1
2
3
4
5
6
7
8

#test2 {
	background-image:url('images/test2.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test2 {display:none;}
}

测试结果

结果和测试一一样：除了Opera mini和Opera Mobile和Firefox，所有浏览器都会下载图片。

结论

同样：不要这样做。不过，像后面其它的测试，有其它的方法可以隐藏背景图片同时避免多余请求。

测试三：背景图片的父级元素被设置为display:none

运行测试

本测试中，对一个div标签设置背景图片，然后对其父元素(也是个div)在浏览器宽度小于600px时设置display:none。HTML和CSS代码如下：

1
2
3

<div id="test3">
	<div></div>
</div>

1
2
3
4
5
6
7
8
9
10

#test3 div {
	background-image:url('images/test3.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test3 {
		display:none;
	}
}

测试结果

表面上，这个测试貌似和测试二没太明显的区别，但是结论是这个方法是比较靠谱的。。。

结论

这个方法不错。除了不太成熟的Fennec，其它浏览器都不请求不必要显示的图片。

测试四：背景图片层叠

运行测试

本测试中，一个div被设置了背景图片。如果浏览器宽度小于600px，该div会被给到另一个背景图片。该测试用来检测是否两个图片都会被请求，还是只请求需要的。HTML和CSS代码如下：

1

<div id="test4"></div>

1
2
3
4
5
6
7
8
9
10

#test4 {
	background-image:url('images/test4-desktop.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test4 {
		background-image:url('images/test4-mobile.png');
	}
}

测试结果

比设置display:none好一些，这种方法的结果有点儿乱：

结论

我会避免使用这种方法。尽管环境在改善，但是在Android市场中占主导地位的Android 2.x版本依然会像Fennec和Kindle一样同时下载两个图片。三者中，尤其因为Android(的碎片化)，我会推荐寻找别的方案。

测试五：大背景图片被设置min-width

运行测试

本测试中，一个div元素在浏览器宽度大于601px时被设置一个背景图片，然后在浏览器宽度小于600px时被设置为另一个背景图片。HTML和CSS代码如下：

1

<div id="test5"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@media all and (min-width: 601px) {
	#test5 {
		background-image:url('images/test5-desktop.png');
		width:200px;
		height:75px;
	}
}
@media all and (max-width: 600px) {
	#test5 {
		background-image:url('images/test5-mobile.png');
		width:200px;
		height:75px;
	}
}

测试结果

这种方案好一点儿：

结论

这次更多的浏览器一起玩了。但是，Fennec一如既往得不能自已。Android 2.x比较怪异。它会同时请求两个图片——但只有在屏幕宽度大于600px匹配到min-width时才这样。这种行为貌似在Android 3.0版本中被改进了。这是件诡异的事情，我很好奇它为什么会这样。 其实，有个好消息。Jason Grigsby 说他的对本例的测试结果和我的不太一样。所以我又在一些Android 2.x机器上跑了一下这个测试。结论是，我最初的测试结果不太正确，Android 2.x表现很好，我最初测试的那个平台有问题。这不仅仅对于开发者来说是个好消息，对我本人来说更是恢复了对人类的信心。。。。。。。

但是这依然不够，你将需要对IE8以下浏览器提供替代方案，那些版本的浏览器不支持media query，所以没有图片会被显示。当然，这个问题可以用条件注释来简单的兼容一下。

测试六：背景图片display:none(max-device-width)

运行测试

本测试和测试二类似，但是使用了max-device-width来替代max-width。HTML和CSS代码如下：

1

<div id="test6"></div>

1
2
3
4
5
6
7
8
9
10

#test6 {
	background-image:url('images/test6.png');
	width:200px;
	height:75px;
}
@media all and (max-device-width: 600px) {
	#test6 {
		display:none;
	}
}

结论

好吧，不用浪费时间了，这个测试结果和测试二的基本一致。

测试七：层叠覆盖高分辨率

运行测试

最后一个测试，是为了new ipad提供的，它使用了retina屏幕，这样它就要使用更高分辨率的图片了。

本例中，一个div被给到一个背景图片。然后，通过使用min-device-pixel-ratio属性，如果比例大于1.5，一个新的背景图片将会被用到。

HTML和CSS代码如下：

1

<div id="test7"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#test7 {
	background-image:url('images/test7-lowres.png');
	width:200px;
	height:75px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	#test7 {
		background-image:url('images/test7-highres.png');
		width:200px;
		height:75px;
	}
}

测试结果

结论

为了安全，这个方案可以多测试一些。看起来这种方法在绝大多数情况下是可用的。但是不幸的是，貌似Android 2.x会同时下载两个图片如果设备像素比大于或等于1.5时(或者你在media query中设置的别的任何值)。所以，在本例中，如果你使用了一个高分辨率的Android 2.x的设备，会比较苦逼。。。

好消息是，到目前位置，我还没听说有那一款Android 2.x的设备的屏幕比例超过1.5.所以如果你的项目面向使用retina屏幕的ios设备，你可以将min-device-pixel-ratio设置到2或者更高，这样会比较安全一点儿。。。

推荐

• 如果你要隐藏一张内容图片，display:none是无效的，所以我推荐使用javascript方案或者服务器端实现；
• 如果你要隐藏一张背景图片，最好的方法是隐藏其父级元素。如果你不方便这样做，那就用一个层叠样式覆盖掉它吧(就像上面的第五个方案)，然后将设置background-image:none；
• 如果你要切换多张图片，就把他们全部用media query定义吧。

关于响应式设计的思考

媒体查询现在最大的用处就是响应式设计了，神飞翻译这篇文章也是因为最近在思考响应式设计的效率问题。通过这些测试结果，我们在实现响应式设计的网站时，最好先处理移动设备，然后再向高分辨率设备升级。然后使用图片等外部资源的选择器，一定要写到媒体查询中去。

反馈

如果你觉得这些测试结果有任何错误的地方，欢迎在评论中提出，然后这些测试用例Tim都在GitHub上开源了，感兴趣的话可以fork下。。。

玻璃瓶质感、四叶草漂浮于水面，荡起涟漪、摇摆上升的气泡…很美的意境，然而你也许会说你喜欢瓶子不喜欢四叶草，那可以把四叶草给none掉，不喜欢植物的话，那你喜不喜欢动物呢：

应该看得懂这只萌物是什么生物吧..没错，水母 一只…众生皆平等，不能只有植物没有动物哈…

然而你也许不喜欢蓝色的水，那我写几套多彩的玻璃瓶：

如果你感兴趣的话，可以通过这个链接，下载我的源代码：《四叶草、水母与玻璃瓶》

为方便下载，提供本人网盘帐号密码，请不要弄乱里面的页面，以方便其它人下载，谢谢。

帐号：287019674@qq.com

密码：123456

下面是对代码的分析：

一、四叶草

四叶草的代码结构如下：

1
2
3
4
5
6
7
8
9

<div class="clover">
<div class="leaves">
<i class="leave angleN"></i>
<i class="leave angleS"></i>
<i class="leave angleW"></i>
<i class="leave angleE"></i>
</div>
<i class="branch"></i>
</div>

一个leaves挂着叶子，叶瓣用四个I标签表示，一个branch代表叶茎

1) 叶瓣

每 个叶瓣都是一个leave，然后用angle控制它们的旋转，然而一个leave的话是画不出一个心形的，所以我用多了一个leave:after画另 外一半，两个表现出来的形状是一样的，一个头圆下方的形状，圆可以用border-radius圆角来做，然后通过以左下角为原点，旋转90度，来让它们 错开重叠成一个心形，如果你觉得抽象的话，可以参考下图：

我把leave:after的颜色调深一些，就可以看出它们是怎么一个重叠关系了…因为叶瓣与叶瓣之间存在之间隙，所以我旋转的原点有稍作偏移，而且在心形的底部如果太尖感觉有点怪，所以也做了一个小圆角处理，到此叶瓣主体就绘制完成。

2）叶茎

叶茎的话就是一个border做了一个大弧度圆角跟小弧度圆角的处理，如图：

如果border处于圆角状态，并且临近的border不显示，那么该border会向不显示的border拉一条锥形弧线， 这形状恰巧符合叶茎的形状，大弧度何以勾勒叶茎的基本形状，小弧度可以用来收尾，这样会比直角收尾柔和很多，到此四叶草制作完毕。

二、玻璃瓶

玻璃瓶的代码结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="bottle">
<div class="bottle_top">
<div class="bottle_mouth"></div>
<div class="highlight"></div>
</div>
<div class="bottle_neck">
<div class="highlight"></div>
</div>
<div class="bottle_main">
<div class="bottle_inner"></div>
<div class="highlight"></div>
</div>
</div>

一 个bottle，分为瓶顶bottle_top、瓶颈bottle_neck、瓶身bottle_main三部分，每个都包含有一个挂高光的无意义的标 签，而bottle_top里面有一个瓶口bottle_mouth，bottle_main里面有一个玻璃瓶内部bottle_inner。

1）瓶子bottle

bottle 作为最外的容器，其实并无多大意义，用来只是定位。bottle:after用来画瓶子底部黑色的阴影，bottle:before用来画瓶子底部由于水的颜色产生的彩色阴影，两者分开，这样如果里面不装水了，那么只要隐藏bottle:before即可。下图是一个空瓶子的效果：

2）瓶顶bottle_top、瓶颈bottle_neck、瓶身bottle_main

其实瓶顶、瓶颈、瓶身三者的基本结构一致，所以这里合并在一起，后面细节的时候再分开。
bottle_top我设定了宽高之后，取了它的左右边框，然后对它的bottle_top:after、bottle_top:before进行操作，after做顶部向上的面，before做底部向下的面，然后border做边框轮廓：

1
2
3

border:2px solid rgba(255,255,255,0.5);
border-bottom:2px solid rgba(255,255,255,0.6);
border-top:1px solid rgba(255,255,255,0.4);

一个总的border，然后底部，也就是向前的border-bottom我把透明度设置为0.6比正常的深，然后后面的我把它的宽度调成了1px，从而增强透视效果，因为同样的物体，靠近眼睛的会比远离眼睛的大些清晰些。瓶颈瓶身同理，做了同样的设置，然而对于bottle_neck的伪类的 border-top我不是设置它的宽度为1px，而是直接border-top:none; 因为它被前面的玻璃实体挡住了，理应是存在的但显得，但是该部位的交叉线条比较多，所以直接隐藏掉，让线条清爽明朗些。最后将三个主体的元素通过定位，玻璃瓶框架基本就打好了。

3）瓶口bottle_mouth

因为瓶子是透明的，所以瓶口这个地方需要显示出来，它串连着瓶顶跟瓶颈两个部份，瓶口顶部需要重点刻画，而瓶口底部刚好在瓶颈底部交汇，由于厚度折射什么 的一大堆元素影响，看不是很清楚，所以我给次要化删了。如果你看了我的代码，会发现bottle_mouth我是没有用box-shadow来做‘面’， 而是用背景色，这里需要注意的是，投影形成的是一个圈的颜色，当然可以用偏移等方式让他变成一个弧形，但是如果我仅仅需要左右方向的投影，上下为透明的 话，就不行了，如图：

我现在需要的是拉一个水平方向自左向右的白色-透明-透明-白色的渐变，如果用box-shadow的话，在箭头方向会产生一块很明显的白色-透明的区域，如果采用投影向上偏移的话，那么下面就会出现同样的不符合要求的区域，所以这个点上，应该采用背景色渐变比较合理。

4）瓶内bottle_inner

bottle_inner没有像bottle_top那样一个圆柱形的设计，只是通过与瓶身bottle_main间隔一段距离产生厚度感，还有圆角：

1

-moz-border-radius:10px 10px 20px 20px/10px;

这样做出来的圆角底部会扁些逼真些，而与前面制作最大的不同在于这里：

边框不是白色的，而是

1

border:1px solid rgba(0,0,0,0.01);

再配合投影

1

-moz-box-shadow:0px 0px 2px rgba(255,255,255,0.5) inset,0px 0px 8px rgba(255,255,255,0.6) inset,0px 0px 5px rgba(255,255,255,0.5);

因为最边缘的玻璃切面跟视线成90度，透明度很高，而 弧度与视线大的区域，透明度会很低，所以白色会重一些，再慢慢过渡到透明。这个我是搜一些玻璃瓶资料 分析出来的，做出来的效果也比白色边框再渐变要真实些，然而不单要对内投影，还要对外，因为玻璃身有一定厚度，不可能完全透明，所以写了 5个像素的向外投影作为瓶身的渲染色…

5）投影

这里所说的投影，是对伪类进行box-shadow inset内投影，产生一个渐变面，让圆柱体的‘面’效果突出出来，这里我不用背景色而采用投影，是因为很难调整到符合透视的一个角度，而投影可以很轻松的做到，而且色彩融合得很好。比较特殊投影处理的有：

1> 瓶顶bottle_top的一个向下偏移的投影，如上面瓶口bottle_mouth图片，具体代码：

1

0px 3px 3px -1px rgba(255,255,255,0.3)；

向下偏移3像素，羽化3像素，然后缩小1个比例，颜色为0.3的白色。这里是作为瓶顶圆柱形面的小高亮处理。

1

2> 瓶颈bottle_neck:after，如图：

具体代码：

1

-moz-box-shadow:0px 5px 3px -2px rgba(0,0,0,0.05);

向下偏移5像素，羽化3像素，然后缩小2个比例，颜色为0.05的黑色。这里是作为瓶顶向瓶颈投影处理，增强立体感。

3> 瓶身bottle_main:before，如图：

具体代码：

1

-moz-box-shadow:0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;

不偏移，羽化6像素，颜色为0.7的白色内投影，不偏移，羽化3像素，颜色为0.15的黑色内投影。这里是作为瓶底底色设置跟边缘泛光，增强立体感。

6）高光

挂上高光，立体感强烈了许多，如图：

分别对瓶顶、瓶颈、瓶身做高光，一条浅点细点的，一条宽点由左到右由白到透明的渐变，瓶颈只有宽没有细，瓶身细线由上至下做一个到80%的时候为透明的渐变…值得注意的是，高光需要贴着瓶壁，高度斜度保持一致，所以需要对高光进行一个斜切的变换：

1

-webkit-transform:skew(0deg,6deg);

要不然左侧对应了，那么右侧高光必然会高出瓶壁几个像素，到此，玻璃瓶制作完成。

三、水

1）水主体

因为水是装在玻璃瓶里面的，所以展现出来是一个圆柱形，结构跟瓶身bottle_main一致，区别主要表现在渲染颜色，投影方面。以蓝色的水为例：

1
2
3
4
5

.water{
background:-moz-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4));
-moz-border-radius:50px 50px 20px 20px/8px 8px 10px 10px;
-moz-box-shadow:0px 0px 6px rgba(0,204,255,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(0,204,255,0.3),0px 1px 3px rgba(0,204,255,0.2);
}

水元素边角需要做一个椭圆化处理，因为这次需要用到背景色打底，上圆润一点圆角过渡自然下扁在两角有一个小拐点，因为上面的是水平面透视的，而下面是玻璃底座，需要有一定的硬度，与上面产生区别；
背景色拉一个左上右下，斜度平缓倾向于垂直的渐变，颜色由深到浅；
投影所产生的效果跟瓶身的效果差不多，颜色在左右侧深中间浅；

2）水平面

1
2
3
4
5
6
7

.water:after{
background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(0,204,255,0.05) 50%,rgba(0,204,255,0.1) 80%,rgba(255,255,255,0.3));
-moz-border-radius:50px/8px;
border:1px solid rgba(255,255,255,0.2);
border-bottom-color:rgba(255,255,255,0.4);
-moz-box-shadow:0px 1px 2px -1px rgba(0,204,255,0.35);
}

背景色拉一个由左到右 白-蓝-蓝-白的渐变，因为已经有水主体的蓝色打底色，所以上水平面颜色不用太重，边框用0.2白色，而在前面的border-bottom则用0.4白 色，远模糊近清晰，让立体感更强些…这里值得注意的是投影，我写了一个向下偏移1像素，羽化2像素，然后缩小1个比例，颜色为0.35的蓝色投影，这 个是为了跟上面的水主体呼应写的，我们知道，在中学上化学课目测试管中溶液体积的时候，视线要要跟溶液凹面相平，否则会产生误差，可以看这张图：

内径比较小的仪器，当里面装有水时，因为水有表面张力，所以在小内径仪器里不会是平的，呈现周围高中间低的凹形，而中间的凹形状才是真正水的标准位置，周围的只是因为表面张力往上高了。

所以我刚才做的那个投影，配合背景色的头尾白色，就形成了这个凹面的效果，放大200%后，效果如下：

after做的是下面箭头指向的稍微深色的投影区域，而上面箭头指向的，其实就是水water本体所做的内投影，现在明白为什么这次主体要做圆角伸到最上面了吧…

3）水底部

其实原理跟水平面一致，背景色拉一个由左到右 深蓝-蓝-蓝-深蓝的渐变，然后在用投影加深底部渐变颜色，需要注意的是，底部跟玻璃需要保持一定的间隙，以突出玻璃的厚度和玻璃凹面。

四、水母

本来想画条鱼，不过鱼如果游到边缘要拐弯的话难度太高了，就换成一个比较容易实现的水母同志，如图：

代码结构为：

1
2
3
4
5
6

<div class="jellyfish">
<div class="jellyfish_head"></div>
<div class="jellyfish_tail">
<div class="jellyfish_tail_in"></div>
</div>
</div>

一只水母jellyfish，分为头部jellyfish_head、尾部jellyfish_tail，其实里面那个jellyfish_tail_in没多大意义，就为了加一条触须…

1）水母头部jellyfish_head

水母头部是一个椭圆形，顶部的又大又圆，底部需要一个拐角，不能太圆，感觉就像是一个‘倒着的钵’，具体圆角代码：

1

-moz-border-radius:20px 20px 10px 10px/20px 20px 16px 16px;

而重点的代码是内投影：

1

-moz-box-shadow:0px 0px 4px rgba(255,255,255,0.5) inset,1px 1px 2px rgba(255,255,255,0.2) inset,3px 3px 1px rgba(255,255,255,0.2) inset,-1px -1px 1px rgba(255,255,255,0.1) inset;

采用四次内投影产生立体感，具体怎么产生的，我解释下，第一个是最基本的打底 色，第二第四是做向右下偏移跟向左上偏移的阴影，增加深度，第三个向右下偏移 了三个像素做一个高光效果，再用jellyfish_head:after，画了一个椭圆旋转rotate(-15deg)，调整透明度位置后作为最亮的 高光展现，这样水母的头部就制作完成。

2）水母尾部jellyfish_tail

尾部jellyfish_tail取 左右边框，上下隐藏，然后做一个淡淡的内投影，调整位置，圆角的曲率，再通过 jellyfish_tail:after、jellyfish_tail:before制作多几条触须，调整好触须间的间隔，这个根据个人爱好而定，因 为我制作后发现尾部稍微大了点，就用scale缩小了一些…

五、气泡

气泡bubble的制作相对比较简单，所以放在下面，次要处理，基本也就是border、box-shadow这些主要还是体现在动画那里。

六、四叶草浮在水面

我 们知道，图层之间只有上下之分，没有穿过的，四叶草下部分需要泡在水里，而上部分需要浮出水面，我不可能把水切成两段，所以我把四叶草分成了上下两部分 cloverTop和cloverBottom，类似于一个模板操作，固定宽高后hidden掉不要的那部分，再拼接起来，从而实现漂浮，穿过水面的效 果，实现效果如下：

既然说穿过了，还要摇曳，那么必然有涟漪，总共有两个涟漪，用cloverBottom:after、cloverBottom:before实现，具体重点代码如下：

1
2
3
4
5
6
7
8

.cloverBottom:after{
border:0.5px solid rgba(255,255,255,0.3);
-moz-border-radius:19px/2px;
border-top:none;
border-right:none;
border-bottom-color: rgba(255,255,255,0.2);
-moz-box-shadow:0px 0px 3px -1px rgba(0,0,0,0.2) inset;
}

设置好边框样式，但是由于太小了，四条都显示的话画面太复杂了，所以隐藏掉后面跟右边的两条，下面的调整边框颜色，在设置一个0.2黑色的内投影，调整好 圆角的曲率，做出一个涟漪的大致效果，after做一个小涟漪，before做一个大涟漪，基本制作方式一致，这里就不分析了。

七、动画

1）摇曳的四叶草

如你刚打开我源代码页面所看到的，有一株四叶草在玻璃瓶里面摇曳，荡起一个个涟漪（如果你没看到，说明你用的是IE..哈哈..）…

那么，涟漪的节奏应该与四叶草摇曳的节奏一致，具体的代码如下：

1
2
3
4
5
6
7

@-moz-keyframes cloverMove{
   0%{-moz-transform:translate(0px,0px);}
   25%{-moz-transform:translate(-3px,1px);}
   50%{-moz-transform:translate(0px,-1px);}
   75%{-moz-transform:translate(4px,1px);}
   100%{-moz-transform:translate(0px,0px);}
}

四叶草从原位置，向左移动-3px向下移动1px，接着向右移动3px向上移动2px，接着向右移动4px向下移动2px，然后回归原位置。这样整体感觉就是浮浮沉沉，左摇右摆的样子。

而我在给元素设定动画的时候是这样写的：

1

-moz-animation: cloverMove 4s linear infinite alternate;

它动画的名字叫cloverMove，动画时间4秒，线性运动，不停止的，反向进行。

那就这样而已吗？不止的，这个是四叶草整体的摇曳，那叶茎也可以摇的，具体实现代码：

1
2
3
4
5
6
7
8
9

.branch{-moz-animation:branchMove 4s linear infinite alternate; -moz-transform-origin:0% 0%;}
 
@-moz-keyframes branchMove{
   0%{-moz-transform:rotate(0deg);}
   25%{-moz-transform:rotate(3deg);}
   50%{-moz-transform:rotate(-2deg);}
   75%{-moz-transform:rotate(4deg);}
   100%{-moz-transform:rotate(0deg);}
}

通过以左上角为中心，配合整体旋转，这样看起来更动感…

2)摇曳上升的气泡

单单是四叶草在摇，感觉怪怪的，因为气泡不能死气沉沉的，也要跟节奏才行，所以：

1
2
3
4
5
6
7

@-moz-keyframes bubbleMove{
   0%{-moz-transform:translate(0px,0px) skew(0deg,2deg);}
   25%{-moz-transform:translate(-2px,0.5px) skew(0deg,5deg);}
   50%{-moz-transform:translate(0px,-0.5px) skew(0deg,2deg);}
   75%{-moz-transform:translate(2px,0.5px) skew(0deg,0deg);}
   100%{-moz-transform:translate(0px,0px) skew(0deg,2deg);}
}

在轻微移动的同时进行斜切操作，因为气泡会“晃”…

那你会说这样也只是实现了“摇曳的气泡”，没有上升啊，其实有的，我总共做了三个气泡，第三个是在水底从下往上升的：

总共有三个气泡，第三个气泡的动画代码如下：

1
2
3
4
5
6
7
8
9

@-moz-keyframes bubbleRise{
   0%{-moz-transform:translate(0px,0px); opacity:0; border-color:rgba(255,255,255,0.1);}
   10%{-moz-transform:translate(0px,0px); opacity:1;}
   30%{-moz-transform:translate(-1px,-15px);}
   50%{-moz-transform:translate(1px,-30px);}
   75%{-moz-transform:translate(-1px,-50px) scale(1.2);}
   98%{opacity:1; border-color:rgba(255,255,255,0.25);}
   100%{-moz-transform:translate(0px,-67px) scale(1.4); opacity:0; border-color:rgba(255,255,255,0.1);}
}

气泡先从透明到完全不透明，10%出现的出现时间，然后摇晃着上升变大，到75%的时候面积为原来的1.2倍，边框颜色会随着变大而模糊，所以加深一点，到100%的时候面积为原来的1.4倍，完全不透明，即消失。

3）超萌水母

静态的水母已经很萌了，然而会游泳的，超萌那 q( >3< )p…以下是水母游水的动画代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@-moz-keyframes jellyfishSwimming{
   0%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
   20%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
   50%{-moz-transform:translate(-2px,-1px) rotate(-3deg) scale(0.8);}
   70%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
   100%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
}
 
@-moz-keyframes jellyfish_headChange{
   0%{-moz-transform:scale(1);}
   5%{-moz-transform:scale(1.1,0.95);}
   20%{-moz-transform:scale(0.95,1.1);}
   50%{-moz-transform:scale(1);}
   55%{-moz-transform:scale(1.1,0.95);}
   70%{-moz-transform:scale(0.95,1.1);}
   100%{-moz-transform:scale(1);}
}
 
@-moz-keyframes jellyfish_tailChange{
   0%{-moz-transform:scale(0.8);}
   5%{-moz-transform:scale(0.9,0.75);}
   20%{-moz-transform:scale(0.7,1);}
   50%{-moz-transform:scale(0.8);}
   55%{-moz-transform:scale(0.9,0.75);}
   70%{-moz-transform:scale(0.7,1);}
   100%{-moz-transform:scale(0.8);}
}

jellyfishSwimming为整体的游水，变换侧移位置，同时水母是圆的，会摇晃；
jellyfish_headChange为水母头部的变化，个人觉得水母是要吸一口水，然后吐出来，利用反作用力才游的，所以0-5的时候是吸水变宽变 扁，然后5-20吐水变瘦变长，20-50变为正常，然后50-55再吸水变宽变扁，55-70吐水变瘦变长，70-100变为正常。
jellyfish_tailChange同jellyfish_headChange，其实可以用同一个，只不过我觉得尾巴相对于头部有点大了，就再缩小些，而且吐水的时候，尾巴可以吐得长些。

七、换色

这里针对水的颜色替换，其实已经没有多大技巧了，只不过利用类名样式权重，覆盖原本的初始样式，我制作了蓝色（默认）、粉红色pink、黄色yellow、绿色green，只要在bottle后面写下你想要变更的颜色就可以了，如下：

1

<div class="bottle green">

本来这个应该写在水元素上比较恰当，如下：

1

<div class="water green">

因为我们变更的是水的颜色，而不是瓶子的颜色，但是水颜色对整体瓶底投影有影响，而bottle:before之前没有用到，我也不想加多个标签，就套上了…

八、后记

由于我做的时候是用firefox做的，兼容只写moz，webkit是临时批量修改的，在修改的时候发现，webkit居然不支持 border:0.5px 最小只能1px，修改了气泡那些，可能有些地方没修…

对于源代码页面，我隐藏了小水母，因为太多元素的话，页面显得很杂，如果你想看水母的话，就隐藏了四叶草再删叼水母对于的display:none样式，这样效果会好一些…

实验：

下午做了个简单的实验，用99个128px*128px的png 32图片，写了三个页面来做测试：

• 只用img标签调用；
• 用css分别调用每个png图片做背景；
• 使用雪碧图做背景

然后分别用Chrome、IE6/7/8/9、Firefox做测试，具体的数据我这里就不详细列了，感兴趣的话可以自测一下。

结论：

在各浏览器下，三个页面占用的内存相当，只有很小的差异，Chrome下，雪碧图占用内存略少一点点儿，IE下略多一点点儿。。。

包括mouseover等交互事件，对浏览器内存也没什么影响，只是会影响CPU占用率——这个即便纯色背景色都会在事件触发时提高CPU占用率的。。。

所以，雪碧图的真正问题是利用率的问题，如大猫所说，如果你雪碧图中合并了10个icon，结果实际只使用了3个，那才是浪费了内存。

其实，图片在浏览器中占用的内存是可以计算的：透明的图片，内存占用是长＊宽＊4，不透明图片占用是长＊宽＊3，比如第三个例子中的雪碧图大小是12770*128，它在浏览器中占用内存是12770*128*4=6.23MB左右。

所以，还是建议读一下之前翻译的《CSS雪碧:要还是不要？》。

总结：

• 雪碧图的尺寸要优化好，空白尽可能少；
• 及时清理不再使用的图片；
• 将雪碧图权重做分离，全局/框架级的和局部/模块级的分离开；
• 缓存设定和更新频率匹配，如果将每天更新的雪碧图的缓存设置到一个月很容易出问题的。

PS：自从用了CSSGaga的自动合并雪碧图功能后，再也不用为制作/更新雪碧图操心了。。。

CSS裸奔节就是通过将网站上的所有样式去掉，以告诉大家，样式对一个网站有多么重要，俗话说，人靠衣装，美靠靓妆。。。

虽然现在这个节日好像越来越不被重视了，但是让网站裸奔，作为网站可用性的测试，还是有些基础意义的——你的网站离开了样式，还能用吗？——虽然初衷好像是“还能看吗？”

嗯，在这个特殊的节日，我仅代表前端观察，向各位前端开发工程师发去问候，大家一起裸奔吧～～

css3中也对css中用到的单位进行了改进，单位也就是那几个，所以我们要搞清楚再用。

• %——百分比
• in——寸
• cm——厘米
• mm——毫米
• pt——point，大约1/72寸；
• pc——pica，大约6pt，1/6寸；
• px——屏幕的一个像素点；
• em——元素的font-size；
• ex——font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半。

我们常用的有px、%、em，px就不多说了，em和%多说点儿：

1
2
3

.box{
line-height:1.3em;
}

元素的行高是当前元素继承的font-size的1.3倍，

1
2
3

.box{
font-size:1.3em;
}

当前元素的字体大小是其继承的font-size的1.3倍。

1
2
3

.box{
line-height:130%;
}

元素的行高是当前元素继承的font-size的130%倍，等同于1.3em。

1
2
3

.box{
font-size:130%;
}

当前元素的字体大小是其继承的font-size的130%倍，等同于1.3em。

恩，迷惑了吗？

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。

而%对于font-size、line-height等，是基于其父元素的font-size的，而对于text-indent、margin、padding、width等属性，则是基于父元素的宽度的。

CSS3中的单位：

css3中引入了一些新的单位：

• ch——字符0(零)的宽度；
• rem——根元素(html元素)的font-size；
• vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
• vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
• vmin——vw和vh中较小的那个。

显然vw、vh、vmin是针对移动设备的，如果视窗大小变化了，这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活——或者说，比px灵活，比em更精确～～。。。XD。。。

如果没有定义font-size怎么办？

其实不用担心，传说，各个浏览器史无前例的默认font-size:16px;，所以，即便你在样式文件中忘了定义font-size初始值，也可以放心的使用em、rem。

浏览器支持：

rem，各浏览器基本都支持了， IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+

vw、vh、vmin，浏览器支持并不乐观，IE9支持了，Chrome目前不支持，Chrome 20将会重新支持(貌似之前支持过？)、Safari也即将支持了吧，Opera和Firefox也还都不支持。

现在，firefox和webkit相继支持calc()功能了，我们也可以学习下了。

calc()是干嘛的？

calc()是单词calculate(计算)的缩写，是css3的一个新的长度单位功能，可以使用简单的数学运算。

嗯，CSS3越来越高级了。

运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

• 使用“+”“-”“*”“/”四则运算；
• 可以使用百分比、px、em、rem等单位；
• 可以混合使用各种单位进行计算。

实例：

我们来看几个小例子来理解下calc()功能吧：

1
2
3
4

.box{
border:1px solid #ddd;
width:calc(100%-2px)
}

容器宽度加上边框宽度正好100%。

1
2
3

.box{
width:calc(10em+20px)
}

宽度，10em加20px。

1
2
3
4
5
6
7

.box{
margin-left:20px;
width:calc(100%/3-20px);
}
.box:nth-child(3n){
margin-left:0;
}

3栏等宽布局。

浏览器支持

firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～

所以如果我们要用这个属性的话，要记得带上各浏览器的兼容性。

UPDATE @2012-05-15

eric meyer提到w3c规范的一条备注(评论里面的同学也有提到)：

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也就是说，”+”、”-”两个符号边上必须要有空格，而”*”、”/”符号则不是必须的。

然后我们可能要这样写：

width: calc(100%/3 - 2*1em - 2*1px);

这样写也是可以的：

width: calc(100% / 3 - 2 * 1em - 2 * 1px);

但是这样写就是错的：

width: calc(100%/3-2*1em-2*1px);

嗯，这样很容易写错啊。还好现在支持的浏览器还不太多，我会继续观望并保持更新~~

免费字体

下面的这些icon font都是免费或者开源的，你可以大胆的使用，但是作为设计师，大家要有点儿修养，在使用前先看看相关字体文件的版权授权方式～～

Font Awesome(150+个)

为配合Twitter Bootstrap使用而设计。其实它是Glyphish的一个免费的重新设计的版本。

Modern Pictograms(89个)

可以在Font Squirrel免费下载，但是如果你愿意，也可以捐款。

Erler Dingbats(~120个)

Ecqlipse 2(281个)

Heydings Icons(60个)

Iconic(171个)

Web Symbols(~80个)

Entypo(100+个)

JustVector Social Icons(150+个)

只有社交符号

PulsarJS(73个)

面向移动网站开发的一个字体。

Raphaël(116个)

Dot Com(92个)

The Noun Project(424个)

Gcons(100个)

这个字体开源

Pixelated(36个)

Roam Design(99个)

仅限个人使用

Jigsoar(66个)

Social Media Pictograms (74个)

pictograms 包括几乎所有的社交媒体图标。然后对于一些图标，通过字母的大小写来实现是否有圈。

Peculiar (45个)

好吧，Peculiar其实不是一个字体，而是用css3实现的icon，不过方法可鉴。

Symbol Signs(21个)

Web Symbols(78个)

InfoBits Icons & Dingbats(190个)

ikoo(65个)

Social Networking Icons Font(56个)

收费字体

下面的icon font都是收费的字体，它们相对于上面的免费字体有什么提升吗？有那些地方或细节值得我们学习？

Glyphish(400个)

Glyphicons(350个)

Gedy Rivera Social(107个)

Fico(52个)

WriteSocial

ClickBits(400个)

Flexi Social(65个)

Steedicons(94个)

Web Icon Set(1600+个)

Geomicons(100+个)

Picons(100+个)

Symbolicons(500个)

Bixel(65个)

Tabs(745个)

Gentleface(304个)

Eddit iPhone UI(160个)

Simplicity(205个)

Picas(250个)

CleanIcons(55个)

Helveticons(600+个)

UIcons(362个)

IcoMoon(500+个)

Pictos(600+个)

iconSweets 2(1000+个)

Tipogram(90个)

GUI Design Icons(30个)

其它工具

• Fontomas提供一些免费的字体，并且允许你挑选你需要的图标然后生成你自定义的字体文件，不过生成的文件是svg的，你需要将其转化为其它格式的；
• Hieroglyph – 类似fontomas，从一系列的svg字体文件生成一个字体文件；

是不是你也想要试一把了啊，如果你在项目中有使用icon font，欢迎与我们分享经验。

整理自：

• Flat Icons & Icon Fonts
• 20 @fontface Icon Sets
• Free Icon Fonts (Pictograms) For Today’s Web Designer

我想，列出当前主流浏览器的版本发布历史是一件挺有趣的事情。

我相信最终会废除浏览器的版本号的两个因素是：快速发布版本和自动更新——无论哪个，如果我没搞错的话，都是Google Chrome的发明。

每个列表中都有一个橙色行表示间隔最久的一个版本

Internet Explorer 版本发布历史

趣事

• 可能就是在IE6到IE7中间的5年中，很多网站开发者对微软失望了；他们等了太久，以至于Firefox很快以创新占了上风。
• IE6在911时间前15天发布，我悲伤猜测，改变世界的灾难会同时降临。。。

Firefox 版本发布历史

趣事

• 在早期，Firefox使用过多个名字，从最初的Phoenix、然后是Firebird、最终才是Firefox
• 记不起确切的时间，但是好像Web Developer Tools这个插件是在2006年的某个时候发布的
• Firebug实在 2006年1月发布的

Chrome 版本发布历史

趣事

• 上面的版本只是代表各主要版本号的整数；较小的版本发布(Chrome经常干这事儿)并没有列出
• Chrome的第一个beta版本号是 0.2

Safari 版本发布历史

趣事

• Apple实际上和Safari 5同时发布了 Safari 4.1(上面未列出)
• 在Safari 5-5.1发布间隔的13个月中，在对HTML5和CSS3特性的支持上被Chrome (同样使用webkit内核但是快速发布版本)超越了。

Opera 版本发布历史

趣事

• 在Opera 2之前，Opera并没有公开发行版
• 在研究这个历史之前，我并不知道Opera已经存在这么久了。它们其实有多次机会提升市场份额，但是貌似他们的版本发布间隔对此不利。

结语

所有数据来自于每个浏览器各自的wikipedia条目，以及一些相关的文章。

我认为，Chrome的发布周期和方法是最好的。浏览器应该在后台自动更新，并且经常更新版本。

在我(原作者)看来，IE、Safari以及Opera份额变少的原因是它们在版本之间有比较大的间隔——以至于让Chrome转了空子？

为什么要将icon做成字体？

在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 index透明等。

比如，twitter用到的各种小icon：

这种情况下，使用字体来实现图标就有很多优势：

• 字体文件小，一般20-50kb；
• 容易编辑和维护，尺寸和颜色可以用css来控制；
• 透明完全兼容IE6；

如何将icon变成字体？

最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。

我们要用到一些字体编辑软件，比如FontCreator、FontLab等，这里我们用FontLab来演示。

还原步骤很简单：

PSD–>eps–>FontLab，即将PSD转换为illustrator的eps格式，然后将某个字符复制到FontLab中即可。

具体步骤：

打开设计稿psd，将其保存为Photoshop eps格式，我们这里以Qzone中说说发表框的表情icon为例：

在illustrator中打开保存的eps文件：

取消分组，然后点选某个icon，复制。

打开FontLab，随便打开一款字体文件，比如tahoma.ttf：

然后双击某个字符，将原有图形删除，粘贴刚才复制的icon对象：

调整图形大小，一个icon就完成还原了。

就是这么简单。所有icon还原完之后，生成字体文件就可以了。

查看字体对应字符，可以在字体列表中，在某个字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：

可以看到字体对应的字符是i，unicode编码是0069。

字体格式的浏览器支持：

目前，各个浏览器对字体格式的支持是最大的区别：

• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；
• Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
• Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
• Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11开始支持WOFF(多谢Apostle提醒~~)；
• IE：只支持eot格式，IE9开始支持woff。

注：以上资料来自于：webfonts.info

注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。详情可查看wiki：

在CSS中使用icon字体：

先使用font-face声明字体：

1
2
3
4
5
6
7
8

@font-face {
    font-family: 'emotion';
    src: url('emotion.eot'); /* IE9*/
    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('emotion.woff') format('woff'), /* chrome、firefox */
         url('emotion.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('emotion.svg#svgFontName') format('svg'); /*  iOS 4.1- */
    }

然后，在icon元素上使用该字体就好了：

1
2
3

.icon{font-family:"emotion" Tahoma;
...
}

最后，在页面中使用这个字体：

<span class="icon">i</span>

支持CSS3的浏览器可以更上流一点儿，我们每次修改html可能没那么方便，如果要改变某个icon，则可能需要修改相关字符，比如将i修改为e等。如果使用css3的伪元素，可以方便很多：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.icon{
display:inline-block;
width:16px;
height:16px;/*占个位**/
...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content:"i";/*在这里调用字符*/
width:16px;
height:16px;
margin-left:-16px;/*position:absolute什么的也可以，看具体情况*/
}

嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。

IE依然棘手：

因为IE9以前只支持eot格式，所以需要将ttf转换为eot先，这里可以使用微软官方的WEFT软件，也可以使用一些在线工具：

• http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式；
• http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式

另外，eot文件必须添加域名白名单才可以使用，这里推荐使用CreateMyEOT：

总结：

其实，这种方法有一个不足，就是只支持纯色icon，最多能高端浏览器上实现渐变色或图形蒙板。

当然，我们有很多场景是用纯色icon，特别是在Windows 8这种Metro UI开始越来越多的时候。

另外，这种方法可以有效减少页面的请求，但是对于习惯使用CSSGaGa的auto sprite功能的同学来说，这种方法对页面性能的提升不大。

但是对于移动终端，特别是webapp中，这种方法还是有很大的用武之地的，可以很方便的兼容多分辨率，配合离线存储效果更佳。

如果你有这方面更好的建议和意见，欢迎提出。

岗位要求：

• 计算机专业或相关专业大学本科以上学历，2年以上工作经验。
• 精通web标准的网站构建，有成功案例，精通html、css，熟悉xml。
• 精通图像处理软件与网页编辑软件。
• 熟悉HTML5和CSS3以及移动终端特性。
• 熟悉Javascript及主流js库，有前台开发经验者优先考虑。
• 对业界最新的前端技术和实现有浓厚的兴趣及深入的见解。
• 逻辑分析能力强，善于沟通，较强的学习能力。

相信自己，相信移动互联网的未来，请发送简历至：Bryan#vip.qq.com 或加 QQ：44331660～～