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 ...
随机推荐
- Maven父工程
1.创建Maven工程时 Packaging 选项为 pom 2.父工程目录结构只有pom.xml(父工程不进行编码) 3.需要的依赖信息在父工程中定义,子模块继承 5.将各个子模块聚合到一起 6.将 ...
- hadoop/hdfs/yarn 详细命令搬运
转载自文章 http://www.cnblogs.com/davidwang456/p/5074108.html 安装完hadoop后,在hadoop的bin目录下有一系列命令: container- ...
- hadoop的块
http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_design.html http://www.cnblogs.com/cloudma/articles/had ...
- zookeeper(1)初识zookeeper
一.zookeeper的安装 1.下载zookeeper(当然在安装zookeeper之前得先装好jdk,这里就不说了),版本自己随便选一个(后面我再说版本的问题),点击这里下载. 2.然后在usr下 ...
- 【Flex】自定义组件学习
文件列表 主文件: index.mxml 自定义组件 components.mylogo.mxml 图img a.jpg 2 mylogo.mxml <s:Group xmlns:fx=&q ...
- 转载 :实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(一)
在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子详解这两个函数的作用.虽然Q ...
- django之ForNode是如何渲染的
django的模板编译后变成一般text.tag.varible,然后根据上下文进行渲染. class ForNode(Node): child_nodelists = ('nodelist_l ...
- Mysql 视图使用
视图 简单理解视图就是一张虚拟表,可以简化一些复杂查询语句 举个简单的例子来理解视图 视图是虚拟的表,与包含数据的表不一样,视图只包含使用时动态检索数据的查询:不包含任何列或数据.使用视图可以简化复杂 ...
- sql 日期格式
select CONVERT(varchar(10), getDate(),121) --不要时间2002-01-01 select CONVERT(varchar(10), getDate(),12 ...
- 什么是ThreadLocal
当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程所对应的副本.ThreadLocal ...