第 6 章 利用 CSS3 創造令人驚豔的美感 - 網頁的美學 * 過去 : 利用影像來完成 # 缺點 : 影像下載增加 Http 請求 增加所需頻寬 ( 因此網頁載入較慢 ) 設計較無彈性且難以維護 ( 影像修改需重畫 ) 回應式設計不容易達成 * 目前 : 許多可利用 CSS3 完成 - 文字陰影 (Text shadow) * 例如右下角陰影 :.element { text-shadow: 1px 1px 1px #cccccc; # 依序所設定的對象 : 右陰影寬度 下陰影寬度 陰影模糊度 ( 從陰影開始褪色到無陰影的距離 ) 陰影顏色 # 陰影顏色亦可使用 RGB 或 HSL # 左上角陰影 ( 沒有模糊度 ): 左陰影寬度 上陰影寬度 陰影顏色.element { text-shadow: -1px -1px #cccccc; * 亦可以有多個文字陰影, 例如 : text-shadow: 0px 1px #ffffff, 4px 4px 0px #dad7d7; - 繼續修改 oscar 網頁 * 將 oscar5.html 與 oscar5.css 檔案分別複製為 oscar6.html 與 oscar6.css, 並將 oscar6.html 裡的 css 連結改為 <link... href=css/oscar6.css> * 將 html 裡的 <video> 與 <audio> 元素刪除 * 在 css 中, 將 每年 字體放大為 102px, 並設定陰影寬度為 4px #content h1 { font-size: 6.375em; /* 102/16 */ text-shadow: 0.0392157em 0.0392157em 0em #dad7d7; /* 4/102 */ #content h1 span { line-height: 1.0526316em; /* 40/38 */ color: #757474; font-size: 0.3725490em; /* 38/102 */ text-shadow: none; - 方框陰影 (Box shadow) * 將 oscar 之左側影像加上陰影, 修改 CSS:.sideBlock img { box-shadow: 0px 3px 5px #444444; * 亦可以有多個方框陰影, 例如 : box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1); * 將 oscar 之 <body> 內緣加上陰影,CSS 加上 : box-shadow: inset 0px 3px 5px #444444; 6-1
# 註 : 若 <body> 崩潰, 則需在 <aside> 與 #content 加上 display: inline-block; - 背景漸層 (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%); # 將 oscar 的 <aside> 如下修改 : aside { background: -moz-linear-gradient(left, #888888, #ffffff); * 輻射 (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%); # 嘗試將 oscar 的 #condent 如下各式修改 : background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%); 或 background: -moz-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 漸層產生器 - 背景漸層模式 (Background gradient pattern) 6-2
* 嘗試將 <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 背景模式畫廊 - CSS3 的回應式設計 * 在不同視域可以呈現不同的漸層, 例如大視域採用上述第一種,768 視域則採用第二種 - 在 oscar 中綜合 CSS3 的美感設計 * 修改 #content 中的 <a> 元素 # 字元放大, 並且不要連結裝飾 #content a { text-decoration: none; font-size: 1.5em; /* 24/16 */; # 加入背景顏色 background-color: #b01c20; # 加上圓角 border-radius: 8px; # 字改為白色, 並加上間隔 color: white; padding: 3.125%; /* 30/960 */ # 但目前因間隔過大而蓋掉上方文字, 加上流動, 並加上漸層 6-3
float: left; background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%); # 加上方框陰影 margin-top: 3.125%; /* 30/960 */ box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8); # 加上文字陰影 text-shadow: 0px 1px black; border: 1px solid #bfbfbf; # 加大 >> 符號 #content a span { font-size: 1.3em; # 還可以加入更多文字, 無需重新繪製圖案, 修改 HTML: <p><a href=#> 這些無名英雄電影都應該獲獎, 但某些賺人熱淚的電影 或者隨便唱唱跳跳的滑稽戲卻抱走了大獎 <span>»</span></a></p> - 多個背景影像 * 一個常見的設計需求是在不同的地方呈現不同的背景 * CSS2 的作法 : 規劃多個 <div> 然後在 CSS 中設定不同的背景影像, 例如 : bg.html: bg.css: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=bg.css> </head> <body> <div> <div id=container> <header> // Header content here </header> <div id=main role=main> // Main content here <footer> // Footer content here </footer> </body> </html> * CSS3 的作法 : 直接加入許多背景影像 background: url(bg1.jpg); url(bg2.jpg); url(bg3.jpg); # 背景影像將由上到下依序排列 # 也可以指定所剩餘空間的顏色 background-image: url("bg2.jpg"); background-repeat: repeat-x; #container, #main, footer { height: 200px; footer { background-image: url("bg1.jpg"); background-repeat: repeat-x; background-position: bottom; 6-4
background:... url(bg3.jpg) left bottom, lightgreen; - 背景尺寸 * 設定各個背景影像的尺寸, 語法如下 : background-size: 100% 50%, 300px 400px, auto; # 上述語法中, 各個影像尺寸設定依序以逗號分開, 可使用 % 或 px 設定尺寸, 亦可使用下列設定 : - auto: 原始尺寸 - cover: 保持原始寬高比的條件下, 延展影像以涵蓋該元素的區域 - contain: 保持原始長寬比的條件下, 延展影像以達到該區域最長的邊 - 背景位置 * 以下第 1 個影像靠中對齊, 第 2 個影像依預設靠左上角 background: url(bg1.png) center; url(bg2.png); url(bg3.png) left bottom, lightgreen; - 利用 CSS3 產生小圖示 * 以前的作法 : 繪製小圖示的影像 * CSS3: 圖示字體 (Icon font), 優點 : 可以自由的 # 放大縮小 # 改變顏色 # 加上陰影 # 改變透明度 # 旋轉 * 例如 :IcoMoon # 點選 IcoMoon App # 點選所需要的圖示 ( 例如 :home, headphones, dice, phone ) # Font Download ( 產生 icomoon.zip) # 解壓縮 icomoon.zip, 測試 : icon.html <!DOCTYPE html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=icon.css> </head> <body> <div class=glyph1> <span class=icon-home></span>icon-home<br> <div class=glyph2> 6-5
<span class=icon-headphones></span>icon-headphones<br> <div class=glyph3> <span class=icon-dice></span>icon-dice<br> <div class=glyph4> <span class=icon-phone></span>icon-phone<br> </body> </html> icon.css @font-face { font-family: 'icomoon'; src:url('icomoon/fonts/icomoon.eot?tvvl50'); src:url('icomoon/fonts/icomoon.eot?#iefixtvvl50') format('embedded-opentype'), url('icomoon/fonts/icomoon.woff?tvvl50') format('woff'), url('icomoon/fonts/icomoon.ttf?tvvl51') format('truetype'), url('icomoon/fonts/icomoon.svg?tvvl50#icomoon') format('svg'); font-weight: normal; font-style: normal; [class^=icon-] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;.icon-home:before { content: "\e600";.icon-headphones:before { content: "\e601";.icon-dice:before { content: "\e603";.icon-phone:before { content: "\e602"; 6-6
[class^=glyph] { margin-top: 20px; font-size: 40px;.glyph1 { color: lightblue;.glyph2 { color: blue;.glyph3 { color: green;.glyph4 { color: red; 6-7