網頁設計

第 6 章    利用 CSS3 創造令人驚豔的美感

∗ CSS3 的藝術特性

▸ 過去網路速度較慢,網頁設計者的兩個選擇:

1. 期望使用者會為了欣賞高品質的網頁,而花時間等待網頁下載 (別傻了!)
2. 不得已退讓,只好放棄影像而擁抱速度,但網頁品質卻無法提昇
# CSS3 讓這樣的退讓程度大幅降低

▸ CSS3 可以產生的視覺效果

✶ 圓角、漸層背景、文字陰影、方框陰影、客製化活版印刷
✶ 許多原先需要 JavaScript 程式的基礎效果亦可僅用 CSS3 就可完成

▸ CSS3 讓網頁下載更快、使用資源較少、未來維護及修改更簡單,也不需繪製或一再修改影像

∗ HTML5 動畫展示:

http://www.hongkiat.com/blog/48-excellent-html5-demos/

∗ 瀏覽器對 CSS3 的支援:

http://www.w3schools.com/cssref/css3_browsersupport.asp

(1) 強化導航按鈕

∗ CSS3 的結構虛擬類別 (Structural pseudo-class)

▸ 針對無法使用一般選擇器 (例如 idclass) 所能選到的元素,例如:

:link
:visited
:hover
:active
:focus
:root
:only-child
:empty
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child

▸ CSS橫向導航列範例:

✶ 導航連結常利用等距的 <li> 標籤
✶ 第一與最後一個 <li> 則不需等距設定,可將此 2 個標籤加上 class,再統一設定
HTMLCSS3
<nav> 
  <ul> 
    <li class="first"><a href="#">為什麼?</a></li> 
    <li><a href="#">劇情簡介</a></li> 
    <li><a href="#">照片</a></li> 
    <li><a href="#">影片</a></li> 
    <li class="last"><a href="#">引用</a></li> 
  </ul> 
</nav>
nav li {
  margin-left: 5%;
  margin-right: 5%;
}
nav li.first {
  margin-left: 0;
}
nav li.last {
  margin-right: 0;
}
✶ 缺點:有許多 CMS 允許動態增加或減少導航項目,firstlast 均無法固定

▸ CSS3子選擇器 (Child selector)

✶ 上述選擇第一及最後一個的問題可改為 (不需再設定 class)
HTMLCSS3
<nav> 
  <ul> 
    <li><a href="#">為什麼?</a></li> 
    <li><a href="#">劇情簡介</a></li> 
    <li><a href="#">照片</a></li> 
    <li><a href="#">影片</a></li> 
    <li><a href="#">引用</a></li> 
    <li><a href="#">小考</a></li> 
  </ul> 
</nav>
...
nav li:first-child {
  margin-left: 0;
}
nav li:last-child {
  margin-right: 0;
}

∗ CSS3 的 nth 選擇器

▸ 假設將導航項目如下修改

<ul>
  <li class="internal"><a href="#">為什麼?</a></li>
  <li><a href="#">劇情簡介</a></li>
  <li class="internal"><a href="#">照片</a></li>
  <li class="internal"><a href="#">影片</a></li>
  <li class="internal"><a href="#">引用</a></li>
  <li class="internal"><a href="#">小考</a></li>
</ul>

▸ 選奇數項目

nav ul li:nth-child(odd) a {
  color: red;
}

▸ 選偶數項目

nav ul li:nth-child(even) a {
  color: red;
}

▸ 選3、6、9...項目 (n 從 1 開始)

nav ul li:nth-child(3n) a {
  color: red;
}

▸ 選1、4、7...項目

nav ul li:nth-child(3n-2) a {
  color: red;
}

▸ 從最後開始反向計數,選最後 3 個 (1、2、3) 項目

nav ul li:nth-last-child(-n+3) a {
  color: red;
}

▸ 選 internal 類別的第 3、4、5、6...項目

nav ul li.internal:nth-of-type(n+2) a {
  color: red;
}

▸ 選非 internal 類別的項目

nav ul li:not(.internal) a {
  color: red;
}

∗ 練習:

▸ 將 oscar5-3.htmloscar5-3.css 分別另存新檔為 oscar6-1.htmloscar6-1.css,並如下修改:

▸ HTML:修改 CSS 連結 <link rel="stylesheet" href="css/oscar6-1.css">

▸ CSS:粗體文字,偶數連結設為紅色,在視域寬度小於 800px 時,改為單欄排列

nav li a {
  ... 
  font-weight: bold;
}
nav ul li:nth-child(even) a {
  color: red;
}

@media screen and (max-width: 800px) {
   ...

  div#wrapper { 
    ...
  } 
  nav li { 
    float: none;  
  }
  div#content { 
    ...
  }
...
}
nth1
nth2

(2) 網頁的美學

∗ 網頁美化

▸ 過去:大多利用影像來完成

✶ 缺點:影像下載增加 http 請求、增加所需頻寬 (因此網頁載入較慢)、設計較無彈性且難以維護 (影像修改需重畫)、回應式設計不容易達成

▸ 目前:許多可利用 CSS3 完成

∗ 文字陰影 (Text shadow)

▸ 例如右下角陰影:text-shadow: 1px 1px 1px #cccccc;

✶ 依序所設定的對象:右陰影寬度、下陰影寬度、陰影模糊度 (從陰影開始褪色到無陰影的距離)、陰影顏色
✶ 陰影顏色亦可使用 RGB 或 HSL
✶ 左上角陰影 (沒有模糊度):左陰影寬度、上陰影寬度、陰影顏色
text-shadow: -1px -1px #cccccc;

▸ 亦可以有多個文字陰影,例如:

text-shadow: 0 1px #ffffff, 4px 4px 0 #dad7d7;

∗ 背景漸層(Background gradient)

▸ 線性(Linear)背景漸層

✶ 語法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
✶ 由上至下
background: -moz-linear-gradient(red, blue);
✶ 由左上至右下
background: -moz-linear-gradient(bottom right, red, blue);
✶ 由水平 (由右到左)
background: -moz-linear-gradient(180deg, red, blue);
✶ 多個顏色
background: -moz-linear-gradient(red, green, blue);
✶ 加入透明度
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
✶ 重複線性漸層
background: -moz-repeating-linear-gradient(red, yellow, green 20%);

▸ 輻射 (Radial) 漸層:以圓或橢圓形狀向外漸層

✶ 語法:
background: radial-gradient(center, shape size, start-color, ..., last-color);
✶ 平均向外分佈
background: -moz-radial-gradient(red, green, blue);
✶ 以比例方式向外分佈
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
✶ 設定各種尺寸:
# closest-side:結束顏色位置在最近的邊
# closest-corner:結束顏色位置在最近的角
# farthest-side:結束顏色位置在最遠的邊
# farthest-corner:結束顏色位置在最遠的角
# cover:同 farthest-corner
# contain:同 closest-side
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
✶ 重複輻射漸層
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

CSS 漸層產生器

∗ 背景漸層模式 (Background gradient pattern)

▸ 範例:設定 body 的背景漸層模式

background: -moz-repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
background-color:white; 
background-image: 
  radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), 
  repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, 
  hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, 
  transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, 
  hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, 
  transparent 50px); 
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;

CSS3 背景模式畫廊

∗ 練習:

▸ 將 oscar6-1.htmloscar6-1.css 分別另存新檔為 oscar6-2.htmloscar6-2.css,並如下修改:

▸ HTML:修改 CSS 連結 <link rel="stylesheet" href="css/oscar6-2.css">

▸ CSS:

✶ 設定「每年」字體陰影
#content h1 {
  font-size: 4em;
  text-shadow: 0.05em  0.05em 0 #dad7d7;
}
#content h1 span {
  color: #757474;
  font-size: 0.6em;
  text-shadow: none;
}
✶ 方框陰影 (Box shadow)
# 將側欄影像加上陰影
aside img.poster {
  box-shadow: 0 3px 5px #222222;
}
# 將 oscar 之 <body> 內緣加上陰影
body {
  ...
  box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999;
}
✶ 漸層背景 (可能需前綴):將 body, aside, 及 #content 分別加上漸層背景
body {
  width: 100%;
  padding: 0;
  box-shadow: inset 10px 10px 10px #999999, inset -10px -10px 10px #999999;  
  background-image:
    radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
    repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,transparent 50px);
    background-size: 30px 30px, 90px 90px;
    background-position: 0 0;
}
aside {
  background: -moz-linear-gradient(left, #888888, #ffffff);
}
div#content {
  background: radial-gradient(20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100%);
}

▸ CSS 的回應式設計:在不同視域可以呈現不同的漸層,例如在 800px 視域裡加上:

@media screen and (max-width: 800px) { 
  body { 
    background: -moz-repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px); 
  }
 ...
} 
backgroundGradient1 backgroundGradient2

(3) 利用 CSS3 產生小圖示

∗ 小圖示

▸ 以前的作法:繪製小圖示的影像

▸ CSS3 之解決方案:圖示字體 (Icon font),優點:可以自由的

✶ 放大縮小
✶ 改變顏色
✶ 加上陰影
✶ 改變透明度
✶ 旋轉

▸ 例如: Font Awesome

✶ 點選上方 How to Use 按鈕,將該頁面所附 CSS 連結複製到 <head> 標籤中:
<link rel="stylesheet" href="https://use.fontawesome.com/...>
# 該頁面亦有連結說明如何使用圖示 (reference it in your markup),可利用行內元素來插入圖示,例如:<i>, <em>, 或 <span>
✶ 點選上方 Icons 按鈕,搜尋所需要的圖示 (例如:headphones, music, play, film icons) 置入 HTML 中,例如:
fontAwesome.html
<!doctype html>
<html>
<head>
<title>Font Awesome</title>
<meta charset=utf-8>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link rel=stylesheet href="css/fontAwesome.css">
</head>
<body>
<i class="fas fa-headphones"></i>  
<i class="fas fa-music"></i>  
<i class="fas fa-play"></i>  
<i class="fas fa-film"></i>  
</body>
</html>
✶ 即可看到小圖示,由於這些圖示都是「文字」,因此可以設定各種樣式,例如
fontAwsome.css
i.fas {
  font-size: 2em;
}

i.fa-headphones {
  color: red;
}

i.fa-music {
  color: blue;
}

i.fa-play {
  color: green;
}

i.fa-film {
  color: brown;
}
✶ 結果:
iconFont
✶ 使用 icon font 的優點:使用者不需下載圖示影像檔,可隨時更改 CSS 設定,不需重新繪製圖示

∗ 練習:

▸ 將 oscar6-2.htmloscar6-2.css 分別另存新檔為 oscar6-3.htmloscar6-3.css,並如下修改:

▸ HTML:

✶ 修改 CSS 連結 <link rel="stylesheet" href="css/oscar6-3.css">

▸ CSS:在 footer 最後加上聯絡資料及圖示:網址 (globe)、電郵 (envelope)、地址 (home)

footerIcon

上一章       下一章