CSS3 Basic

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
右上10px
右下25px
左下10px

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

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

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 Basic 11
http://d.lanrentuku.com/down/png/0909/Somatic-Ramp-Champ-Win/Tiki-Man.png
http://www.backyardfarmer.us/images/grass.png

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-transform:rotate(30deg); /* IE 9*/
控制旋轉的度數
CSS3 Basic 15

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:scale(2,4); /* IE 9 */
水平, 垂直
可小於1
CSS3 Basic 17

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

http://MobileDev.TW
3-4.變形 – 漸長
transition:width 2s;
-webkit-transition:width 2s; /*Safari and Chrome*/
-ms-transition:width 2s; /*IE 9*/
寬度/高度延遲秒數
CSS3 Basic 19

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. 陰影為黑色
22CSS3 Basic

http://MobileDev.TW
4-2.使用特殊字形
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
}
載入遠端字形
CSS3 Basic 23

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.水平樣式(stretch/round)、垂直樣式
25
5-1.圖片箱形遮罩
CSS3 Basic

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

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：名稱，與keyframes對應
•  duration：動畫播放時間長度(秒)
•  iteration-count：播放次數( n or infinite)
•  timing-function：ease、linear、ease-in、ease
-out、ease-in-out
CSS3 Basic 30

CSS3 Basic

More Related Content

Similar to CSS3 Basic

More from Ryan Chung

CSS3 Basic