close
網頁設計字體上微妙的陰影
在之前沒有CSS3時候,字體陰影除非切成圖片,所以沒有用過,但是現在陰影效果可以用CSS3來實現了,現在對于網頁設計者來說已經不陌生了。許多網站很早就開始使用它們並且經常模擬平面深度及二維介質。陰影和高亮可以微妙但強有力地改善我們網站的用戶體驗。
我們在設計中采用CSS3,它可以帶來的宏偉的差異讓我們很容易爲之興奮不已。而對于我來說,真正值得興奮是有多少細節工作可網頁設計以從圖片處理軟件轉移到我們網站的代碼上去,前端實現上對于設計師的發散思維上少了很多局限。
還是來看這個網站,它是一個很不錯的例子,使用巧妙而有效地使用文字陰影效果使網站內容更容易閱讀。這裏以兩種方式使用了 CSS3的text-shadow屬性。首先灰色的標題在與網頁設計背景顔色相近的情況下,被賦予淡淡的陰影以産生內嵌式的效網頁設計公司果。基次在段落後面簡單地給白色一點網頁設計 發射效果。
我們在做效果圖的時候只要copy一個圖層錯開一個像素,顔色效果調到足夠柔和,不可過于強烈,台中網頁設計不然很容易讓整個設計看起來有一種髒髒的感覺,顯得不夠精致。同理右側的世界地圖錯開一像素。
差異
比較上面的截圖以及同樣的頁面在IE8(不支持text-shadow屬性)下渲染的效果,我們就能發現它更難看得很多。
下面我發一些其他的效果圖,看看那些地方用到了襯線,文字上用到了陰影,看一下用與不用之後的對比!親,都是一像素哦。
全站熱搜
留言列表