CSS3 box-shadow实现纸张的曲线投影效果
一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的。纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果。
<div class="curved_box"></div>
.curved_box {display: inline-block;*display: inline;width: 200px;height: 248px;margin: 20px;background-color: #fff;border: 1px solid #eee;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;position: relative;*zoom: 1;}.curved_box:before {-webkit-transform: skew(-15deg) rotate(-6deg);-moz-transform: skew(-15deg) rotate(-6deg);transform: skew(-15deg) rotate(-6deg);left: 15px;}.curved_box:after {-webkit-transform: skew(15deg) rotate(6deg);-moz-transform: skew(15deg) rotate(6deg);transform: skew(15deg) rotate(6deg);right: 15px;}.curved_box:before, .curved_box:after {width: 70%;height: 55%;content: ' ';-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);position: absolute;bottom: 10px;z-index: -1;}
CSS3 box-shadow实现纸张的曲线投影效果的更多相关文章
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- css3 Box model 与 Box-sizing
1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- 【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...
- CSS魔法堂:Box-Shadow没那么简单啦:)
前言 说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- HTML5 拖放:在相册中对照片进行排序
1. [代码]index.html <div class="albums"> <div class="album" id=&qu ...
随机推荐
- mybatis关系映射之一对多和多对一
本实例使用用户(User)和博客(Post)的例子做说明: 一个用户可以有多个博客, 一个博客只对应一个用户 一. 例子(本实体采用maven构建): 1. 代码结构图: 2. 数据库: t_user ...
- spark 实现TOP N
数据量较少的情况下: scala> numrdd.sortBy(x=>x,false).take(3) res17: Array[Int] = Array(100, 99, 98) sca ...
- SPARK快学大数据分析概要
Spark 是一个用来实现快速而通用的集群计算的平台.在速度方面,Spark 扩展了广泛使用的MapReduce 计算模型,而且高效地支持更多计算模式,包括交互式查询和流处理.在处理大规模数据集时,速 ...
- canal 入门(基于docker)
第一步:安装MySQL:(可以参考:https://my.oschina.net/amhuman/blog/1941540) 命令: sudo docker run -it -d --restart ...
- idea 关闭自动保存,未保存星号提醒, springboot + freemarker 热部署
1,自动保存 File > setting 去掉下图勾选 2,未保存文件星号提示 File > Settings 3,spring boot 项目 热部署 3.1,pom文件添加依赖 &l ...
- ThinkPHP输入验证和I方法使用
在Web开发过程中,我们经常需要获取系统变量或者用户提交的数据,这些变量数据错综复杂,而且一不小心就容易引起安全隐患,但是如果利用好ThinkPHP提供的变量获取功能,就可以轻松的获取和驾驭变量了. ...
- Human Interface Device (HID) Class Decoder
http://www.usblyzer.com/usb-human-interface-device-hid-class-decoder.htm Human Interface Device (H ...
- delphi多语言
LoadLangFromStrings http://docwiki.embarcadero.com/Libraries/Berlin/en/FMX.Types.TLang http://blog.c ...
- delphi 控件编辑器
控件编辑器和属性编辑器类似 http://www.rgzz.sdedu.net/ebook/hdbook/computer/bc/delphizhuanti/rmjq/028.htm TCommonD ...
- 使用Prometheus+Grafana监控MySQL实践
一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采 ...