css阴影教程,CSS高级技巧:阴影效果
上一篇CSS教程 文章:CSS高级技巧:网页布局
CSS阴影效果 (Drop Shadows)
一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.
原理:
给标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.
备用的阴影图像 shadow.gif
HTML代码如下:
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 #ccc;}
红色代码部分是为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;top:-5px;padding:3px;background:white;border:solid 1px #ccc;}
上面的阴影都有点生硬(hard), 我们可以通过建立一个额外的div标签, 再运用一个带透明度的png蒙板来遮盖阴影图片的边缘.
具有Alpha的阴影蒙板图片 shadow_mask.png
HTML代码如下:
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 top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;}
效果如下:
蒙板效果的阴影, 更加自然
无蒙板的阴影, 边缘有点生硬
对于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阴影教程,CSS高级技巧:阴影效果相关推荐
- css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
- CSS(3)教程 css的一般属性
大家好呀,上一节课我们聊了关于字体以及文本的基本属性,这节课小编带着大家了解一些css3的基本属性,目录如下表: CSS属性 颜色 <!DOCTYPE html> <html l ...
- css样式表诞生,[css]简明教程 CSS样式表概述
CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示 ...
- css 阴影 效果_CSS阴影效果
css 阴影 效果 CSS中的阴影效果 (Shadow Effects in CSS) It is always good to make our web pages stylish and beau ...
- html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)
这里用css实现不用滤镜实现阴影效果.代吗及详解如下: xhtml代码: 例如: href="http://www.goodjob.cn/">中国俊才网中国俊才网 href= ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- 【经典】CSS技巧教程资源大全
一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是 个啥玩意儿).应该说,你是否学Web标准, ...
- 60+CSS技巧教程资源大全
一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是个啥玩意儿).应该说,你是否学Web标准,跟 ...
- 保姆级教程 CSS 知识点梳理大全,超详细!!!
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
最新文章
- vc中出现stack overflow错误(VS设置默认栈大小)
- Property with #39;retain (or strong)#39; attribute must be of object type
- 我所碰到的智能手机自动重启的情况
- 神经网络与深度学习——TensorFlow2.0实战(笔记)(五)(NumPy科学计算库<2>python)
- UVa1586 - Molar mass
- spring三级缓存
- 人性的弱点【了解鱼的需求】
- 深入浅出DDR系列(二)--DDR工作原理
- 从“洗脸巾”到“湿厕纸”,生活用纸的品类扩张之路
- veu3路由的安装和使用
- 防止刷票的一些方法介绍
- 高校大学生可以免费领半年阿里云服务器
- 计算机技术为艺术设计提供,计算机技术艺术设计论文
- 锐龙r5 6600g处理器怎么样 r7 6700g核显相当于什么显卡
- 男人三十而立,被动收入,越早开始越好
- 用python画小鸭,Python 处理输入法字库(五笔极点字库转小鸭字库)
- Unity Shaders and Effects Cookbook (7-2) Surface Shader 中实现 顶点动画
- Rejecting mapping update to [XXx] as the final mapping would have more than 1 type: 报错
- [机缘参悟-86]:清心寡欲,世外修行 ?负剑下山,闯荡江湖?
- 专利申请相关事项介绍
热门文章
- 内存走线 菊花链_菊花链拓扑结构布线注意事项和端接方法
- INFA DAC抽取数据
- r语言qsignrank函数用法_R语言常用函数名
- .Net 4.0使用httpClient调用WebApi接口时提示“由于远程方已关闭传输流,身份验证失败。”
- chatgpt赋能python:Python平面图制作教程
- 易度项目管理系统试用
- 水果店活动吸引人,水果店什么活动吸引人
- 添加了Packed padded sequence和mask机制的Seq2Seq(Attention)模型
- office三件套与mathtype的安装和导入word
- Qt开发,编译报错:Cannot find file: xxx.pro.