加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

给带颜色的背景上做黑色阴影会让效果失真！

2011-11-16 22:42:13

也就是说，“不要在带有颜色的背景上使用黑色的阴影。”在青岛网站设计的每一各阶段，我都要注意到这一点。例如，在Photoshop中添加投影作为图层样式时，不要只是选择黑色或者灰色，最好从背景中取一个颜色，通过调整不透明度把它调暗，直到它看上去像是阴影一样。这是因为在现实中阴影并不是黑色的。它们是在其之上的任何东西的更暗的版本，因为那里光线要少一些。查看下面图片中的阴影，如果你试着重新ജ做出这个阴影的效果，那么会觉得任何不透明度的黑色看上去都不会很好。

shadow

由于在我们的CSS工具箱里有了RGBa，我听说和看到大家给背景和阴影使用调整到黑色的方法（例如，rgba(0,0,0,0.5)）。这种做法的原因是这样：“由于透明度的原因，阴影的颜色ꦇ将会混合着背景色”。是的，的确是这样，但是它也会混合着黑色，并非是单纯背景色的更深的调子的版本。

听说Dan Cederholm在An Event Apart和Bulletproof Web Design教授这种方法。Meagan Fischer最近在教程里也使用了黑色作为阴影颜色，因此我们并非否定他们的方法。因为黑色可以在任何背景色上显示出相同的效果，而有色调的阴影只能在那个色调上༺应用𓃲。

我们的观点是，如果你想要改变背景颜色，那么你也要在CSS中作出更改。因此如果你那样做的话，💮不妨也改变一下阴影的色调。如果你无法掌控文字或者盒模型的阴影是什么样，使用黑色。如果能🍷的话，使用有色调的阴影。

查看示例

译者注：

RGBa代表Red Green Blue Alpha。也就是RGB再加上Alpha，是通过给每一像素多分配一部分空间来存储透明信息，从而实现真透明效果。更多的解释见维基百科。

rgba(0,0,0,0.5)这个值的前三个数字0,0,0代表黑色，最后一个数值0.5代表透🍌明度，也就是半透明的效果。

0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360