关闭

CSS3 box-shadow实现纸张的曲线投影效果

标签: 前端csscss3
285人阅读 评论(0) 收藏 举报
分类:

本文地址:http://www.zhangxinxu.com/wordpress/?p=1322

一、简单的前言

一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的。纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果就是本篇的内容了。
实现的曲线投影效果截图 张鑫旭-鑫空间-鑫生活

二、实现原理简介

首先,曲线投影的终效果其实是多投影重叠的效果:一点点倾斜的投影重叠一个直直的投影。
一般的直来直往的投影显然是使用box-shadow属性就可以搞定了。至于那个倾斜的投影,如果是现代浏览器,则需要就是CSS3变换属性transform(具体参见之前的“CSS3 Transitions, Transforms和Animation使用简介与应用展示”一文)。首先是倾斜,5度左右的样子,然后让其在主投影的后面显示就可以了。然后,单单只有倾斜是不够的,因为有一个脚会从一侧露出来,这很好理解。假设两个矩形一样大,位置完全重叠,如果发生旋转,则必定有边角不重合而露出来。即使矩形尺寸不一样,只要其以一个公共的边角旋转,至少会有两个角露出来,而实际上我们只需要一个,也就是斜边投影的哪个角。那么这个问题该如何解决呢,也很简单,同样是transform,不过这回不是旋转,而是拉伸(skew),将规整的矩形拉伸成平行四边形,可避免旋转的时候多余的角露出来。

对于不支持CSS3的IE浏览器,按照上面的原理,理论上也是可以模拟出曲线投影效果的。因为IE下的投影效果可以使用投影滤镜(效果生硬不推荐)实现,或是模糊滤镜实现(推荐),至于旋转也有旋转滤镜。但是,就性能和成本而言,是否应该使用很值得商榷。

三、具体实现

在现代浏览器下,一层标签就可以了。首先,如下HTML:

<div class="curved_box"></div>

相关CSS代码如下:

.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;	
}

使用了content内容生成技术,创建斜边投影。

最后实现的效果就是下面这张图的效果:
实现的曲线投影效果截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:纸张的曲线投影效果demo

如果您使用的是IE浏览器,可能也会看到点效果,大致如下:
IE浏览器下的曲线投影效果 张鑫旭-鑫空间-鑫生活

这是我使用IE滤镜折腾出来的效果。由于IE6~7不支持before、after,所以,IE下投影所在标签的定位我是使用js辅助实现的。所以花的功夫不少,但是最后的效果还是不及Firefox以及Chrome来的逼真。

由于IE滤镜方法不是本文重点,自己也不推荐这种做法,所以这就就不展示IE的实现了。您可以查看页面源代码。

友情提示
这里的斜边投影使用的是负值z-index定位到本体阴影的后面的。由于使用的是z-index负值,所以,请务必保证当前投影元素的所有父标签均没有背景图片或背景色(body标签除外),否则,斜边投影是看不到的。

四、快速结语

所说目前而言,本文实例效果是没有多少实际应用价值的。但是,其中实现的原理,关于content的使用,以及对z-index的一些认识,熟悉CSS3的一些属性还是颇有帮助的。可能不需要多少年,本文的例子就会会很基本很常用的入门实例了,期待那一天的到来。

参考页面:Pure CSS3 box-shadow page curl effect

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1322

(本篇完)

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

实现纸张的曲线投影效果

一、简单的前言 一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的。纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果就是本篇的内...
  • bianjing40
  • bianjing40
  • 2016-07-20 17:51
  • 231

css3 shadow实现的各种漂亮阴影效果

css3 shadow按钮阴影效果Demo代码,很多漂亮的纯CSS3实现图片的各种阴影效果代码,而且按钮的背景色处理的也挺个性,看上去很舒服,阴影的各类也挺多,下阴影、弧线阴影、立体阴影等,相信有一款...
  • life66881
  • life66881
  • 2015-06-08 14:48
  • 1847

CSS特殊样式(六) box-shadow实现纸张的曲线投影效果

总结: 1、box-shadow属性,存在兼容性问题使用时需: -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px ...
  • qq_39198420
  • qq_39198420
  • 2017-07-24 17:01
  • 447

css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)

做完后效果如下: 上面是曲边阴影,下边是翘边阴影。曲边阴影下部是类似弧线,翘边效果四角旁边翘起阴影。 *{ margin:0; padding: 0; } ul{ list-sty...
  • Christine95
  • Christine95
  • 2015-07-14 16:28
  • 1951

CSS3实现精美的纸张折角效果

预备知识 CSS定位 CSS三角实现 CSS圆角及伪类,盒子阴影 在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;
  • bomess
  • bomess
  • 2015-10-28 01:21
  • 3753

探索 CSS3 中的 box-shadow 属性

挖掘你之前未曾见过的一些应用。 “box-shadow”属性 box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”...
  • yeana1
  • yeana1
  • 2016-09-28 15:57
  • 666

探索 CSS3 中的 box-shadow 属性

原文链接:http://web.jobbole.com/87938/ 挖掘你之前未曾见过的一些应用。 PS:文章末尾的 codepen 有8个不错的案例。 “box-shadow...
  • u013063153
  • u013063153
  • 2016-09-27 10:11
  • 615

图像分析:投影曲线的波峰查找

本文转自:
  • kezunhai
  • kezunhai
  • 2014-09-04 09:27
  • 1781

IE下兼容CSS3属性(或IE兼容box-shadow)方法

本文主要讲述IE下兼容CSS3属性的方法,问题来源于我想要在IE下用box-shadow这个属性做阴影,所以会主要围绕box-shadow来讲。 第一种:如果我们想要在IE下兼容CSS3的属性可以使...
  • liona_koukou
  • liona_koukou
  • 2016-09-07 11:44
  • 4341

CSS3实现曲线阴影和翘边阴影

往往我们在做一些特殊的阴影效果的时候,使用图片做背景的方式实际上是很差劲的,在不考虑适配老版本浏览器的前提下,我们可以使用css3的自定义出自己想要的阴影风格。 下面将以曲线阴影和翘边阴影为例,讲解自...
  • u010725720
  • u010725720
  • 2016-10-10 19:48
  • 2618
    个人资料
    • 访问:8179次
    • 积分:130
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:25篇
    • 译文:0篇
    • 评论:0条
    文章分类