CSS3--实现特殊阴影 (实例)
学习来源:慕课网http://www.imooc.com/view/240
先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
HTML结构
<body>
<div class="wrap effect">
<!-- effect类:是阴影类,其他元素也可以使用 -->
<h1>Shadow Effect</h1>
</div>
<ul class="box">
<li><img src="data:images/photo1.jpg" alt=""></li>
<li><img src="data:images/photo2.jpg" alt=""></li>
<li><img src="data:images/photo3.jpg" alt=""></li>
</ul>
</body>
CSS样式(省略了各浏览器前缀)
/*通用类*/
body { font-family: Arial; font-size: 20px;}
body,ul {margin:; padding:; list-style: none;}
.wrap {width:70%; height:200px; margin:50px auto; background: #fff; }
.wrap h1 {font-size: 20px; text-align: center; line-height: 200px; } /*弧度阴影*/
.effect {
position: relative;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
0 0 10px rgba(0,0,0,0.1) inset;
/*添加一个范围=4px的小阴影;再添加一个范围=10px的内阴影;*/
}
.effect:before,.effect:after {
content: '';
background: #f00;
position: absolute;
z-index: -2;
top:50%; bottom:; left:30px; right:30px;
/*设置四个方向值,然后浏览器自动计算盒子的大小;*/
box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
/*设置添加的盒子的阴影;*/
border-radius: 100px/10px;
/*添加圆角:水平方向圆角大小是100px/垂直方向圆角大小是10px;*/
} /*翘边阴影*/
.box{
width:980px;
height:auto;
clear:both;
overflow:hidden;
margin:20px auto;
}
.box li{
position: relative;
/*以li为定位基准;*/
width:300px;
height:210px;
float:left;
background: #fff;
margin:20px 10px;
border:2px solid #efefef;
box-shadow: 0px 1px 4px rgba(0,0,0,0.27);
/*给li添加一个小小的阴影;*/
}
.box li img {
display: block;
width:290px;
height:200px;
margin:5px;
}
.box li:before{
content: '';
position: absolute;
z-index: -3;
width:90%;
height:80%;
left:18px;
bottom:8px;
box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
transform:skew(-12deg) rotate(-4deg);
/*图形向右倾斜12度;并逆时针旋转4度;*/
}
.box li:after{
content: '';
position: absolute;
z-index: -4;
width:90%;
height:80%;
right:18px;
bottom:8px;
box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
transform:skew(12deg) rotate(4deg);
/*图形向左倾斜12度;并顺时针旋转4度;*/
}
之前在PS里用灰色图层叠加在其他图层下面做特殊阴影效果,相同思路应用到CSS里了。赞!
知识点补充↓↓↓↓↓↓↓
1.box-shadow--添加一个或多个阴影
>1.功能:box-shadow--添加一个或多个阴影;
>2.语法:box-shadow:h-shadow v-shadow blur spread color inset;
>3.参数:
>>:h-shadow(必需):水平阴影的位置;允许负值;
>>:v-shadow(必需):垂直阴影的位置;允许负值;
>>:blur(可选):模糊距离;
>>:spread(可选):阴影的尺寸;
>>:color(可选):阴影的颜色;
>>:inset(可选):将外部阴影(outset)改为内部阴影;
>4.浏览器:IE9+/FF4 2.:before与:after
>1.:before选择器:在被选元素的内容前面插入内容;
>2.:after选择器:在被选元素的内容后面插入内容;
>3.说明:需要使用content属性来指定要插入的内容;
>4.浏览器:IE8及更早版本中的:after,必须使用<!DOCTYPE>; 3.transform--
>1.功能:向元素应用2D或3D转换
>1.语法:transform:none | transform-functions
>2.参数:
>>:skew(x-angle,y-angle):定义沿着X和Y轴的2D倾斜转换;
>>:skewX(angle):定义沿着X轴的2D倾斜转换;
>>:skewY(angle):定义沿着Y轴的2D倾斜转换;
CSS3--实现特殊阴影 (实例)的更多相关文章
- CSS3知识之阴影box-shadow
一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow ...
- css3照片墙+曲线阴影
css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- Css3阴影实例
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...
- CSS3的文字阴影—text-shadow
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...
- IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc
1.(推荐:)css插件PIE.htc,这个才是真正完美兼容css3的圆角和阴影属性在IE6环境下使用的效果,但要注意的是:下面的代码必须写在html文件的head标签内,否则无效(不能从外部引用下面 ...
随机推荐
- GIT 中提示 please tell me who you are
如果使用git过程中出现了,please tell me who you are ,需要设置一下使用者的身份. 1.git config user.name "username" ...
- Builder
Builder模式的使用情景 相同的方法, 不同的执行顺序, 产生不同的事件结果 多个部件或零件, 都可以装配到一个对象中, 但是产生的运行结果又不相同 产品类比较复杂, 或者产品类中的调用顺序不同产 ...
- nodejs以及npm的安装
参考资料:http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ 上面的仁兄说的比较清楚,基本解决了安装中遇到的问题 ...
- apache2 添加perl支持
官方文档,很详细了. https://httpd.apache.org/docs/2.0/howto/cgi.html#configuring 我修改了/etc/apache2/sites-ava ...
- U8记账凭证修改方法汇总
在输入记账凭证时,尽管账务系统提供了多种控制错误的措施,但错误凭证的出现是难免的,为此,系统必须能够提供对错误凭证修改的功能.目前,许多财 务软件(如:用友.安易.三门)都提供了“反审核.反记账.反结 ...
- CloudStack的VO在调用setRemoved方法抛异常的原因
今天在开发中发现一个问题,本来想对一个VO对象的removed值赋值,然后去update一下这条记录,一个最简单的set方法,但是在调用时直接抛异常了. 1: public void setRemov ...
- 使用命令行工具将Android应用转换成BlackBerry PlayBook应用
昨天写了篇文章关于Android应用转换的,通过BlackBerry的在线转换工具将Android应用转换成BlackBerry PlayBook应用.有网友反映说方法有点麻烦,所以今天补上新的转换方 ...
- cocos2d win7 安卓环境配置开发
相关工具 下载 Android SDK 下载和安装 Android NDK版本不要选r9的.用r8e!r9会报错 下载安装JDK版本是 jdk-7u13-windows-x64.exe 下载和安装Cy ...
- Android开发目录
1.ADT下载地址整理 2.之前的Android项目报错,新建Android项目报错,代码中找不到错误解决方案 3.错误“Unexpected namespace prefix "xmlns ...
- 简约之美Jodd-http--应用一箩筐
Jodd-http是一个微型的.简约的http client,然而简单而且方便.使用它可以轻松的实现发送请求和读取响应.它的目标就是日常应用变的非常简单,从而简化开发人员的工作. 了解Jodd-htt ...