6. 文字陰影
盡管在CSS2中就已經存在,text-shadow 是一個未被廣泛應用的CSS屬性。但是它將在CSS3中被廣泛采用。這個屬性給設計師一個新的跨瀏覽器的工具來為設計添加一個維度以使文字醒目。
盡管這樣,你需要確認,你的設計中的文字是可讀的,以防用戶的瀏覽器不支持CSS3高級屬性。給文字和背景色彩足夠的對比度以防text-shadow 屬性不能被瀏覽器正確渲染或理解。
Beakapp 在它的網站中使用了text-shadow 屬性:內容區(qū)域.
BeakApp.com 為內容區(qū)域使用了text-shadow 屬性,為文字添加深度和維度 并讓它變得醒目——而不是使用某種圖片替換技術。該屬性目前只在Safari和Chrome中可用。
該網站的主菜單使用的CSS如下: .signup_area p { text-shadow: rgba(0,0,0,.8) 0 1px 0; }
這里我們使用陰影顏色(使用了RGBA,前面有描述), 然后是右(x 坐標) 和底部(y 坐標) 偏移,最后是模糊半徑
如果要在一個文字上使用多陰影,可以使用逗號分開。比如:
Internet Explorer 不支持它,F(xiàn)irefox 將在即將發(fā)行的3.5版本中支持。
擴展閱讀:
出處:藍色理想
責任編輯:bluehearts
上一頁 用CSS3將你的設計帶入下個高度 [6] 下一頁 用CSS3將你的設計帶入下個高度 [8]
◎進入論壇網頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|