Enviar pesquisa
Carregar
CSS3 Basic
•
2 gostaram
•
1,831 visualizações
Ryan Chung
Seguir
Tecnologia
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 30
Recomendados
CSS Basic
CSS Basic
Ryan Chung
HTML5 Basic
HTML5 Basic
Ryan Chung
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Html&css培训 舒克
Html&css培训 舒克
jay li
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
TicTacToe by HTML5 Canvas
TicTacToe by HTML5 Canvas
Ryan Chung
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Recomendados
CSS Basic
CSS Basic
Ryan Chung
HTML5 Basic
HTML5 Basic
Ryan Chung
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Html&css培训 舒克
Html&css培训 舒克
jay li
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
TicTacToe by HTML5 Canvas
TicTacToe by HTML5 Canvas
Ryan Chung
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Mais conteúdo relacionado
Mais de Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Mais de Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
CSS3 Basic
1.
http://MobileDev.TW1 CSS3Basic 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; 4CSS3
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. 陰影為黑色 22CSS3 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.TW27 5-2.圖片遮罩 -webkit-mask-image: url(circle.svg) CSS3 Basic
28.
http://MobileDev.TW 練習 製作一個切換網頁,可以在上面顯示: 1. 原始圖片 2. 圖片遮罩 3. 圓角圖片 4. 圖片陰影 28CSS3 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