WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。
使用在WebKit中可用的CSS高級特性，可以為你的網站或網絡應用帶來一個新的更令人興奮的東西。
在閱讀下面文章前，你可以先了解下腳本之家以前介紹的WebKit文章：瀏覽器Apple Safari和Google Chrome內核webkit
WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。
因為瀏覽器會簡單的無視他們不支持的CSS屬性，所以在其他瀏覽器中，這些訣竅中的大部分可能會無效。使用只有WebKit支持的CSS屬性的網頁在基于WebKit的瀏覽器中會有非常出色的視覺效果和體驗，并且在其他瀏覽器中也可能會有某些效果——至少不會有負面的影響。
注意: 你在本文中看到的-webkit前綴是一個瀏覽器生產商通常使用的一種方式，它暗示該CSS屬性或規(guī)則尚未成為W3C標準的一部分。比如，box-shadow屬性還只是開發(fā)中的CSS3標準的一部分?；贛ozilla的瀏覽器使用-moz前綴。 1.簡單的陰影
讓我們從向你展示為網頁中的任意元素添加陰影效果是多么的簡單開始吧。下面的代碼片段將演示一個輕微旋轉并有陰影的圖片，這兩個效果都是使用CSS添加的。
1
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代碼中，transform CSS 屬性實現(xiàn)圖片旋轉，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉的角度，或者是陰影的參數，僅僅調整那些參數就OK了。
嘗試一下，你將看到下面演示的旋轉圖片效果。

截圖1.圖片選擇和陰影
上面的CSS寫在一個img標簽的style屬性中，當然你可以把它們作為一個類放到一個style標簽或獨.立的樣式文件中。
過去，常常使用服務器端代碼來處理圖片以實現(xiàn)陰影效果，現(xiàn)在使用簡單的CSS樣式你就可以在客戶端瀏覽器中實現(xiàn)它，而且看起來很棒。 2.翻轉與彈出
下一個示例將演示當你把鼠標放到一張圖片上時，它會彈出的效果。實現(xiàn)這些只需要使用一個hover樣式和一個度數改變。該效果的CSS如下所示。
1 2 3 4
<style> img { -webkit-transform: scale(0.5); } img:hover { -webkit-transform: scale(1); } </style>
1
<img src="megan.jpg" />
鼠標滑過圖片，它就會彈出并變大，如下所示。

截圖2.翻轉后的圖片
將鼠標從圖片上挪開，圖片又會恢復原狀。

截圖3.翻轉之前的圖片
正如你所能看到的那樣，你可以使用幾行CSS來實現(xiàn)這個效果。
#p#
WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。 3.帶動畫效果的圖片翻轉
前端工程師常見的另外一個現(xiàn)象是，當用戶將鼠標放到圖片上時，變換為另一張圖片。在這個技巧中，讓我們看看如何讓圖片從一個到另一個漸變切換，而不是直接簡單的交換兩張圖片。實現(xiàn)這個效果的CSS和HTML如下：
1 2 3
div.swapper img { -webkit-transition: opacity 1s ease-in-out; } img.img1, div.swapper:hover img.img2 { opacity: 1.0; } div.swapper:hover img.img1, img.img2 { opacity: 0; }
1 2 3 4
<div class="swapper"> <img class="img1" style="position: absolute;" src="megan.jpg"> <img class="img2" src="megan2.jpg"> </div>
在這里，”transition”屬性使用簡化符號來指定（圖片）過渡的所有參數。第一個參數將屬性指定為動畫，第二個參數指定時間，第三個參數為簡便指定時間功能。”ease-in-out”只是眾多你可以自由支配的時間功能中的一個。你還可以指定一個線形變換、漸入、漸出或高級的立體貝塞爾曲線效果！
你可以自己親身體驗一下這個效果，如下圖所示：

截圖4. 一個CSS只能制定一個漸變效果
設想: 純CSS的漸變效果！ 4.CSS 多卷布局
使用純CSS，而不用HTML的table來實現(xiàn)多卷是件相當棘手的事情。但是，由于CSS3用于多卷布局的屬性在WebKit中已經被支持，你可以通過明確的定義卷數，正確實現(xiàn)你所想要的效果。先看一下下面的CSS和HTML代碼：
1 2 3 4 5 6 7 8
#columns { -webkit-column-count: 3; -webkit-column-gap: 25px; -moz-column-count: 3; -moz-column-gap: 25px; column-count: 3; column-gap: 25px; }
1 2 3 4 5
<div id="columns"> <p>Column A</p> <p>Column B</p> <p>Column C</p> </div>
這些代碼定義了這個DIV應該被分成3卷。HTML中的每個段落正好就在他們自己的卷里面(這并不是說必須要用3個
來顯示每個卷，事實上卷數和P標簽是無關的。)。
這些代碼同樣說明了在使用尚未成為W3C標準的部分CSS樣式時的一種可靠機制。這段代碼指定了”column-count”和”column-gap”屬性，并帶有”-webkit”和”-moz”前綴，以及沒有前綴的情況。這意味著這段代碼將會像Mozilla核心瀏覽器一樣可以在WebKit的瀏覽器中運行，而且一旦CSS3標準被最終確定下來之后，那些前綴就可以去掉了，而沒有前綴的代碼也將可以被執(zhí)行。
你可以在下面看到效果：

截圖5. 多卷
使用這種方法后，如果瀏覽器不支持多卷布局，段落將一個接著一個顯示，就像沒有設置多卷一樣。正如本文前面提到的，這些方法在不支持它們的瀏覽器中會被降級（也就是無效）。
#p#
WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。 5.簡單的CSS圓角
圓角可能會給頁面的實現(xiàn)帶來一些難度，比如，它可能需要為每個角使用一張圖片，但是這可能會引起某些表現(xiàn)上的問題（比如不同的瀏覽器可能表現(xiàn)上會有細微的差別）。在WebKit中被支持的CSS3的”border-radius”屬性讓實現(xiàn)圓角變得非常簡單，它只需要幾行簡單的CSS代碼。如下所示：
1 2
#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px; text-align:center; background:#eee; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div id="boxes"> <div style="-webkit-border-radius:15px;"> All sides </div> <div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;"> Opposite corners </div> <div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;"> Top </div> <div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;"> Side </div> </div>
這段樣式代碼定義所有的在boxes里面的DIV都要有一個比較大的border（邊框）、邊距、寬度、背景等。然后每個div標簽的border-radius被設置為不同的方式。你可以在下面看到運行結果：

截圖6. 純CSS圓角
第一個div中border-radius被設置為所有的角，然后第二個div只有左下角和右上角，第三個div就像一個tab，只有上面的角被設置為圓角，最后一個div被設置為單邊的圓角，只有右邊的兩個角是圓角。 6.全新的表單控制
WebKit同樣提供一些可用于你的頁面全新的控制。下面的例子演示一個水平滑動條、一些新樣式的按鈕以及一個很像Safari工具欄的搜索框
1 2 3 4
<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/> <button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/> <button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/> <input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>
運行效果：

截圖7. WebKit可用的一些新的按鈕
新的滑動控制條尤其好用，因為這個滑動控制條的確不太好用JavaScript來寫，并且還要在每個瀏覽器中都兼容。
#p#
WebKit是Safari和Google Chrome瀏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。 7.一個簡單的Pop-out
最后的例子是一個簡單的使用了一些在WebKit中可用的視覺效果的彈出框。
CSS和JavaScript 代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
#box1 { z-index: 100; position:absolute; top:5px; left:5px; width:100px; height:250px; padding:5px; -webkit-border-radius:10px; border: 2px solid black; background: #dddddd; z-index: 200; } #slider { z-index: 100; position:absolute; top:30px; left:5px; height:200px; width:90px; padding-top:10px; padding-left:15px; -webkit-border-radius:10px; border: 1px solid black; background: #eeeeee; -webkit-transition: -webkit-transform 0.5s ease-in; }
1 2 3 4 5
<script> function popout() { document.getElementById('slider').style.webkitTransform = 'translate(105px,0)'; } </script>
這里有個父級盒子，以及在它下面的一個滑動層。滑動層上的”transition”屬性定義動作將花費半分鐘，并使用一個”ease-in”時間特效。 通過JavaScript設置”transform”屬性到滑動層，從而在用戶點擊一個鏈接時引發(fā)動作。也就是說，動畫只是在用戶執(zhí)行一個像點擊鏈接一樣的動作之后才會運行。
這個例子的HTML代碼如下：
1 2 3 4 5 6
<div id="slider"> Slider<br/>Content </div> <div id="box1"> <a href="javascript:popout();">Popout</a> </div>
運行結果：

截圖8. 滑動層在彈出之前。
如果你在鏈接上點擊，那么這個滑動元素就會很快的滑出。

截圖9. 滑出之后的滑動層
這些例子的絕大部分功能是由CSS實現(xiàn)的，只是有很少的JavaScript。 未來走向
關于在WebKit中使用新的和獨特的CSS，這篇文章只是描述了一個一小部分。有各種各樣的新的CSS特性可以用來創(chuàng)建獨特的、有視覺沖擊力的效果，你可以單獨的實現(xiàn)他們，也可以聯(lián)合使用，前端開發(fā)社區(qū)等不及你來跟進了！
題記：這篇文章來自于Apple開發(fā)者社區(qū)，專門介紹WebKit核心的瀏覽器的一些新的特性，其中最主要的是對CSS3的支持。如果你想開發(fā)一些很酷的界面效果，前端觀察建議你使用WebKit核心的瀏覽器，因為目前來說，無論是Safari還是Chrome，都可謂是瀏覽器中的先鋒——對W3C的支持最好，JS引擎的效率最高，瀏覽器的執(zhí)行效率和反應速度也是最快的。我們不能被落后的瀏覽器拖住了我們前進的步伐，我們固然要考慮比較落后的瀏覽器，但是對于前端開發(fā)人員來說，進步更重要。

最新評論