前几天收到了一个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;
}
分享到:
相关推荐
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 图片的对齐 4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
C ++中的Wave函数崩溃这是https://github.com/mxgmn/WaveFunctionCollapse的C ++端口。 所有示例图像均来自https://github.com/mxgmn/WaveFunctionCollapse许可证该软件获得了双重许可,以在C ++中实现Wave函数的...
Google Wave 完全手册 The Complete Guide to Google Wave
第11章 Dreamweaver 8+CSS可视化开发 233 11.1 Dreamweaver 8对CSS的支持 234 11.1.1 新的CSS支持面板 234 11.1.2 CSS可视化助理 238 11.1.3 代码校验 241 11.1.4 样式呈现 243 11.2 创建CSS布局 246 11.2.1 新建...
HTML format reflection effects that most of the water source
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.6 div排版与传统的表格方式排版的分析 ...
Google Wave-like中文译本,一款PHP+ Ajax无刷新评论模型,支持选择头像,如果没有选择头像则使用默认头像。程序演示了Ajax无刷新将数据添加到数据库,测试时候请先手功使用phpmyadmin在MYSQL中建立一个测试数据库,...
google wave 插件 ie 浏览器
Wave文件波形编辑方法.pdf
图片png: ui-bg_flat_0_aaaaaa_40x100.png ui-bg_flat_55_fbec88_40x100.png ui-bg_glass_75_d0e5f5_1x400.png ui-bg_glass_85_dfeffc_1x400.png ui-bg_glass_95_fef1ec_1x400.png ui-bg_gloss-wave_55_5c9ccc_500...
Google Wave 完全手册(中文版)是一本综合的用户手册。
基于Z-Wave技术的智能家居是一种采用Z-Wave无线通信技术的智能家居系统。Z-Wave是一种新兴的基于射频的、低成本、低功耗、高可靠、适于网络的短距离无线通信技术,工作频带为908.42MHz(美国)~868.42MHz(欧洲),...
ComPWA:Common Partial Wave Analysis框架的C ++后端
wave6000wave6000wave6000wave6000wave6000
Pr3+:YSO晶体中种子注入自发参量四波混频与荧光信号,郑淮斌,李昌彪,在这篇论文中, 在Pr3+:YSO晶体中种子注入自发参量四波混频过程和荧光信号被理论和实验论证。在此晶体中自缀饰或者外缀饰相位共轭四