论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

Div+CSS教程:如何制作玻璃瓶注水效果

文章类别:div+css | 发表日期:2012-6-5 10:28:07

Div+CSS教程:如何制作玻璃瓶注水效果


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);
}

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

水平面

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本体所做的内投影,现在明白为什么这次主体要做圆角伸到最上面了;

水底部

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

水主体

   
因为水是装在玻璃瓶里面的,所以展现出来是一个圆柱形,结构跟瓶身bottle_main一致,区别主要表现在渲染颜色,投影方面。以蓝色的水为例:
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058