前言

網頁程式設計師在規劃網頁排版所使用的程式語言不外乎HTML、CSS與Javascript，過去為了滿足客戶或使用者種種的要求，諸如漸層或陰影等等特效，需撰寫大量的程式碼來完成，或是利用各種修圖軟體來產生各種圖片以取代網頁程式，如此方式不但需要程式設計師專精於各項網頁語言，並需要花費大量的開發時間在專案的時程上，除此之外在後續的維護工作更是曠日廢時。

但此種情況在HTML5及CSS3的出現後將大幅改進，程式設計師可以透過CSS3種種的強大功能來實現各種傳統網頁設計上很難達成的各種效果，我們可以利用簡單的網頁標記產生出各式各樣的網頁特效及互動介面，並藉此讓使用者得到更佳的網頁互動新體驗。

或許讀者可能對於HTML及CSS存在某些不愉快的經驗，甚至認為此兩種網頁設計語言在學習上存在諸多困難，但以下的文章，筆者將會利用簡單的網頁標記來實作出酷炫的網頁特效，對讀者將來在網頁開發上必定能減省不少開發時間，更別提到需要花費大量時間在與客戶協調何種特效可否達成等等。

陰影特效

接下來我們將展示一些基礎的陰影特效，舉例來說，以下就是一些文字及物件的陰影特效成果：

文字陰影語法為：
text-shadow: X軸位移 Y軸位移 柔邊 顏色;
例如：
text-shadow: 5px 5px 3px #777;

以下是text-shadow的屬性介紹：
1.X軸位移：標示陰影的水平位移程度，正數會將陰影往右偏移，負數會將陰影往左偏移。
2.Y軸位移：標示陰影的垂直位移程度，正數會將陰影往下偏移，負數會將陰影往上偏移。
3.柔邊：標示陰影的擴展程度，值越大代表陰影的寬度越大且越模糊，值越小代表陰影的寬度越小且越清晰。
4.顏色：設定陰影的顏色。

除了文字陰影外，CSS3還包括了區塊陰影，其參數跟文字陰影相同，但是為了支援各種瀏覽器，必須同時包含以下語法：
-moz-box-shadow: 5px 5px 3px #777; (firefox)
-webkit-box-shadow: 5px 5px 3px #777; (Safari)
box-shadow: 5px 5px 3px #777; (Chrome、Opera)

此時很多讀者應該已經發現以上語法IE皆不支援。包含IE9在內，文字陰影及區塊陰影皆無法單靠CSS3來達成，如真的需要讓IE支援陰影效果，則可透過CSS的filter:shadow 濾鏡來完成。

過去如果要達到相同的效果，我們會開啟Photoshop等圖像編輯軟體繪製出PNG檔來產生按鈕的樣式，現在我們只需要簡單的標籤即可達到相同的效果。除了陰影特效之外，當然還有很多其他種可以改變物件樣式的CSS3標籤可使用，比如透明度、邊框圓弧程度、漸層等等，讀者可在網路上找到相關資料並動手實驗看看。

變形特效
CSS3所提供的變形標籤功能可讓網頁物件根據預先設定好的值轉換大小及形狀，不幸的是，CSS3目前所提供的transform籤現在並無任何一家瀏覽器有支援，各家瀏覽器都有各自的語法如下列所示：
transform: rotate(7deg);
-ms-transform: rotate(7deg); ( IE 9)
-moz-transform: rotate(7deg); (Firefox )
-webkit-transform: rotate(7deg); (Safari、Chrome)
-o-transform: rotate(7deg); (Opera)

為了讓變形效果能在各個瀏覽器上發揮作用，最保險的做法就是將這些標籤一一放在style中以避免使用者看到無變形的結果，此外，變形標籤的屬性在網路上查詢其實可以找到不少結果，大致上可以歸類成五種：
1.位移(Translate)：改變物件顯示的位置，例如：
translate(20px, 20px); (往右及往下各偏移20px)。
2.尺度(Scale)：改變物件的大小，例如：
scale(2, 2); (長跟寬分別擴展兩倍)。
3.旋轉(Rotate)：改變物件的旋轉角度，例如：
rotate(45deg); (根據Z軸旋轉45角)。




4.歪斜(Skew)：改變物件的歪斜程度。例如：
skew(5deg, 5deg); (X軸及Y軸個歪斜5度)。



5.矩陣 (Matrix)：其實所有的變形效果都可以利用矩陣參數來辦到，而瀏覽器遇到變形標籤時，也都是在背後轉 換成矩陣屬性來達成變形，例如：matrix(2,0,0,0,2,0);得到的結果就跟scale(2, 2)一樣，都是將長寬分別擴展成兩倍，其運作原理就是一連串的矩陣運算，以剛剛的例子來說，matrix(2,0,0,0,2,0)可以代表一個3*3的矩陣，如圖：

當物件的某個點，例如(X軸座標為100，Y軸座標為100)乘以上方這個矩陣後，即可得到這個新值，而這個新值就是這個點的新位置。

轉換特效

透過CSS的transition標籤，我們可以將網頁上的物件屬性值漸進地轉換成另外一種屬性值，看起來就像是動畫一樣，
例如：
transition:width 2s;
-moz-transition:width 2s; (Firefox 4)
-webkit-transition:width 2s; ( Safari、Chrome)
-o-transition:width 2s; (Opera)

假設一個物件本來的長度為100px，寬度為50px，將以上CSS3設定套用在此物件後，並加上:hover事件的css，例如寬度為200px，則當滑鼠游標移到此物件上後，此物件的長度會慢慢的從100px轉換成200px，經過兩秒後即會變成hover的css所定義好的寬度，另外若要同時改變多個屬性，可用以下方式：

transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;

如此在轉換的過程當中，width、height以及transform屬性皆會在兩秒內漸進式的完成轉換，如此就像是動畫一般，用CSS3製作簡單的動畫就是如此簡單。

除了以上所介紹的transition標籤，還有以下四種標籤可以讓CSS效果變化更加豐富：
1.transition-property：指定物件某項屬性進行改變，例如：
transition-property: width;(針對寬度進行變化)
2.transition-duration：指定屬性變化所需時間，例如：
transition-duration: 1s;(屬性會在1秒鐘內改變完成)
3.transition-timing-function：指定屬性變化的前後變化速度，例如：
transition-timing-function: ease;(漸層變化會在一開始比較慢，漸漸會加快速度，到結尾時再放慢速度)
4.transition-delay：變化會在多久時間後開始，例如：
transition-delay: 2s;(物件屬性值的改變會在2秒後才發生)

動畫特效

在前一節所提到的轉換特效，只是單純的將物件從一種CSS設定漸進的轉換至另一種，而所謂的動畫特效其實就是轉換特效的延伸，讓程式設計師可以將數個CSS組合成一段動畫，而每個CSS設定都是動畫裡的每個關鍵影格(key frame)，代表著一段影片中某一個時間點下物件的樣式設定，講起來很抽象，讓我們實際來舉個範例。

首先我們先在網頁上加上一個div標籤如下：


除此之外，我們再替這個div加上一些CSS的設定：


重點來了，以下我們使用了動畫標籤，並設定了一個動畫名稱叫做move around的動畫，動畫撥放的時間為2秒鐘且重複播放10次。筆者在試驗的時候只使用Chrome，所以下面CSS3的設定只加入了Chrome對應的動畫標籤，若讀者未來開發時須對應到所有瀏覽器，可再自行加入各瀏覽器對應的動畫標籤即可：


在此我們設定了3個關鍵影格，也就是3組CSS設定，其中每組CSS設定只包含了最基礎的寬度屬性，分別設定為-100px、100px以及0px，而百分比的用意是，當動畫開始撥放的時候，div會移動到原始位置左方的100px位置上，當播放到全部動畫時間的百分之五十的時候，div會移動到原始位置右方100px位置上，而動畫撥放完畢時，則移動到原始位置：


根據以上範例，讀者是否已經感覺到CSS3動畫的強大魅力了呢？透過CSS3，我們只要透過簡簡單單的幾個設定，即可製作出酷炫的動畫效果了。

結語

近日因Windows 8上市的時間點越來越近，的確替IT產業添加了不少茶餘飯後的話題，特別的是微軟替Windows 8推出了全新的App的開發模式，程式設計師可以透過HTML5、CSS3以及Javascript技術撰寫專屬的App，並放在微軟提供的市場平台上供全球下載並使用，此舉不但又下降了開發App的所需專業技術的門檻，筆者亦可窺見未來對於網頁程式設計的需求會更加熱絡起來。

參考資料

1.http://msdn.microsoft.com/zh-tw/magazine/jj133820(en-us).aspx
2.http://www.w3schools.com/css3/default.asp
3.http://blog.hinablue.me/entry/CSS3-note-css3-transform-matrix-note