html阴影效果怎么做,如何利用CSS3阴影效果制作出立体感效果
使用的两个CSS3属性:box-shadow、transform,基本语法:
box-shadowbox-shadow:5px 2px 6px #000;
数值从左至右:阴影水平偏移值(正值向右,负值向左);阴影垂直偏移值(正值向下,负值向上);阴影模糊值;阴影颜色。
transform
transform的效果很多,这里只用了旋转:transform: rotate(-3deg)
数值表示旋转的角度,正值为顺时针,负值为逆时针。
因为CSS3还是草案,所以现有浏览器的最新版都是以私有属性来支持transform,需要加上-webkit-、-moz-、-o-、-ms-
具体实现思路:为了突显立体感,要让阴影左右重中间轻,这里使用了::before,::after伪元素,创建并让它们定位在#Demo元素后(z-index:-1),同时设置阴影,并设置旋转,把思路用图片来表示就是这样:
这就是我们想要的效果了,具体代码看:
CSS#demo{
display:inline-block;
position:relative;
margin:50px;
padding:20px;
background:#fafafa;
box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
-moz-border-radius:4px;
border-radius:4px;
color:rgba(0,0,0, 0.8);
text-shadow:0 1px 0 #fff;
}
#demo::before, #demo::after{
position:absolute;
content:"";
top:10px;
bottom:15px;
left:10px;
width:50%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
z-index:-1;
}
#demo::after{
right:10px;
left:
auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform: rotate(3deg);
}
#demo img{ vertical-align:bottom;}
HTML
html阴影效果怎么做,如何利用CSS3阴影效果制作出立体感效果相关推荐
- 利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
- ae破碎效果在哪_利用Ae制作出破碎效果的详细步骤
伙伴们知道在其中如何制作出破碎效果呢?不太了解的可以去下文看看利用Ae制作出破碎效果的详细步骤. 首先,打开我们的软件,AE,小编用的是CS6版本的,不过即使版本不同,其中的操作也都是大同小异哦. 打 ...
- css3三角形兼容_利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 制作 JS 广告的简易入门(二)利用 CSS3 技术制作广告
HTML5 Family: CSS3 Ads Versus Flash Ads http://www.sencha.com/blog/html5-family-css3-ads-versus-flas ...
- 如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图:(样式有点丑,可以忽 ...
- wps数据库三线表怎么做_利用WPS文字制作三线表格
在制作统计类数据表格时我们通常都是制作三线表格来进行数据整理和统计的,那么如何制作三线表格呢?下面小编利用WPS文字教大家具体的制作步骤和方法. ①第一步我们首先通过WPS文字的"绘制表格& ...
- 利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西 1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline- ...
- 利用js来制作简单倒计时效果
利用JavaScript函数做一个简单的倒计时 <script>// 代码如下:function countDown(time) {var nowTime = +new Date(); / ...
最新文章
- 在下列选项中,没有构成死循环的程序的是?
- 视频直播关键技术:流畅、拥塞和延时追赶
- AT3857-[AGC020C]Median Sum【背包,bitset】
- axure选中后横线切换_3、开关状态切换 —— Axure实用交互
- 转(HP大中华区总裁孙振耀退休感言)
- DxO PhotoLab 5 for mac(raw图片处理软件)
- Twaver-HTML5基础学习(1)两点一线
- 序列化字段的跨表查,choice字段显示中文,
- 华为服务器jbod修改启动项,服务器设置jbod
- 懂你的心 愿您的笑颜永在阳光下挥洒
- 已解决:Connection timed out: connect. If you are behind an HTTP proxy, please configure the proxy
- 微信小程序毕业设计 基于微信小程序在线电子书阅读系统开题报告
- 考研数学随笔(2)——微分积分关系,中值定理
- Arcface v3 论文翻译与解读
- POI问题总结,关于数字级联及多级级联(三级以上)
- 我的物联网项目(二十三) 统计数据优化
- 技术封锁倒逼自主创新:中国进入空间站时代,这三大自主创新技术不输美俄!
- BadUSB橡皮鸭WinLinux通用下载者
- 麦克风声源定位原理_基于麦克风阵列声源定位系统最新版
- 数据越多,AI决策模型越脆弱