第一时间呈上google wave 的层阴影制作方法(css+图片)

 

前几天收到了一个google wave的邀请,说实话我对这个东西没啥兴趣,没时间去研究他到底是干什么的,但是作为一个前端,还是应该关心一下这些东西的,于是看了一下这玩意,看到第一眼嚼的好经验,我立即好奇起来,这种阴影好神奇啊,是咋做出来的呢,我去网上搜了一通,没有发现制作阴影的文章(除了那种粗糙的阴影),于是我用ff把它涉及到的图片都扒了下来,第一时间自己用这些图片组建了这种样式,可能我的方法和google有所出入,但是效果的确是出来了:如下图:

要看源代码和真正的效果,请点击这里:(请用firfox或者chrome打开此链接,不支持ie)

http://www.coderbbs.cn/UED/google-wave-test.html

有一点需要注意,这种样式在ie中不支持,我想这也是为什么google wave在ie里需要给ie装一个chrome frame的原因,在ie里显示的提醒页也有这种阴影样式,但是那是一个固定层,只有一个背景图片,无法实现层大小的改变,具体是因为ie中如果不设置层的宽度,只设置left和right,层并不会自己延伸,造成无法实现这种效果.具体可以自己实验

下面开始说原理:

wave里应用了如下的图片来实现阴影和圆角(其中省略了几个用来修饰bug的小图片,不影响效果)

其中各用在:1-标题背景;2-标题右边;3-内容体由边框;4-标题左边;5-右下角圆角;6-内容体下边框;7-左下角圆角;8-内容体左边框

首先我们需要构造一个html结构,外边是一个总的容器,里面包括修饰层,标题层,内容层:

html代码,只写了一个

 

<div class="container con-1">
	    <div class="w-top-left corner"></div>
	    <div class="w-top-right corner"></div>
	    <div class="w-bot-left corner"></div>
	    <div class="w-bot-right corner"></div>
	    <div class="w-b-left corner"></div>
	    <div class="w-b-right corner"></div>
	    <div class="w-b corner"></div>
	    <div class="w-hd">标题</div>
	    <div class="w-bd"></div>
	</div>

 

 

接着是我们要分布各个图片的位置:

这个容易看出,首先在css里设置各个修饰层为绝对定位,包括标题和内容层,让他们相对最外层的container定位,所以在使用的时候,外面的层必须设置position属性,如果不设置就不能正确显示.

然后把各个层的大小设置为和图片相同,设置背景图像,这些也没什么难的,然后定位即可,其实在定位这里我卡住了一会,效果总是不理想,本来我不打算将内容单独设置成一个层的,后来发现必须将内容和外边的包装层分离开来才行,只要定位好位置,就行了.

还有一个问题,那也就是为什么ie不支持这种布局的原因,因为我这里的标题层需要随着外层的变化而变化,所以我不能定死它的大小,也不能设置百分比,也就是我不能设置它的大小,只能同时设置他的left和right,这个时侯,浏览器会自动计算他的大小,但是在ie里浏览器不会计算他的大小,造成大小不能自动改变,也就是在ie里,不能让里面的层随着外边的层的大小的改变而改变(注意:是里面随着外边),而在其他浏览器里这是可以的,如果你想在ie显示这个,可以去装个chrome frame for ie

下面是针对上面的css代码,要看完整效果请点击上面的链接:

.con-1{
	    width:200px;
	    height:300px;
	    left:200px;
	    top:150px;
	}
	.con-2{
	    width:400px;
	    height:200px;
	    margin-top:10px;
	    left:500px;
	     top:150px;
	}
	.container{
	    position:absolute;
	    z-index:1;
	}
	.corner{
	    position:absolute;
	    z-index:3;
	}
	.w-hd{
	    background:url(googleimg/g1.png) repeat-x ;
	    height:23px;
	    position:absolute;
	    white-space:nowrap;
	    overflow:hidden;
	    line-height:1;
	    cursor:default;
	    left:6px;
	    right:6px;
	    font-size:12px;
	    color:#fff;
	    line-height:23px;
	    text-align:center;
	    z-index:2;
	}
	.w-bd{
	    background-color:#fff;
	    z-index:2;
	    position:absolute;
	    top:23px;
	    bottom:0px;
	    left:3px;
	    right:2px;
	}
	.w-top-left{
	    background:url(googleimg/g4.png);
	    width:7px;
	    height:23px;
	    top:0px;
	    left:0px;
	}
	.w-top-right{
	    position:absolute;
	    background:url(googleimg/g2.png);
	    width:16px;
	    height:23px;
	    top:0px;
	    right:-10px;
	}
	.w-bot-left{
	    position:absolute;
	    background:url(googleimg/g7.png);
	    width:14px;
	    height:18px;
	    bottom:-18px;
	    left:0px;
	}
	.w-bot-right{
	    position:absolute;
	    background:url(googleimg/g5.png);
	    width:16px;
	    height:18px;
	    bottom:-18px;
	    right:-10px;
	}
	.w-b-left{
	    background:url(googleimg/g8.png);
	    width:2px;
	    bottom:0px;
	    top:23px;
	    left:0px;
	}
	.w-b-right{
	    background:url(googleimg/g3.png);
	    width:12px;
	    top:23px;
	    right:-10px;
	    bottom:0px;
	}
	.w-b{
	    background:url(googleimg/g6.png);
	    height:18px;
	    left:13px;
	    right:5px;
	    bottom:-18px;
	}

 

 

view source

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="16" height="16" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="id" value="highlighter_269359_clipboard"> <param name="flashvars" value="highlighterId=highlighter_269359"> <param name="src" value="http://www.coderbbs.cn/scripts/clipboard.swf"> <param name="wmode" value="transparent"> <embed id="highlighter_269359_clipboard" type="application/x-shockwave-flash" width="16" height="16" src="http://www.coderbbs.cn/scripts/clipboard.swf" wmode="transparent" flashvars="highlighterId=highlighter_269359"></embed></object>

print?

 

评论

1 楼 aaronbamboo 2011-02-28  

好文，值得研究