HTML5與CSS3

by Vivid 24. 十月 2012 04:32

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N121012902
出刊日期:2012/10/24

在前一期《HTML5配置與CSS3》文章中,介紹了適用於HTML5與CSS3的版面配置,也說明CSS3新增的選擇器,這篇文章將介紹CSS3新增的好用功能,包含二維轉換、動畫處理、文字特效與Media Query。

讓我們先從二維轉換說起,CSS3支援2維與3維的變形轉換處理,可以應用在項目變形、或調整大小、方向以及位置。有了CSS3支援變形的能力,您就不需要額外使用外掛程式來達到這樣的效果。

 

二維轉換 - translate

translate具有位移效果,能將指定的項目從某個坐標位置移動到其它位置。我們先看一個簡單的HTML網頁,其中包含一個div,背景顏色為橘色:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        div {
            background-color: orange;
         
        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div> this is div </div>
</body>
</html>

 

這個網頁的執行結果如圖1所示:

clip_image001

圖 1:div。 

讓我們利用Translate來進行位移的動作。Translate需要傳入兩個參數,Left與top,代表要移動的左方以及上方的座標。修改上例的樣式如下,水平坐標X軸左移20px;垂直座標Y軸下移20px:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        div {
            background-color: orange;
            -moz-transform: translate(10px,20px); /* Firefox */
            -webkit-transform: translate(10px,20px); /* Chrome, Safari */
            -ms-transform: translate(10px,20px); /* ie9 */
            -o-transform: translate(10px,20px); /* Opera */
            transform:translate(100px,20px);
        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div> this is div </div>
</body>
</html>

因為各家瀏覽器對CSS3的支援程度不一,因此設定樣式時,在transform前方加上vender prefix,若以moz開頭代表適用於Firefox瀏覽器;若以webkit開頭代表適用於Chrome、 Safari等瀏覽器。若以ms開頭代表適用於ie瀏覽器;若以o開頭代表適用於Opera瀏覽器;最後沒有加上vender prefix的設定表示適用於以上皆非但支援CSS3的瀏覽器。範例執行結果如圖2所示:

clip_image002

圖 2:使用Chrome瀏覽器執行Translate的結果。

因為vender prefix太煩瑣,以下的範例就只針對Firefox與Chrome來撰寫。

我們還有兩個特殊的方法可以個別針對X軸與Y軸處理位移:translateX與translateY,參考以下CSS範例,利用translateX讓X軸位移100px:

 

<style type = "text/css">
      div {
          background-color: orange;
          -moz-transform: translateX(100px); /* Firefox */
          -webkit-transform: translateX(100px); /* Chrome */   
          -ms-transform:translateX(100px);
      }
  </style>

以下CSS範例,利用translateY讓X軸位移100px:

<style type = "text/css">
      div {
          background-color: orange;
         -moz-transform: translateY(100px); /* Firefox */
         -webkit-transform: translateY(100px); /* Chrome */   
         -ms-transform:translateY(100px);
      }
  </style>

 

二維轉換 - rotate

Rotate可以將某個項目旋轉至不同角度。因此rotate方法的參數是以角度為單位的,可以為正數值;也可以為負數值,代表以逆時針方式計算。參考以下範例程式碼包含兩個div,這兩個div寬度、高度與定位都相同,第二個div額外透過rotate旋轉60度:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        #div1{
            border:dashed 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;                   
        }
        #div2{
            background-color: orange;
            border:solid 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;          
            -moz-transform: rotate(60deg); /* Firefox */
            -webkit-transform:  rotate(60deg); /* Chrome */   
            -ms-transform :rotate(60deg);         

        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div id="div1"> this is div </div>
    <div id="div2"> this is div </div>
</body>
</html>

範例執行結果如下圖所示,外框虛線的矩形是原尺寸;而外框實線內填橘色的矩形則是透過rotate旋轉60度的結果。

clip_image003

圖 3:透過rotate旋轉60度。

 

二維轉換 - scale

Scale可以放大縮小項目,需要傳入兩個參數,代表要縮放的寬、高。若只有傳入一個參數,代表要縮放的寬高是一樣的。參考以下範例程式碼包含兩個div,這兩個div寬度、高度與定位都相同,第二個div額外透過scale縮放兩倍寬、三倍高:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        #div1{
            border:dashed 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;        
            z-index:1;          
        }
        #div2{
            background-color: orange;
            border:solid 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;          
            -moz-transform: scale(2,3); /* Firefox */
            -webkit-transform: scale(2,3); /* Chrome */   
            transform :scale(2,3);         

        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div id="div1"> this is div </div>
    <div id="div2"> this is div </div>
</body>
</html>

 

範例執行結果如下圖所示,外框虛線的矩形是原尺寸;而外框實線內填橘色的矩形則是透過scale縮放兩倍寬、三倍高的結果。

clip_image004

圖 4:透過scale縮放兩倍寬、三倍高的結果。

 

二維轉換 - skew

Skew可以使HTML項目扭曲或傾斜。skew可以傳入兩個參數,單位為角度,分別代表X軸傾斜的角度與X軸傾斜的角度。若只傳入一個參數,則代表X軸傾斜的角度為0,即不傾斜的意思。參考以下範例程式碼包含兩個div,這兩個div寬度、高度與定位都相同,第二個div額外透過skew讓矩形傾斜 -50度:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        #div1{
            border:dashed 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;        
            z-index:1;          
        }
        #div2{
            background-color: orange;
            border:solid 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;          
            -moz-transform: skew(-50deg); /* Firefox */
            -webkit-transform: skew(-50deg);  /* Chrome */   
            transform :skew(-50deg);          
        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div id="div1"> this is div </div>
    <div id="div2"> this is div </div>
</body>
</html>

 

範例執行結果如下圖所示,外框虛線的矩形是原尺寸;而外框實線內填橘色的矩形則是透過skew讓矩形傾斜 -50度的結果。

clip_image005

圖 5:透過skew讓矩形傾斜 -50度。

 

二維轉換 - matrix

Matrix函數結合上述討論的縮放、傾斜與變形於一身,可以傳入六個參數,分別代表X Scale、Y Skew、X Skew、Y Scale、X Translate與 Y Translate。

參考以下範例程式碼包含兩個div,這兩個div寬度、高度與定位都相同,第二個div,額利用matrix,將X與Y放大兩倍:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <style type = "text/css">
        #div1{
            border:dashed 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;        
            z-index:1;          
        }
        #div2{
            background-color: orange;
            border:solid 1px;
            position:absolute;
            left:100px;
            top:100px;           
            width:100px;          
            -moz-transform: matrix(2,0,0,2,0,0); /* Firefox */
            -webkit-transform: matrix(2,0,0,2,0,0);  /* Chrome */   
            transform :matrix(2,0,0,2,0,0);          

        }
    </style>
    <title> Translate demo </title>
</head>
<body>
    <div id="div1"> this is div </div>
    <div id="div2"> this is div </div>
</body>
</html>

 

範例執行結果如下圖所示,外框虛線的矩形是原尺寸;而外框實線內填橘色的矩形則是透過matrix讓矩形寬度、高度放大兩倍的結果。

clip_image006

圖 6:透過matrix讓矩形寬度、高度放大兩倍。

動畫

CSS3也加入了動畫的功能,讓你依據時間,來做出視覺化的特效,這樣便可以少寫許多控制用的JavaScript,或對外掛程式的依賴。

要建立動畫需要先定義@keyframes規則,並在其中描述開始(from)與結束(to)要進行的動畫效果,例如以下範例,定義一個名為MoveMe的動畫,在動畫開始時,套用此動畫的項目之left為0px;動畫結束時,left將會是200px:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <style type = "text/css">
    @keyframes MoveMe {
      from {
        left: 0px;
      }

      to {
        left: 200px;
      }
    }

    @-webkit-keyframes MoveMe {
      from {
        left: 0px;
      }

      to {
        left: 200px;
      }
    }

    @-moz-keyframes MoveMe {
      from {
        left: 0px;
      }

      to {
        left: 200px;
      }
    }

    #div1 {
      background-color: orange;
      position: absolute;
      width: 100px;
      z-index: 1;
      -webkit-animation: MoveMe 5s;
      -moz-animation: MoveMe 5s;
      animation: MoveMe 5s;
    }
  </style>
  <title> Animation demo </title>
</head>
<body>
  <div id="div1"> this is div </div>
</body>
</html>

 

而div1套用了MoveMe動畫,動畫時間長度為5秒。執行結果如下圖所示,div將由左至右移動:

clip_image007

圖 7:動畫。

我們也可以使用時間百分比來設定動畫,例如將上述範例修改如下,0%表示動畫開始時間;100%表示動畫結束時間,可以得到相同的效果:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <style type = "text/css">
    @keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-webkit-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-moz-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    #div1 {
      background-color: orange;
      position: absolute;
      width: 100px;
      z-index: 1;
      -webkit-animation: MoveMe 5s;
      -moz-animation: MoveMe 5s;
      animation: MoveMe 5s;
    }
  </style>
  <title> Animation demo </title>
</head>
<body>
  <div id="div1"> this is div </div>
</body>
</html>

 

在套用動畫時我們可以透過屬性來設定動畫的撥放資訊,可以設定的屬性包含:

  • animation-name:動畫的名稱。
  • animation-duration:動畫的時間長短。
  • animation-timing-function:動畫函數。
  • animation-delay:延遲播放時間。
  • animation-iteration-count:播放次數。
  • animation-direction:方向性。

參考以下範例個別透過屬性來設定動畫的撥放資訊,動畫名稱為MoveMe,長5秒,使用ease-in-out函數讓動畫慢慢加速後減速,延遲播放時間1秒,撥放次數2次,以標準方向由左至右播放:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <style type = "text/css">
    @keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-webkit-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-moz-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    #div1 {
      background-color: orange;
      position: absolute;
      width: 100px;
      z-index: 1;

      -webkit-animation-name: MoveMe;
      -webkit-animation-duration:5s;
      -webkit-animation-timing-function:ease-in-out;
      -webkit-animation-delay:1s;
      -webkit-animation-iteration-count:2;
      -webkit-animation-direction:normal;
     
      -moz-animation-name: MoveMe;
      -moz-animation-duration:5s;
      -moz-animation-timing-function:ease-in-out;
      -moz-animation-delay:1s;
      -moz-animation-iteration-count:2;
      -moz-animation-direction:normal;

      animation-name: MoveMe;
      animation-duration:5s;
      animation-timing-function:ease-in-out;
      animation-delay:1s;
      animation-iteration-count:2;
      animation-direction:normal;
    }
  </style>
  <title> Animation demo </title>
</head>
<body>
  <div id="div1"> this is div </div>
</body>
</html>

 

若覺得個別設定這些動畫屬性太煩了,你也可以使用簡寫的語法來表達動畫的套用,例如上述程式碼可以改寫如以下範例來達到相同的效果:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <style type = "text/css">
    @keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-webkit-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    @-moz-keyframes MoveMe {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    #div1 {
      background-color: orange;
      position: absolute;
      width: 100px;
      z-index: 1;

      -webkit-animation: MoveMe 5s ease-in-out 1s 2 normal ;
      -moz-animation: MoveMe 5s ease-in-out 1s 2 normal ;
      animation: MoveMe 5s ease-in-out 1s 2 normal ;    

    }
  </style>
  <title> Animation demo </title>
</head>
<body>
  <div id="div1"> this is div </div>
</body>
</html>

文字特效

CSS3新增兩個文字特效功能:text-shadow與word-wrap。

text-shadow

替文字產生陰影的效果。這真是一個便利的功能,不再需要使用影像處理軟體,替文字製作具有陰影效果的圖片。使用text-shadow可以傳入四個參數,分別代表水平陰影、垂直陰影、模糊距離與陰影的顏色。例如以下範例程式展示水平陰影7像素、垂直陰影7像素、模糊距離5像素與陰影的顏色灰色:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type = "text/css">
    h1 {
      font-family:Batang;
      font-size:72px;
      text-shadow :7px 7px 5px gray  ;
    }  
  </style>
</head>
<body>
  <h1>使用HTML5</h1> 
</body>
</html>

 

呈現的效果如下圖所示:

clip_image008

圖 8:text-shadow文字特效。

word-wrap

CSS3新增的word-wrap能自動強制過長的文字換行,只要設定word-wrap為break-word就可以達到效果,例如以下範例,包含一個非常長的單字:pneumonoultramicroscopicsilicovolcanoconiosis。我們為它加上word-wrap強制斷行:

<!DOCTYPE html>
<html xmlns =" http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type = "text/css">
   div {    
      word-wrap:break-word;
    }
  </style>
</head>
<body>
  <h1> Lonest word </h1>
<div>
   pneumonoultramicroscopicsilicovolcanoconiosis單字由 45 個字母組成,為一個名詞表示由吸入矽塵所造成的肺病。
</div>
</body>
</html>

 

這個範例執行的結果如下圖所示,當視窗過小,便會自動斷字。不過這功能對於中文來說可能用處就不大了。

clip_image009

圖 9:使用word-wrap能自動強制過長的文字換行。

Media Query

現今行動裝置非常盛行,使用者可能透過平版電腦或手機等行動裝置來存取網站應用程式,不同的裝置可能具備不同的寬高、解析度,以及可能支援單色或彩色顯示…。

Media Query也是CSS3新增的功能,用於偵測媒體的能力,以便於適當地回應,特別適合搭配不同的行動裝置來使用。

Media Query簡易語法:

@media [media type] [(media feature expression)]

Media Query可以使用以下幾種方式來套用:使用link、使用@import與使用@media規則。說明如下。

使用link

以下範例利用media attribute來套用media query,此範例div的文字字型設定為16px,若執行此網頁的裝置畫面寬度小於360px時,便載入StyleSheet.css樣式表的內容來套用,將字型大小設為8px:

 

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
     div {
       font-size:16px;
     }
  </style>
  <link href="StyleSheet.css" media="only screen and (max-width:360px)" rel="stylesheet" /> 
</head>
<body>
  <h1> 使用HTML5 </h1>
<div>
   HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。
</div>
</body>
</html>

 

此media query範例中使用了 only 關鍵字,讓不支援media query的瀏覽器忽略掉media query的設定,大部分舊的瀏覽器不認得新的media type,如only關鍵字,便會忽略掉這個設定。參考範例執行結果,當瀏覽器寬度大於360px時,字型大小是16px:

clip_image010

圖 10:瀏覽器寬度大於360px時,字型大小是16px。

當瀏覽器寬度小於360px時,字型大小是8px:

clip_image011

圖 11:瀏覽器寬度小於360px時,字型大小是8px。

 

使用@import規則

第二種套用media query的方式是透過@import規則,舉例來說有個StyleSheet.css檔案內容如下:

div {
    font-size: 8px;
}

 

在HTML中便可以使用@import規則來套用,範例如下:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    div {
      font-size: 16px;
    }
  </style>
  <style>
    @import url("StyleSheet.css") screen and (max-width:360px);
  </style>
</head>
<body>
  <h1> 使用HTML5 </h1>
  <div>
    HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
  </div>
</body>
</html>

 

 

 

使用@media規則

第三種套用media query的方式是使用@media規則,舉例來說,我們可以將樣式獨立出來,放在一個CSS檔案之中,若樣式表檔案內容如下:

  div {

       font-size:16px;
     }
@media  screen and (max-width:360px) {
    div {
        font-size:8px;
    }

}

 

在HTML中便可以搭配使用link或@import規則來套用,以下是使用@import規則套用的範例:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    @import url("StyleSheet1.css");
  </style>
</head>
<body>
  <h1>使用HTML5</h1>
  <div>
    HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
  </div>
</body>
</html>

 

 

在HTML中直接使用

樣式與media query也可以直接在HTML之中定義,例如以下範例程式所示:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    div {
      font-size: 16px;
    }
    @media screen and (max-width:360px) {
      div {
        font-size: 8px;
      }
    }
  </style>
</head>
<body>
  <h1>使用HTML5</h1>
  <div>
    HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。
  </div>
</body>
</html>

 

 

總結

CSS3不僅僅支援二維轉換,也新增了Z軸來達成三維轉換的功能,透過這些新的語法,讓你更容易掌控三維轉換的動作。

除了新增的text-shadow與word-wrap文字特效之外,也新增了@font-face規則

可以讓自訂的字型很容易整合到網站應用程式之中。

Tags:

.NET Magazine國際中文電子雜誌 | HTML | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List