IInterest'Blog

阴影效果是在设计中比较常见的,它可以增强页面的立体感,给用户带来更高的视觉体验,常规的制作方式是用图片来完成,而这里就介绍几种CSS方法来实现阴影效果.

简单的图片阴影
先来看看效果:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> *{ margin:0; padding:0;} .box-shadow{ float:left; margin:30px; background:#f4f4f4;} .box-shadow img{ display:block; position:relative; top:-5px; left:-5px; padding:5px; border:1px solid #d7d7d7; background:#fff;} </style> </head> <body> <div class="box-shadow"><a href="#"><img src="http://www.google.cn/images/nav_logo7.png"></a></div> <div class="box-shadow"><a href="#"><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"></a></div> </body> </html>

提示：你可以先修改部分代码再运行。

原理:代码很简单,主要是用到了相对定位:position:relative;并通过top:-5px; left:-5px;使图片产生向左以及向上的位移,使原来被遮挡住的box-shadow得以显现,再加上灰色的背景background:#f4f4f4;最终形成阴影效果:)

文字也玩阴影
虽然CSS2中有text-shadow可以设置文字阴影,但可惜这个属性IE不支持…
效果:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> *{ margin:0; padding:0;} h1{ margin:10px; color:#CCC; overflow:hidden; font-weight:bold;} h1 span{ position:absolute; margin:-2px 0 0 -2px; color:#555;} </style> </head> <body> <h1><span>这段文字加了阴影效果</span>这段文字加了阴影效果</h1> </body> </html>

提示：你可以先修改部分代码再运行。

效果的原理跟上面相同,都是利用位移来模拟阴影,但使用的方法不一样,这里用的是绝对定位position:absolute;,然后通过负边距 margin:-2px 0 0 -2px;来达到位移的效果.之所以用absolute是因为设置绝对定位后文本会拖离正常文档流,不占据空间,也就形成2段相同文字的重叠,在位移上不使用top,left是因为设置绝对定位后其对象的定位将参照与最近的一个具有定位设置的父对象进行绝对定位(例子中对象为body),这就无法实现相对偏移的效果.

半透明阴影
这个也可以叫做”遮罩”…效果如下:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> *{ margin:0; padding:0;} .poacity-box{ width:300px; height:50px; margin:10px; overflow:hidden; background:url(http://www.google.cn/intl/zh-CN/images/logo_cn.gif);} .poacity-box a{ display:block; position:relative; width:50%; height:50px; text-align:center; line-height:50px; color:#fff; font-weight:bold; text-decoration:none; z-index:2;} .poacity-box span{ display:block; position:relative; top:-50px; width:50%; height:50px; background:#333; z-index:1; opacity:0.5; filter:alpha(opacity=50);} </style> </head> <body> <div class="poacity-box"> <a href="#">透明背景的文字</a><span> </span> </div> </body> </html>

提示：你可以先修改部分代码再运行。

原理:要达到半透明的效果,标准浏览器下运用了opacity:0.5属性,IE下使用了滤镜filter:alpha(opacity=50);因为opacity属性会影响到其对象的子孙元素,所以为了不影响a中元素的透明度,最终是将设有opacity属性的span容器单独放置.

用CSS打造图片以及文字的阴影效果

2 Responses to 用CSS打造图片以及文字的阴影效果

发表评论取消回复

搜索

分类

近期文章

文章

HTML5相关

在线工具

功能

用CSS打造图片以及文字的阴影效果

2 Responses to 用CSS打造图片以及文字的阴影效果

发表评论 取消回复

搜索

分类

近期文章

文章

标签云

HTML5相关

在线工具

功能

发表评论取消回复