http://MobileDev.TW1
CSS3Basic
RyanChung@ncu.edu.tw
CSS3 Basic
http://MobileDev.TW
大綱
1.  邊框
2.  背景
3.  變形
4.  文字
5.  遮罩
6.  動畫
CSS3 Basic 2
http://MobileDev.TW
1.邊框
CSS3 Basic 3
http://MobileDev.TW
1-1.圓角邊框
決定圓角的半徑
border-radius: 10px;
-moz-border-radius: 10px;
4CSS3 Basic
http://MobileDev.TW
1-1.圓角邊框
border-radius:25px;
CSS3 Basic 5
左上25px
右上25px
右下25px
左下25px
border-radius:25px 10px;
左上25px
...
http://MobileDev.TW
1-1.圓角邊框
border-radius:25px 10px 3px;
CSS3 Basic 6
border-radius:25px 10px 3px 40px;
左上25px
右上10px
右下 ...
http://MobileDev.TW
1-1.圓角邊框
直接指定特定角落
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-b...
http://MobileDev.TW
1-2.邊框陰影
box-shadow: 10px 10px 5px #888888;
1. 水平距離
2. 垂直距離
3. 模糊程度(數值越大越模糊)
4. 陰影顏色
CSS3 Basic 8
http://MobileDev.TW
2.背景
CSS3 Basic 9
http://MobileDev.TW
2-1.背景圖片尺寸
background-size:80px 60px;
1. 寬度
2. 高度
CSS3 Basic 10
http://MobileDev.TW
2-2.多重背景
background-image:url(img_flwr.gif),url(img_tree.gif);
重疊顯示多張背景圖片,儘量使用背景為透明的圖片
順序:前面的在上面
CSS3 ...
http://MobileDev.TW
2-2.多重背景Lab
•  試著找兩張圖,利用多重背景的語法來進行合成
CSS3 Basic 12
http://MobileDev.TW
2-2.多重背景LabB
•  製作一個可以切換外框的圖片
CSS3 Basic 13
http://MobileDev.TW
3.變形
CSS3 Basic 14
http://MobileDev.TW
3-1.變形 – 旋轉
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-ms-tran...
http://MobileDev.TW
3-1.變形 – 旋轉
3-1a.Lab 請讓車子的輪胎轉動
CSS3 Basic 16
http://MobileDev.TW
3-2.變形 – 縮放
transform:scale(2,4);
-webkit-transform:scale(2,4); /* Safari and Chrome */
-ms-transform:...
http://MobileDev.TW
3-3.變形 – 歪斜
transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
...
http://MobileDev.TW
3-4.變形 – 漸長
transition:width 2s;
-webkit-transition:width 2s; /*Safari and Chrome*/
-ms-transition:wid...
http://MobileDev.TW
3-4.變形 – 漸長
3-4a.Lab 結合觸控事件與判斷,讓兩個長方條相遇
CSS3 Basic 20
http://MobileDev.TW
4.文字
CSS3 Basic 21
http://MobileDev.TW
4-1.文字陰影
text-shadow: 5px 10px 2px #000;
1. 陰影向右偏移5px
2. 陰影向下偏移10px
3. 陰影擴散為2px (越大陰影越模糊)
4. 陰影為黑色
22C...
http://MobileDev.TW
4-2.使用特殊字形
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
}
載入遠端字形
CSS3 Basic ...
http://MobileDev.TW
5.遮罩
CSS3 Basic 24
http://MobileDev.TW
-webkit-mask-box-image: url(mask.png) 50 50 50 50 stretch stretch;
1.遮罩圖片
2~5.上、右、下、左距離
6,7.水平樣式(stret...
http://MobileDev.TW
-webkit-mask-box-image: url(stamp.svg) 30 30 30 30 round round;
1.遮罩圖片
2~5.上、右、下、左距離
6,7.水平樣式(stretch/...
http://MobileDev.TW27
5-2.圖片遮罩
-webkit-mask-image: url(circle.svg)
CSS3 Basic
http://MobileDev.TW
練習
製作一個切換網頁,可以在上面顯示:
1. 原始圖片
2. 圖片遮罩
3. 圓角圖片
4. 圖片陰影
28CSS3 Basic
http://MobileDev.TW
6.動畫
搖擺的小天秤
CSS3 Basic 29
http://MobileDev.TW
6.動畫
•  -webkit-keyframes 定義動畫影格
•  名稱
•  可設定from、to或x%
•  -webkit-animation 定義動畫屬性
•  name:名稱,與keyfra...
Upcoming SlideShare
Loading in …5
×

CSS3 Basic

2,338 views

Published on

Published in: Technology, Education
  • Be the first to comment

CSS3 Basic

  1. 1. http://MobileDev.TW1 CSS3Basic RyanChung@ncu.edu.tw CSS3 Basic
  2. 2. http://MobileDev.TW 大綱 1.  邊框 2.  背景 3.  變形 4.  文字 5.  遮罩 6.  動畫 CSS3 Basic 2
  3. 3. http://MobileDev.TW 1.邊框 CSS3 Basic 3
  4. 4. http://MobileDev.TW 1-1.圓角邊框 決定圓角的半徑 border-radius: 10px; -moz-border-radius: 10px; 4CSS3 Basic
  5. 5. http://MobileDev.TW 1-1.圓角邊框 border-radius:25px; CSS3 Basic 5 左上25px 右上25px 右下25px 左下25px border-radius:25px 10px; 左上25px 右上10px 右下25px 左下10px
  6. 6. http://MobileDev.TW 1-1.圓角邊框 border-radius:25px 10px 3px; CSS3 Basic 6 border-radius:25px 10px 3px 40px; 左上25px 右上10px 右下 3px 左下10px 左上25px 右上10px 右下 3px 左下40px
  7. 7. http://MobileDev.TW 1-1.圓角邊框 直接指定特定角落 border-bottom-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomleft: 10px;  -moz-border-radius-topright: 10px; 7 亦可用於圖片 ( Firefox,Chrome, Safari ) CSS3 Basic
  8. 8. http://MobileDev.TW 1-2.邊框陰影 box-shadow: 10px 10px 5px #888888; 1. 水平距離 2. 垂直距離 3. 模糊程度(數值越大越模糊) 4. 陰影顏色 CSS3 Basic 8
  9. 9. http://MobileDev.TW 2.背景 CSS3 Basic 9
  10. 10. http://MobileDev.TW 2-1.背景圖片尺寸 background-size:80px 60px; 1. 寬度 2. 高度 CSS3 Basic 10
  11. 11. http://MobileDev.TW 2-2.多重背景 background-image:url(img_flwr.gif),url(img_tree.gif); 重疊顯示多張背景圖片,儘量使用背景為透明的圖片 順序:前面的在上面 CSS3 Basic 11 http://d.lanrentuku.com/down/png/0909/Somatic-Ramp-Champ-Win/Tiki-Man.png http://www.backyardfarmer.us/images/grass.png
  12. 12. http://MobileDev.TW 2-2.多重背景Lab •  試著找兩張圖,利用多重背景的語法來進行合成 CSS3 Basic 12
  13. 13. http://MobileDev.TW 2-2.多重背景LabB •  製作一個可以切換外框的圖片 CSS3 Basic 13
  14. 14. http://MobileDev.TW 3.變形 CSS3 Basic 14
  15. 15. http://MobileDev.TW 3-1.變形 – 旋轉 transform:rotate(30deg); -webkit-transform:rotate(30deg); /* Safari and Chrome */ -ms-transform:rotate(30deg); /* IE 9*/ 控制旋轉的度數 CSS3 Basic 15
  16. 16. http://MobileDev.TW 3-1.變形 – 旋轉 3-1a.Lab 請讓車子的輪胎轉動 CSS3 Basic 16
  17. 17. http://MobileDev.TW 3-2.變形 – 縮放 transform:scale(2,4); -webkit-transform:scale(2,4); /* Safari and Chrome */ -ms-transform:scale(2,4); /* IE 9 */ 水平, 垂直 可小於1 CSS3 Basic 17
  18. 18. http://MobileDev.TW 3-3.變形 – 歪斜 transform:skew(30deg,20deg); -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -ms-transform:skew(30deg,20deg); /* IE 9 */ 水平, 垂直 CSS3 Basic 18
  19. 19. http://MobileDev.TW 3-4.變形 – 漸長 transition:width 2s; -webkit-transition:width 2s; /*Safari and Chrome*/ -ms-transition:width 2s; /*IE 9*/ 寬度/高度 延遲秒數 CSS3 Basic 19
  20. 20. http://MobileDev.TW 3-4.變形 – 漸長 3-4a.Lab 結合觸控事件與判斷,讓兩個長方條相遇 CSS3 Basic 20
  21. 21. http://MobileDev.TW 4.文字 CSS3 Basic 21
  22. 22. http://MobileDev.TW 4-1.文字陰影 text-shadow: 5px 10px 2px #000; 1. 陰影向右偏移5px 2. 陰影向下偏移10px 3. 陰影擴散為2px (越大陰影越模糊) 4. 陰影為黑色 22CSS3 Basic
  23. 23. http://MobileDev.TW 4-2.使用特殊字形 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf') } 載入遠端字形 CSS3 Basic 23
  24. 24. http://MobileDev.TW 5.遮罩 CSS3 Basic 24
  25. 25. http://MobileDev.TW -webkit-mask-box-image: url(mask.png) 50 50 50 50 stretch stretch; 1.遮罩圖片 2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 25 5-1.圖片箱形遮罩 CSS3 Basic
  26. 26. http://MobileDev.TW -webkit-mask-box-image: url(stamp.svg) 30 30 30 30 round round; 1.遮罩圖片 2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 26 5-1.圖片箱形遮罩 CSS3 Basic
  27. 27. http://MobileDev.TW27 5-2.圖片遮罩 -webkit-mask-image: url(circle.svg) CSS3 Basic
  28. 28. http://MobileDev.TW 練習 製作一個切換網頁,可以在上面顯示: 1. 原始圖片 2. 圖片遮罩 3. 圓角圖片 4. 圖片陰影 28CSS3 Basic
  29. 29. http://MobileDev.TW 6.動畫 搖擺的小天秤 CSS3 Basic 29
  30. 30. http://MobileDev.TW 6.動畫 •  -webkit-keyframes 定義動畫影格 •  名稱 •  可設定from、to或x% •  -webkit-animation 定義動畫屬性 •  name:名稱,與keyframes對應 •  duration:動畫播放時間長度(秒) •  iteration-count:播放次數( n or infinite) •  timing-function:ease、linear、ease-in、ease -out、ease-in-out CSS3 Basic 30

×