用於WebKit的CSS訣竅

作者:Admin 日期:2009-03-10

字體大小: 小中大

使用在Safari和WebKit中可用的CSS高級特性，你可以為你的網站和網絡應用帶來一個新的級別的令人興奮的東西。WebKit是Safari瀏覽器和Google Chrome的渲染引擎。

因為瀏覽器會簡單的無視他們不支持的CSS屬性，所以在其他瀏覽器中，這些秘訣中的大部分可能會無效。使用只用WebKit支持的屬性的網頁在基於WebKit的瀏覽器中會有非常出色的視覺和體驗，並且在其他瀏覽器中也會有某些效果。

注意: 你在本文中看到的-webkit前綴是一個瀏覽器生產商通常使用的一種方式，它暗示該CSS屬性或規則尚未成為W3C標準的一部分。比如，box-shadow屬性還只是開發中的CSS3標準的一部分。基於Mozilla的瀏覽器使用-moz前綴。

簡單的陰影

讓我們從向你展示為網頁中的任意元素添加陰影效果是多麼的簡單開始吧。下面的代碼片段將演示一個輕微旋轉並有陰影的圖片，這兩個效果都是使用CSS添加的。

程序代碼

上面的代碼中，transform CSS 屬性實現圖片旋轉，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉的角度，或者是陰影的參數，僅僅調整那些參數就OK了。

嘗試一下，你將看到下面演示的旋轉圖片效果。

截圖1.圖片選擇和陰影

上面的CSS是在一個style屬性中，當然你可以把它們作為一個類放到一個style標籤或獨立的樣式文件中。

過去，服務器端代碼常常被請求用來處理圖片來實現陰影效果。現在使用CSS擴展你就可以在瀏覽器中實現它，而且看起來很棒。

滾動與彈出

下一個示例將演示當你把鼠標放到一張圖片上事，它會彈出的效果。實現這些只需要使用一個hover樣式和一個度數改變。該效果的CSS如下所示。

程序代碼

鼠標滑過圖片，它就會彈出並變大，如下所示。

截圖2.翻轉後的圖片

將鼠標從圖片上挪開，圖片又會恢復原狀。

截圖3.翻轉之前的圖片

正如你所能看到的那樣，你可以使用幾行CSS來實現這個效果。

動畫圖片翻轉

另一個前端工程師常見的現象是，當用戶將鼠標放到圖片上時，變換為另一張圖片。在這個技巧中，讓我們看看如何讓圖片從一個到另一個漸變交換，而不是簡單的直接交換兩張圖片。實現這個效果的CSS和HTML如下：

程序代碼

<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; }
<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的漸變效果！

CSS 多卷佈局

使用純CSS實現多卷，而不用HTML的table是件相當棘手的事情。由於CSS3用於多卷佈局的屬性在Safari和WebKit中已經可用，你可以明確的定義卷數，正確實現你所想要的效果。先看一下下面的CSS和HTML代碼：

程序代碼

#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}

程序代碼

<div id="columns">
<p>Column A</p>
<p>Column B</p>
<p>Column C</p>
</div>

這些代碼定義了卷中的HTML代碼。這些代碼定義了這個DIV應該被分成3卷。每個段落就在他們自己的卷裡面。

這些代碼同樣說明了一種在使用一種尚未成為W3C標準的一部分時的可靠機制.這段代碼指定了」column-count」和」column-gap」屬性，並帶有」-webkit」和」-moz」前綴，以及沒有前綴的情況。這意味著這段代碼將會像基於Mozilla的瀏覽器一樣可以在Safari和WebKit的瀏覽器中運行，而且一旦CSS3標準被最終確定下來之後，那些前綴就可以去掉了。

你可以在下面看到效果：

截圖5. 多卷

使用這種方法，如果瀏覽器不支持多卷佈局，段落將一個接著一個顯示。正如本文前面提到的，這些方法在不支持它們的瀏覽器中會被降級（也就是無效）。

簡單的CSS圓角

圓角可能會給網站頁面帶來一些麻煩，比如，它可能需要為每個角使用一張圖片，但是這可能會引起某些表現上的問題（比如不同的瀏覽器可能表現上會有細微的差別）。在WebKit中有效的CSS3的」border-radius」屬性讓實現圓角變得簡單，它只需要幾行簡單的CSS代碼。如下所示：

程序代碼

#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }

程序代碼

<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被設置為單邊的圓角，只有右邊的兩個角是圓角。

全新的表單控制

WebKit同樣提供一些新的控制來使用於你的頁面。下面的例子演示一個水平滑動條、一些新樣式的按鈕以及一個很像Safari工具欄的搜索框

程序代碼

<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來寫，並且還要在每個瀏覽器中都兼容。

一個簡單的Pop-out

最後的例子是一個簡單的使用了一些在WebKit中可用的視覺效果的彈出框，使用的CSS和JavaScript 代碼如下：

程序代碼

#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;
}
<script>
function popout() {
document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>

這裡有個父級盒子，以及在它下面的一個滑動盒子。滑動盒子上的」transition」屬性定義動作將花費半分鐘，並使用一個」ease-in」時間特效。JavaScript 通過設置」transform」屬性到滑動盒子，從而在用戶點擊一個鏈接時引發動作。也就是說，動畫只是在用戶執行一個像點擊彈出鏈接一樣的動作之後才會運行。

這個例子的HTML代碼如下：

程序代碼

<div id="slider">
Slider<br/>Content
</div>
<div id="box1">
<a href="javascript:popout();">Popout</a>
</div>

你可以嘗試這個例子，就像下面這樣：

截圖8. 滑動盒子在彈出之前。

如果你在鏈接上點擊，那麼這個滑動元素就會很快的滑出。

截圖9. 滑出之後的滑出盒子

這些例子的絕大部分功能是由CSS實現的，只是有很少的JavaScript。

未來走向

當談到在Safari和WebKit中用新的和獨特的方式使用CSS，這篇文章只是描述了一個可行性。有各種各樣的新的CSS特性可以用來創建獨特的、有視覺衝擊力的效果，你可以單獨的實現他們，也可以聯合使用！

題記：這篇文章來自於Apple開發者社區，專門介紹WebKit核心的瀏覽器的一些新的特性，其中最主要的是對CSS3的支持。如果你想開發一些很酷的界面效果，我建議你使用WebKit核心的瀏覽器，因為目前來說，無論是Safari還是Chrome，都可謂是瀏覽器中的先鋒——對W3C的支持最好，JS引擎的效率最高，瀏覽器的執行效率和反應速度也是最快的。我們不能被落後的瀏覽器拖住了我們前進的步伐，我們固然要考慮比較落後的瀏覽器，但是對於前端開發人員來說，進步更重要。

譯文鏈接：http://www.qianduan.net/?p=6105
原文來自：http://developer.apple.com