CSS阴影与翻转

阴影、反射、旋转等等无疑都是CSS3有趣的新特性之一，我们虚拟世界的物体脱离了简单的二维平面和复杂的拟物之后，越来越有自己的灵魂了

Ps. 部分效果不支持低版本IE浏览器

Material Design中的阴影

根据「Material Desgin - Light and shadow」中的解释

Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles

在Material Design中，阴影的产生模仿了自然环境下投影光和散射光的组合，由两成阴影构成，这显得更加真实

在CSS中，可以通过box-shadow来实现同样的效果，box-shadow可以设置6个值：2个必选项：x轴偏移量和y轴偏移量，4个可选项：模糊程度、阴影延展、阴影颜色和是否为内部阴影，并且可以设置多个阴影，下面分别是Material Design中五种不同层级的的阴影效果的前端实现

代码：

.z-depth1{
  box-shadow: 
    0px 1px 1.5px rgba(0,0,0,0.12),
    0px 1px 1px rgba(0,0,0,0.24);
}
.z-depth2{
  box-shadow: 
    0px 3px 3px rgba(0,0,0,0.16),
    0px 3px 3px rgba(0,0,0,0.23);
}
.z-depth3{
  box-shadow: 
    0px 10px 10px rgba(0,0,0,0.19),
    0px 6px 3px rgba(0,0,0,0.23);
}
.z-depth4{
  box-shadow: 
    0px 14px 14px rgba(0,0,0,0.25),
    0px 10px 5px rgba(0,0,0,0.22);
}
.z-depth5{
  box-shadow: 
    0px 19px 19px rgba(0,0,0,0.3),
    0px 15px 6px rgba(0,0,0,0.22);
}

利用伪元素实现3D效果

通过伪元素的帮助，box-shadow还可以实现一些十分逼真的3D效果

代码：

.box1:before, .box2:after, .box3:before, .box3:after, .box4:before, .box4:after, .box5:before, .box5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 10px;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.box2:after, .box3:after
{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}
.box4, .box5
{
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box4:before, .box4:after
{
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:0;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
}
.box5:before, .box5:after
{
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:10px;
  bottom:10px;
  left:0;
  right:0;
  border-radius:100px / 10px;
}
.box4:after, .box5:after
{
  right:10px;
  left:auto;
  transform:skew(8deg) rotate(3deg);
}

其中，涉及到了元素的z-index的设置，由于z-index是依据当前stacking context判定的，所以上面的阴影实现中，并不能为box元素设置z-index，否则阴影的层级将失效，更多内容可以参考「The Stacking Context」

特殊文字效果

同时，如果使用不同颜色的阴影的话，也可以实现更多的效果，比如火焰文字和霓虹文字

代码：

.fire-text{
  text-shadow: 
    0 0 5px #fff,
    0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;
}
.neon-text{
  text-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #ff00de,
    0 0 70px #ff00de,
    0 0 80px #ff00de,
    0 0 100px #ff00de,
    0 0 150px #ff00de;
}
.emboss-text {
  color: transparent;
  text-shadow: 
    0 0 5px #2D0F00,
    -1px 1px #fff,
    1px -1px #000; 
}
.solid-text {
  text-shadow: 
    1px 1px #212121,
    2px 2px #212121,
    3px 3px #212121,
    4px 4px #fafafa,
    5px 5px #fafafa,
    6px 6px #fafafa; 
}

IE7~IE8兼容

box-shadow属性从IE9.0开始支持，如果想在IE9.0以下版本提供支持，可参考下面的代码（代码来自：「CSS-Tricks」，未测试）

  

    Box-shadowed element
  

卡片翻转效果

卡片翻转一直是我最喜爱的前端效果之一，实现很简单，但完美实现也并不是那么容易，下面是我第一个卡片翻转的实现

可以看到其中的文字在翻转时是有一个先消失，再出现的过程的，因为我这里对文字的处理是在 “hide” 和 “visible” 之间进行切换，而这显然与我们印象中的“卡片翻转”颇有不符，尤其是当卡片趋于透明的时候，这种破绽尤为明显

显然，这个效果并不令人满意，可以使用backface-visibility、perspective等属性进行改善，但是这两个属性的浏览器兼容性并不好（IE10.0和Firefox支持，其他浏览器需要Hack），可实现如下效果

上面的卡片翻转已经解决了文字消失－出现的问题，还使用了阴影、摆动等进行修饰，接近一个令人满意的结果，代码如下：（部分浏览器不支持）

.card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
.card div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .back {
  transform: rotateY(180deg);
}
.card.flipped {
  transform: rotateY(180deg);
}
$('.card').on('click', function () {
  $('.card').toggleClass('flipped');
});

参考

[1]Material - Light and shadow
Material Design官方关于两层阴影效果的解释
[2]如何理解 Material Design 中卡片的两层阴影？
知乎上关于阴影效果的讨论，关于阴影的曲线，颇有启发
[3]Box-shadow, one of CSS3′s best new features
[4]在线css3阴影效果测试
[5]w3c官方文档 － Shadow Effect
[6]CSS探索之旅 - Web前端实验室，大量关于css阴影属性的demo
[7]ettrics的博客，大量关于Material Design的web端实现
[8]CSS Tricks － box-shadow
[9]The Stacking Context