設(shè)計(jì)師常常使用一些獨(dú)特的字體效果和頁面效果,陰影是其中一個(gè),它可以讓頁面中的文字和元素具有立體的效果,從而被突出出來。比如對(duì)于文字陰影,傳統(tǒng)的方法可能需要將文字切出來,直接使用圖片,如果考慮SEO和網(wǎng)站性能,還可能會(huì)使用CSS Sprites等技術(shù)將圖片整合: h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} 這是很棘手的事情,拼合圖片會(huì)花掉你的大量時(shí)間,而且為了實(shí)現(xiàn)更好視覺效果,你可能還要使用高質(zhì)量的32位png圖片,這又要讓你面對(duì)該死的IE 6的png透明問題! 事實(shí)上,對(duì)于文字的陰影效果,我們完全可以用CSS來實(shí)現(xiàn)! 可以查看 查看demo 先。 Text-shadow text-shadow可以讓我們實(shí)現(xiàn)完美的文字陰影效果;緦懛ǎ text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]... 或者 text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]... 這里的顏色就是陰影的顏色,你可以將顏色寫在前面,也可以寫在最后。x軸和y軸分別是其陰影的偏移位置,模糊半徑可以理解為陰影長度。而且現(xiàn)在大部分瀏覽器都支持多層陰影,你可以用逗號(hào)分開多組設(shè)置(當(dāng)然也可以只是用單個(gè)設(shè)置)。 text-indent:2em; 效果如下圖: #FormatImgID_0# 該屬性目前被除IE之外的大部分瀏覽器支持,對(duì)于IE,我們可以使用shadow濾鏡來實(shí)現(xiàn): 你可能已經(jīng)注意到,使用shadow濾鏡只能定義角度 direction,而不能定義xy軸,z軸也被換成了strength。注意,使用該濾鏡的時(shí)候,不能夠設(shè)置背景顏色,否則濾鏡將無效!另外如果你的數(shù)學(xué)不是很好,不太懂三角函數(shù)的算法,你可以使用IE的另外一個(gè)濾鏡:dropshadow: filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true'); 好吧,IE總是會(huì)拖我們的后腿,不過值得一提的是,IE的這兩個(gè)濾鏡是支持多層陰影的!比如,可以這樣寫: filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true') dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true') dropshadow(OffX=2, OffY=2, Color='blue', Positive='true'); 欲了解更多關(guān)于IE的這兩個(gè)濾鏡,請(qǐng)查看:Shadow 和 Dropshadow 讓我們看一個(gè)多層陰影的例子(這里無視了IE): text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);} 效果如圖: #FormatImgID_1# 這里我們使用到了rgba色彩,它是一種在CSS中同時(shí)聲明顏色及其透明度的一種方法,且被大多數(shù)A級(jí)瀏覽器支持的色彩屬性(除了IE),了解更多請(qǐng)查看:《RGBa色彩的瀏覽器支持》——同時(shí)我們推薦對(duì)于純色半透明的情況使用這種簡(jiǎn)單的寫法。 |
![]() | ![]() .. 定價(jià):¥133 優(yōu)惠價(jià):¥133.0 更多書籍 |
![]() | ![]() .. 定價(jià):¥124 優(yōu)惠價(jià):¥124.0 更多書籍 |