也就是說，“不要在帶有顏色的背景上使用黑色的陰影。”在青島網(wǎng)站設(shè)計(jì)的每一各階段，我都要注意到這一點(diǎn)。例如，在Photoshop中添加投影作為圖層樣式時(shí)，不要只是選擇黑色或者灰色，最好從背景中取一個(gè)顏色，通過調(diào)整不透明度把它調(diào)暗，直到它看上去像是陰影一樣。這是因?yàn)樵诂F(xiàn)實(shí)中陰影并不是黑色的。它們是在其之上的任何東西的更暗的版本，因?yàn)槟抢锕饩€要少一些。查看下面圖片中的陰影，如果你試著重新做出這個(gè)陰影的效果，那么會覺得任何不透明度的黑色看上去都不會很好。
由于在我們的CSS工具箱里有了RGBa，我聽說和看到大家給背景和陰影使用調(diào)整到黑色的方法（例如，rgba(0,0,0,0.5)）。這種做法的原因是這樣：“由于透明度的原因，陰影的顏色將會混合著背景色”。是的，的確是這樣，但是它也會混合著黑色，并非是單純背景色的更深的調(diào)子的版本。
聽說DanCederholm在AnEventApart和BulletproofWebDesign教授這種方法。MeaganFischer最近在教程里也使用了黑色作為陰影顏色，因此我們并非否定他們的方法。因?yàn)楹谏梢栽谌魏伪尘吧巷@示出相同的效果，而有色調(diào)的陰影只能在那個(gè)色調(diào)上應(yīng)用。
我們的觀點(diǎn)是，如果你想要改變背景顏色，那么你也要在CSS中作出更改。因此如果你那樣做的話，不妨也改變一下陰影的色調(diào)。如果你無法掌控文字或者盒模型的陰影是什么樣，使用黑色。如果能的話，使用有色調(diào)的陰影。
查看示例
譯者注：
RGBa代表RedGreenBlueAlpha。也就是RGB再加上Alpha，是通過給每一像素多分配一部分空間來存儲透明信息，從而實(shí)現(xiàn)真透明效果。更多的解釋見維基百科。
rgba(0,0,0,0.5)這個(gè)值的前三個(gè)數(shù)字0,0,0代表黑色，最后一個(gè)數(shù)值0.5代表透明度，也就是半透明的效果。
|