|
使用在Safari和WebKit中可用的CSS高級(jí)特性，你可以為你的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用帶來(lái)一個(gè)新的級(jí)別的令人興奮的東西。WebKit是Safari瀏覽器和Google Chrome的渲染引擎。
因?yàn)闉g覽器會(huì)簡(jiǎn)單的無(wú)視他們不支持的CSS屬性，所以在其他瀏覽器中，這些秘訣中的大部分可能會(huì)無(wú)效。使用只用WebKit支持的屬性的網(wǎng)頁(yè)在基于WebKit的瀏覽器中會(huì)有非常出色的視覺(jué)和體驗(yàn)，并且在其他瀏覽器中也會(huì)有某些效果。
注意: 你在本文中看到的-webkit前綴是一個(gè)瀏覽器生產(chǎn)商通常使用的一種方式，它暗示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。比如，box-shadow屬性還只是開(kāi)發(fā)中的CSS3標(biāo)準(zhǔn)的一部分�；贛ozilla的瀏覽器使用-moz前綴。
簡(jiǎn)單的陰影
讓我們從向你展示為網(wǎng)頁(yè)中的任意元素添加陰影效果是多么的簡(jiǎn)單開(kāi)始吧。下面的代碼片段將演示一個(gè)輕微旋轉(zhuǎn)并有陰影的圖片，這兩個(gè)效果都是使用CSS添加的。
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代碼中，transform CSS 屬性實(shí)現(xiàn)圖片旋轉(zhuǎn)，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉(zhuǎn)的角度，或者是陰影的參數(shù)，僅僅調(diào)整那些參數(shù)就OK了。
嘗試一下，你將看到下面演示的旋轉(zhuǎn)圖片效果。
截圖1.圖片選擇和陰影
上面的CSS是在一個(gè)style屬性中，當(dāng)然你可以把它們作為一個(gè)類(lèi)放到一個(gè)style標(biāo)簽或獨(dú)立的樣式文件中。
過(guò)去，服務(wù)器端代碼常常被請(qǐng)求用來(lái)處理圖片來(lái)實(shí)現(xiàn)陰影效果�，F(xiàn)在使用CSS擴(kuò)展你就可以在瀏覽器中實(shí)現(xiàn)它，而且看起來(lái)很棒。
滾動(dòng)與彈出
下一個(gè)示例將演示當(dāng)你把鼠標(biāo)放到一張圖片上事，它會(huì)彈出的效果。實(shí)現(xiàn)這些只需要使用一個(gè)hover樣式和一個(gè)度數(shù)改變。該效果的CSS如下所示。
<style>
img { -webkit-transform: scale(0.5); }
img:hover { -webkit-transform: scale(1); }
</style>
<img src="megan.jpg" />
鼠標(biāo)滑過(guò)圖片，它就會(huì)彈出并變大，如下所示。
截圖2.翻轉(zhuǎn)后的圖片
將鼠標(biāo)從圖片上挪開(kāi)，圖片又會(huì)恢復(fù)原狀。
截圖3.翻轉(zhuǎn)之前的圖片
正如你所能看到的那樣，你可以使用幾行CSS來(lái)實(shí)現(xiàn)這個(gè)效果。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 用于WebKit的CSS訣竅 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 用于WebKit的CSS訣竅 [1]
第 2 頁(yè) 
