CSS高级技巧:阴影效果
建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
上一篇CSS教程 文章CSS高级技巧:网页布局 CSS阴影效果 (Drop Shadows)
一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.
原理:
给<img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把<img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.
备用的阴影图像 shadow.gif
HTML代码如下:
<div class="image_shadow">
<img src="../images/origin_image.jpg" alt=""/>
</div>
CSS代码如下:
.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #c;}
红色代码部分是为IE 6准备的, 不然...
Clagnut阴影:
Richard Rutter提供了一个类似的阴影方法, 他用的是相对定位来偏移图像.
CSS代码如下:
.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:-5px;:-5px;padding:3px;background:white;border:solid 1px #c;}
上面的阴影都有点生硬(hard), 我们可以通过建立一个额外的div标签, 再运用一个带透明度的png蒙板来遮盖阴影图片的边缘.
具有Alpha的阴影蒙板图片 shadow_mask.png
HTML代码如下:
<div class="image_shadow">
<div>
<img src="../images/origin_image.jpg" alt="" />
</div>
</div>
CSS代码如下:
.image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow div{float:left;padding:0 5px 5px 0;background:url(../images/shadow_mask.png) no-repeat left ;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #c;}
效果如下:
蒙板效果的阴影, 更加自然
无蒙板的阴影, 边缘有点生硬
对于IE 6以下不支持png-24的透明效果, 我们要用到filter 和 hacks了
html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow_mask.png' ,sizingMethod='crop');}
另还有类似CSS Sprites的方法创建阴影, 同样可以做到自然. 额外标签过多, 不推荐.
到此为止CSS高级教程结束.
上一篇:CSS常用属性的代码简化实例
下一篇:WEB前端涉及的布局、结构化和标准化
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML