用CSS创造现实的思考

在设计中，反射是对象的程式化镜像。即使它们不像阴影那样受欢迎，他们也有自己的时刻 - 只是想一想您第一次探索MS Word或PowerPoint中的不同字体格式：我敢打赌，反思是您的第二高风格，在Shadow旁边，旁边是诸如轮廓和光芒之类的其他人。或者，也许您还记得当苹果在几乎所有事物上都使用它们时，反思又回来了。

反射仍然很酷！与过去几年不同，我们实际上可以对CSS进行反思！这是我们将在本文中制作的：

反射设计有两个步骤：

1. 创建原始设计的副本。
2. 该副本的样式。

现在，在CSS中获得镜像的最真实和标准化方法是使用元素（）属性。但是它仍处于实验阶段，并且在撰写本文时仅在Firefox中得到支持。如果您很好奇，可以查看我写的这篇文章。

So, rather than element(), I'm going to add two of the same designs and use one as the reflection in my examples.您可以使用JavaScript编码此部分是动态的，也可以使用伪元素，但是在我的演示中，我每个设计都使用一对相同的元素。

 <div>
  <div>饰品</div>
  <div>饰品</div>
</div>

 .Units> * {
  背景图像：URL（'image.jpeg'）;
  背景剪辑：文字；
  颜色：透明；
  /* ETC。 */
}

原始设计是由背景图像，透明文本颜色和具有其文本值的背景式属性组合创建的淘汰文本图形。

然后，两对的底部元素倒置，然后使用变换靠近原始设计。这是反思：

 .Units>：Last-Child {
  变换：rotatex（180DEG）Translatey（15px）; 
}

如今已抬高的底部元素将采用一些样式，以对反射产生褪色和其他图形效应。可以使用线性梯度图像作为掩盖层上的掩码层来实现反射的逐渐褪色。

 .Units>：Last-Child {
  变换：rotatex（180DEG）Translatey（15px）; 
  面具图像：线性梯度（透明50％，白色90％）；
}

默认情况下，蒙版图像属性的掩模模式为alpha。这意味着图像的透明部分，当图像用作元素的掩模层时，也将其相应的元素透明区域转动。这就是为什么顶部透明级别的线性梯度在最后逐渐减少了颠倒的反射。

我们还可以在不合并它们的情况下尝试其他梯度样式。以条纹为例。我从前添加了模式以及淡出的效果。

 .Units>：Last-Child {
  / * ... */
  面具图像： 
    重复线性奖学金（透明，透明3PX，白色3PX，白色4PX），
    线性梯度（透明50％，白色90％）；
}

或这个带有径向梯度的人：

 .Units>：Last-Child {
  / * ... */
  面具图像：径向梯度（中心圆，白色，透明50％）；
}

另一个想法是通过将Skew（）添加到变换属性中来变形。这为反思带来了一些运动。

 .units > :last-child {
  / * ... */
  变换：rotatex（180DEG）Translatey（15px）偏斜（135DEG）Translatex（30px）;
}

当您需要反射是微妙的，更像阴影时，然后将其模糊，更亮或降低其不透明度，就可以解决问题。

 .Units>：Last-Child {
  / * ... */
  过滤器：Blur（4px）亮度（1.5）;
}

有时，反射本身也可能是阴影本身，因此，我尝试给反射一系列与原始设计相吻合的红色，蓝色和绿色颜色的半透明阴影，而不是使用背景图像（来自原始设计）或块颜色。

 .Units>：Last-Child {
  / * ... */
  文字阴影： 
    0 0 8PX RGB（255 0 0 / .4），
    -2PX -2PX 6PX RGB（0 255 0 / .4），
    2PX 2PX 4PX RGB（0 255 255 / .4）;
}

这些RGB（）值看起来很奇怪吗？这是一种新的语法，是一些令人兴奋的新CSS颜色功能的一部分。

让我们将所有这些方法融合在一起：

总结

The key to a good reflection is to go with effects that are subtler than the main object, but not so subtle that it's difficult to notice.然后还有其他考虑因素，包括反射的颜色，方向和形状。

希望您从中得到一些灵感！当然，我们在这里查看的只是文本，但是反射可以很好地适用于设计中的任何引人注目的元素，该设计具有足够明智的空间，并且可以从反射中受益，以提高页面上的自身。

以上是用CSS创造现实的思考的详细内容。更多信息请关注PHP中文网其他相关文章！