网上商店系统
首    页 | 电商资讯 | 电商作品 | 成功案例 | 电商方案 | 系统演示 | 电商建设 | 电商索引 | 电商问题
当前位置: 首 页 > 电商建设

精通CSS(21)- 阴影

文章来源:北京宇光宏达       浏览次数:1268次        发布日期:2011-7-20 12:13:14

3.3  阴影

阴影是一种很流行、很有吸引力的设计特性,它给平淡的设计增加了深度,形成立体感。大多数人使用Photoshop这样的图形软件直接给图像添加阴影。但是,可以使用CSS产生简单的阴影效果,而不需要修改底层的图像。

这么做有几个原因。例如,你可能让非技术人员管理站点,而他不会使用Photoshop,或者要从无法使用Photoshop的地方(比如网吧)上载图像。通过使用预定义的阴影样式,只需上载常规图像,它在站点上就会带着阴影显示。

使用CSS的最大好处之一是灵活性。如果以后想去掉阴影效果,那么只需要在CSS文件中修改几行代码,而不必重新处理所有图像。

3.3.1  简单的CSS阴影

www.1976design.comDunstan Orchard首先描述了这个非常简单的阴影方法。它的工作原理是:将一个大的阴影图像应用于容器div的背景。然后使用负值的空白边偏移这个图像,从而显示出阴影。

首先需要创建阴影图像。我使用Adobe Photoshop创建阴影图像。创建一个新的Photoshop文件,其尺寸与图像的最大尺寸一样。为了保险,我创建一个800×800像素的文件。打开背景层并且填充一种颜色,阴影将放在这种颜色上面。我让背景层保持白色。创建一个新的层并且填充上白色。现在,将这个层向左上方移动45个像素,然后对这个层应用45像素宽的阴影。保存这个文件并将它命名为shadow.gif(见图3-12)。

3-12  800×800像素的shadow.gif,在放大图中可以看到5像素宽的阴影

这种技术的标记非常简单:

<DIV style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 4pt; BACKGROUND: #dfdfdf; PADDING-BOTTOM: 4pt; MARGIN-LEFT: 5.5pt; BORDER-LEFT: windowtext 1pt solid; MARGIN-RIGHT: 5.5pt; PADDING-TOP: 2pt; BORDER-BOTTOM: windowtext 1pt solid">

一定要将这些代码放在一行上,而且在div和图像之间不能有空格。IE 5.5有一个空格bug,如果代码在不同的行上,那么这个bug会在图像和阴影之间造成间隙。

</DIV>

为了产生阴影效果,首先需要将阴影图像应用于容器div背景。因为div是块级元素,所以它们会水平伸展,占据所有可用空间。在这种情况下,希望div包围图像。可以显式地设置容器div的宽度,但是这么做会限制这种技术的灵活性。可以对div进行浮动,让它在现代浏览器上产生“收缩包围”的效果。Mac上的IE 5.x不支持这种技术,可以对Mac上的IE 5.x隐藏这些样式。关于对各种浏览器隐藏规则的更多信息,请参见第8章,那里会讨论各种招数和过滤器。

为了露出阴影图像并产生阴影效果(见图3-13),需要使用负值的空白边偏移这个图像:

3-13  应用了阴影的图像

还可以给图像加上边框和一些填充,从而产生类似照片边框的效果(见图3-14):

3-14  最终结果

这种技术对于大多数符合标准的现代浏览器都是有效的。但是,为了在IE 6中产生正确的效果,还需要添加两个简单的规则:

阴影效果现在可以在IE 6中实现了。在IE 5.x中,不显示图像上的填充,但是这是个小问题,可以不用理会。


特别提示:如需转载此篇文章请注明文章来源企策互通
文章关键词:
上一篇:
精通CSS(20)- 山顶角 (2011-7-20 关注度:1247)
下一篇:
精通CSS(22)- 来自Clagnut的阴影方法 (2011-7-17 关注度:1223)
 
 相关文章
 
提高网站友好度的十点建议(2011-7-19 关注度:2033)
个人如何才能做出一个成功的网站(2011-7-18 关注度:901)
精通CSS(11)- 框模型概述 (2011-6-8 关注度:1205)
从用户差异化态度来看看如何进行网络营销策划 (2011-6-10 关注度:1393)
精通CSS(5)-高级选择器(2011-7-12 关注度:1191)
精通CSS(16)- 绝对定位(2011-7-15 关注度:1226)
我的常州装饰网如何建立的(2011-7-17 关注度:1742)
企业网站该如何定位?(2011-7-16 关注度:1416)
 
行业观点类别
 

开店疑难(94)
电商建设(143)
电商运营(217)
电商发展趋势(96)
售后服务(10)

电商建设关注排行 
  1.网页设计页面大小分析 不同分辨率下的网页大小
  2.网站建设合同模板 标准网站建设合同下载
  3.网站设计论文下载
  4.便宜网站建设 便宜网站建设分析
  5.网站建设业务营销策略 企业网站建设业务营销分析
  6.小议中英文网站排版设计的视觉差异
  7.提高网站友好度的十点建议
  8.十大网站设计错误 - 2006
  9.深度分析 企事业单位网站建设问题严重
  10.网站可信度建设十大准则 如果建立可信度高的企业公
电商建设最新文章 
  1.基于SMS的移动电子商务存在哪些安全问题?
  2.国内首个电子商务调解中心获批并正式成立
  3.关键词对网站的运营有什么影响?怎么分析网站关键词?
  4.什么是网上商城前端设计与网店前台设计?
  5.网页META标签内容写作规范要点
  6.Asp中通用函数
  7.探讨网站获得盈利的前提条件
  8.网站建设三步:申请空间编写网页上传文件
  9.明定网站的优化设计
  10.披露创业秘密 网站的盈利方式有哪些
首    页  |  关于我们  |  定制开发  |  购买流程  |  网店系统特性  |  商城系统策划  |  开店疑问问题  |  网店建设观点  |  友情链接  |  联系我们
  Copyright 2005-2007 51system 网上商城系统 All Rights Reserved 北京宇光宏达 版权所有 地址:北京市朝阳区东三环北路戊2号A1505室。
京ICP备11007506号