CSS3 Basic

http://MobileDev.TW

Transcript

1. http://MobileDev.TW 1 CSS3 Basic RyanChung@ncu.edu.tw CSS3 Basic
2. http://MobileDev.TW 大綱 1.  邊框 2.  背景 3.  變形 4.  文字 5.  遮罩 6.  動畫 CSS3 Basic 2
3. http://MobileDev.TW 1.邊框 CSS3 Basic 3
4. http://MobileDev.TW 1-1.圓角邊框 決定圓角的半徑 border-radius: 10px; -moz-border-radius: 10px; 4 CSS3 Basic
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. 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. 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. http://MobileDev.TW 1-2.邊框陰影 box-shadow: 10px 10px 5px #888888; 1. 水平距離 2. 垂直距離 3. 模糊程度(數值越大越模糊) 4. 陰影顏色 CSS3 Basic 8
9. http://MobileDev.TW 2.背景 CSS3 Basic 9
10. http://MobileDev.TW 2-1.背景圖片尺寸 background-size:80px 60px; 1. 寬度 2. 高度 CSS3 Basic 10
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. http://MobileDev.TW 2-2.多重背景Lab •  試著找兩張圖，利用多重背景的語法來進行合成 CSS3 Basic 12
13. http://MobileDev.TW 2-2.多重背景LabB •  製作一個可以切換外框的圖片 CSS3 Basic 13
14. http://MobileDev.TW 3.變形 CSS3 Basic 14
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. http://MobileDev.TW 3-1.變形 – 旋轉 3-1a.Lab 請讓車子的輪胎轉動 CSS3 Basic 16
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. 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. 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. http://MobileDev.TW 3-4.變形 – 漸長 3-4a.Lab 結合觸控事件與判斷，讓兩個長方條相遇 CSS3 Basic 20
21. http://MobileDev.TW 4.文字 CSS3 Basic 21
22. http://MobileDev.TW 4-1.文字陰影 text-shadow: 5px 10px 2px #000; 1. 陰影向右偏移5px 2. 陰影向下偏移10px 3. 陰影擴散為2px (越大陰影越模糊) 4. 陰影為黑色 22 CSS3 Basic
23. http://MobileDev.TW 4-2.使用特殊字形 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf') } 載入遠端字形 CSS3 Basic 23
24. http://MobileDev.TW 5.遮罩 CSS3 Basic 24
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. 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. http://MobileDev.TW 27 5-2.圖片遮罩 -webkit-mask-image: url(circle.svg) CSS3 Basic
28. http://MobileDev.TW 練習 製作一個切換網頁，可以在上面顯示： 1. 原始圖片 2. 圖片遮罩 3. 圓角圖片 4. 圖片陰影 28 CSS3 Basic
29. http://MobileDev.TW 6.動畫 搖擺的小天秤 CSS3 Basic 29
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