css3


CSS3文字陰影在網頁設計中的應用
 

陰影文字和發光文字

一個最簡單的陰影文字是如下這樣寫的,其中 1px 2px 代表陰影相對於文字向右下方向偏移了 1px 2px, 可以為負值;5px 代表陰影的模糊半徑,取值越大,陰影越擴散看不見。最後是陰影顏色。這樣的陰影適合字號比較大的文字。

text-shadow: 1px 2px 3px #777;

text-shadow: 0 0 6px #FF0;


浮雕文字


浮雕文字效果在 Mac OS X 和 iPhone 中隨處可見,由於陰影半徑很小,一般是 0 或 1px, 所以也適合小號的文本。在使用上一般遵循這個原則:深色文字淺色背景,用白陰影,淺色文字深色背景,用黑陰影。

text-shadow: 0 1px 0 #eee; 凹進效果

text-shadow: 0 -1px 0 #000; 凹進效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #000; 凸出效果


多重陰影


在上面所列的新版瀏覽器中都已經支持多重陰影,可以達到一些特殊的效果,不過注意,如果文字和背景顏色接近,IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

創作者介紹

狐狸搞設計

哈士奇 發表在 痞客邦 PIXNET 留言(0) 人氣()