技術(shù)資訊
給帶顏色的背景上做黑色陰影會讓效果失真！
2011-11-16 22:42:13
也就是說，“不要在帶有顏色的背景上使用黑色的陰影。”在青島網(wǎng)站設(shè)計的每一各階段，我都要注意到這一點。例如，在Photoshop中添加投影作為圖層樣式時，不要只是選擇黑色或者灰色，最好從背景中取一個顏色，通過調(diào)整不透明度把它調(diào)暗，直到它看上去像是陰影一樣。這是因為在現(xiàn)實中陰影并不是黑色的。它們是在其之上的任何東西的更暗的版本，因為那里光線要少一些。查看下面圖片中的陰影，如果你試著重新做出這個陰影的效果，那么會覺得任何不透明度的黑色看上去都不會很好。
由于在我們的CSS工具箱里有了RGBa，我聽說和看到大家給背景和陰影使用調(diào)整到黑色的方法（例如，rgba(0,0,0,0.5)）。這種做法的原因是這樣：“由于透明度的原因，陰影的顏色將會混合著背景色”。是的，的確是這樣，但是它也會混合著黑色，并非是單純背景色的更深的調(diào)子的版本。
聽說Dan Cederholm在An Event Apart和Bulletproof Web Design教授這種方法。Meagan Fischer最近在教程里也使用了黑色作為陰影顏色，因此我們并非否定他們的方法。因為黑色可以在任何背景色上顯示出相同的效果，而有色調(diào)的陰影只能在那個色調(diào)上應(yīng)用。
我們的觀點是，如果你想要改變背景顏色，那么你也要在CSS中作出更改。因此如果你那樣做的話，不妨也改變一下陰影的色調(diào)。如果你無法掌控文字或者盒模型的陰影是什么樣，使用黑色。如果能的話，使用有色調(diào)的陰影。
查看示例
譯者注：
RGBa代表Red Green Blue Alpha。也就是RGB再加上Alpha，是通過給每一像素多分配一部分空間來存儲透明信息，從而實現(xiàn)真透明效果。更多的解釋見維基百科。
rgba(0,0,0,0.5)這個值的前三個數(shù)字0,0,0代表黑色，最后一個數(shù)值0.5代表透明度，也就是半透明的效果。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢？為什么要開發(fā)微信小程序？
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少？
延伸閱讀
- [2014-12-06 01:06:15] 最新的網(wǎng)站優(yōu)化原則和方法
- [2014-12-20 11:23:04] 響應(yīng)式網(wǎng)頁你了解嗎？
- [2012-12-08 09:51:03] 網(wǎng)頁嵌入特殊字體
- [2012-02-19 21:04:27] 網(wǎng)頁設(shè)計細節(jié)的處理
- [2012-01-13 09:31:23] 網(wǎng)站設(shè)計制作的流程有哪些
- [2014-11-04 19:07:12] 幾點更新網(wǎng)站比較好
- [2015-03-21 18:30:06] 如何做好企業(yè)網(wǎng)站優(yōu)化才是關(guān)鍵？
- [2015-02-09 08:56:17] 即興創(chuàng)作需要有效的設(shè)計溝通與探討
- [2011-10-24 23:08:40] 如何讓論壇和博客廣告不被刪除？
- [2014-11-08 23:01:19] 如何在百度知道發(fā)外鏈
- [2012-02-10 15:15:01] 不被處罰的DIV隱藏連接方法
- [2016-02-29 13:33:31] 織夢讀取服務(wù)器年份日期
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
H5定制設(shè)計 青島網(wǎng)站制作 青島海洋投資集團 企業(yè)建站 舒適的界面 網(wǎng)站優(yōu)化 網(wǎng)頁設(shè)計 網(wǎng)站交互設(shè)計 平面設(shè)計 輪胎網(wǎng)站設(shè)計 網(wǎng)站設(shè)計趨勢 力圖數(shù)字科技 網(wǎng)站規(guī)劃 網(wǎng)站策劃 力圖 青島網(wǎng)站營銷 青島輪胎網(wǎng)站設(shè)計 扁平化設(shè)計 集團公司網(wǎng)站建設(shè) 良好的導(dǎo)航 互聯(lián)網(wǎng) 圖形網(wǎng)格 企業(yè)網(wǎng)站 青島網(wǎng)頁制作 青島抖音小程序開發(fā) 青島SEO 手機端的網(wǎng)站 視覺靈感 青島flash網(wǎng)站 中小型企業(yè)網(wǎng)站建設(shè)
