硅谷杂志：探秘基于CSS滑动门技术的网页图像阴影设计 |
| 2012-12-14 16:05 作者：盛永华 来源：硅谷网 HV： 编辑： 【搜索试试】
|
|
【硅谷网文】据《硅谷》杂志2012年第19期刊文，利用CSS中的滑动门技术可以方便快捷地为网页图像添加阴影，这样不仅可以大大减少图像作为网页素材的预处理工作，也为网页后期的样式调整提供方便。介绍利用该技术为网页图像添加阴影的设计原来及实现方法。
关键词：图像；阴影，CSS；滑动门；DIV
0引言
在Web网站设计制作过程中，为了增强页面中图像的立体感，通常会为页面中的图像添加阴影效果。在图像处理软件中，为图像添加阴影效果是非常容易实现的功能。但是如果一个网站上需要放置很多图像，每个图像都要先在图像处理软件中增加阴影，就会很费时费力，而且如果以后要去掉阴影效果，又要重新处理图像，缺少灵活性。CSS技术可以在不改变图像本身的情况下，实现阴影效果，并可以通过改变CSS的方式快速地去除阴影，为后期可能的样式调整提供方便。
本文设计了一种基于CSS滑动门技术的图像阴影效果实现方式，可以方便的用于Web页面的制作中。
1CSS简介
CSS（CascadingStyleSheets，层叠样式表）是一种格式化网页的便捷技术，应用在网页设计中，易于控制网页布局、提高代码重用率、简化HTML中的各种繁琐标记、提高网页传输速率、便于网页的更新与维护。CSS扩充了HTML各标记的属性设定(即样式)，能够对网页中对象的位置进行了像素级的精确控制，支持几乎所有的字体、字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计，是目前基于文本展示的最优秀的表现设计语言。
2滑动门技术
CSS中的滑动门技术，是指两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样，左右两端的背景内容就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时，依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质，两个图像就像两扇门，二者可以滑动，当宽度小的时候，就多重叠一些，宽度大的时候，就少重叠一些。滑动门技术主要应用于标签导航的设计，在这里我们也可以用它来实现网页图像的阴影制作。
3利用滑动门技术设计与实现网页图像阴影
3.1设计原理
在一个图像的外面嵌套两个div的层，如图1所示，两个div层的大小设置一样大小，上面一个div的背景是一个上边和左边各有6像素宽的白条，其余部分为透明的图像内容，下面一个div的背景是一个下边和右边各有6像素宽阴影的图像内容，这两个div的背景图像重叠在一起，正好组成图像阴影的效果，对于不同大小的图像，这种方法自动适应（在不超过最大面积的前提下）。
图1用滑动门技术实现图像阴影的原理示意图
3.2实现方法
1）首先制作一个如图2所示的下边和右边具有6像素宽阴影的图像，命名为bottom-right.gif。这个图像的大小可以随意确定，但是如果图像大小大于这个阴影图像的大小，阴影就不能完全显示。因此，这个图像应该比将来要设置的图像大一些。再准备一个如图3所示的部分透明的GIF格式图像，图像的上面和左面各有6像素的白色不透明区域，其余区域为透明色，可以和bottom-right.gif图像一样大，并命名为top-left.gif。
图2阴影图像bottom-right.gif图3背景图像top-left.gif
2）在HTML代码中的img元素外面套两个div元素，并设置外面一层div的CSS类别为shadow。
<divclass="shadow">
<div><imgsrc="computer.gif"/></div>
</div>
3）分别将两个预先准备的图像设置为两个div的背景图像，外面的div用背景图像bottom-right.gif，从右下角对齐；里面的div使用背景图像top-left.gif，从左上角对齐，代码如下：
.shadow{
float:left;
background:url(images/bottom-right.gif)no-repeatbottomright;}
.shadowdiv{
background:url(images/top-left.gif)no-repeat;
padding:06px6px0;}
4）然后设置图像的基本属性，代码如下：
.shadowimg{
border:1pxsolid#000;
padding:4px;}
5）在IE浏览器中可以看到效果如图4所示，可以看出，这个带有阴影的图像已经产生了。此方法在IE浏览器各版本中均能适用。
图4利用滑动门技术实现的图像阴影
4结束语
文中利用CSS中的滑动门技术制作了一个可以自适应的图像阴影，只要预备的两个背景图像足够大，都可以快速地利用此方法为网页图像添加阴影，对于网页的美化具有一定的实用价值。但此方法在实际应用时仍可以进一步的改进，例如，仔细观察利用这种方法制作的网页图像阴影，可以看出图像阴影端点处的效果还不够柔和。这个可以在今后的研究中进一步地得到完善，使其在应用时可以更加完美。
|
|
|
|
【对“硅谷杂志：探秘基于CSS滑动门技术的网页图像阴影设计”发布评论】 |
版权及免责声明：
① 本网站部分投稿来源于“网友”，涉及投资、理财、消费等内容，请亲们反复甄别，切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质，仅供阅读，不构成具体实施建议，请谨慎对待。据此操作，风险自担。
② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视频，版权均属本网站所有，任何媒体、网站或个人需经本网站许可方可复制或转载，并在使用时必须注明来源【硅谷网】或对应来源，违者本网站将依法追究责任。
③ 注明来源为各大报纸、杂志、网站及其他媒体的文章，文章原作者享有著作权，本网站转载其他媒体稿件是为传播更多的信息，并不代表赞同其观点和对其真实性负责，本网站不承担此类稿件侵权行为的连带责任。
④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容，涉及到侵权、违法等问题，请有关单位或个人速与本网站取得联系（联系电话：01057255600），我们将第一时间核实处理。
|
|
