box-shadow实现曲线投影效果

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

二、实现原理简介

首先,曲线投影的终效果其实是多投影重叠的效果:一点点倾斜的投影重叠一个直直的投影。
一般的直来直往的投影显然是使用box-shadow属性就可以搞定了。至于那个倾斜的投影,如果是现代浏览器,则需要就是CSS3变换属性transform。首先是倾斜,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内容生成技术,创建斜边投影。

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

四、快速结语

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值