SlideShare une entreprise Scribd logo
1  sur  60
Télécharger pour lire hors ligne
談笑揭秘CSS3
INSTRUCTOR: Anistar Sung
13年5月26日星期日
Anistar Sung
宋志峰
http://www.facebook.com/anistarsung
Mobile Developer
Client Developer
Server Developer
Instructor & Consulter & Author
http://blog.riaproject.com
13年5月26日星期日
iOS / Android / Flash / HTML5 / PHP ...
專注於:
13年5月26日星期日
<table>用的好好的我幹嘛要用CSS3?
13年5月26日星期日
因為這樣很”潮”~
13年5月26日星期日
當然不是!
13年5月26日星期日
其實CSS3是撒尿牛丸來著
13年5月26日星期日
因為: HTML 跟 JAVASCRIPT 根本不夠用
13年5月26日星期日
在前端頁面有太多的UI/UX需求
13年5月26日星期日
因為: 就是快不囉說
13年5月26日星期日
CSS在正常狀況下效率遠高出JAVASCRIPT
13年5月26日星期日
因為: 服用後連SERVER都考100分啦
13年5月26日星期日
如何提升Server的承載量
⼀一直大家想破腦袋的問題
13年5月26日星期日
沒有圖片沒有額外流量與要求
13年5月26日星期日
看看人家怎麼做 (CSS Sprite)
13年5月26日星期日
因為: BACKEND終於可以大掃除了
13年5月26日星期日
外觀跟邏輯混在⼀一起舒服嗎 ?
13年5月26日星期日
因為: 我的近視全好了
13年5月26日星期日
現在什麼鬼螢幕都有
13年5月26日星期日
CCS3到底比CSS2多了啥?
13年5月26日星期日
細緻又強大的選擇器(SELECTOR)
13年5月26日星期日
CSS3多了幾十組新的選擇器
Child Selector
Attribute Selector
Pseudo-Class UI Selector
Negation Pseudo-Class Selector
Target Pseudo-Class Selector
Structural Selector
13年5月26日星期日
簡易好用的顏色呈現方法
13年5月26日星期日
支援Alpha與漸層
RGB
RGBA
HSL
HSLA
Opacity
Gradients
13年5月26日星期日
支援Alpha與漸層
13年5月26日星期日
美觀用好用的字體呈現
13年5月26日星期日
支援WebFont
@font-face
Text Shadow
Multi column text
13年5月26日星期日
可在網頁中使用任意字型
13年5月26日星期日
彈性好用的排版方法
13年5月26日星期日
display: box
display: inline-box
13年5月26日星期日
支援WebFont
@font-face
Text Shadow
Multi column text
符合多種瀏覽器解析度體驗
13年5月26日星期日
區塊的全新詮釋
13年5月26日星期日
區塊多元呈現
border-radius
border-image
box-shadow
background-size
13年5月26日星期日
更容易設置區塊外觀
13年5月26日星期日
支援圖形即時處理
13年5月26日星期日
支援Transform矩陣
2D Transforms
3D Transforms (2.5D)
13年5月26日星期日
2.5D的視覺呈現
13年5月26日星期日
原生動畫互動
13年5月26日星期日
支援原生動畫
Transitions
Keyframes animation
13年5月26日星期日
過場動畫處理
13年5月26日星期日
CSS的傳統迷思 TOP 5
13年5月26日星期日
TOP 1: CSS3完全是美術設計師的責任
13年5月26日星期日
UI與UX不能混為⼀一談
純美術設計師多排斥像是code的CSS
不懂CSS無法完成發揮JAVASCRIPT
13年5月26日星期日
CSS是程式設計的責任
13年5月26日星期日
TOP 2: CSS3只是畫面排版而已沒什麼了不起
13年5月26日星期日
畫面排版只是CSS的功能之⼀一
沒有CSS很多頁面的呈現是天方夜譚
CSS可有效的降低 JS 運算負擔
13年5月26日星期日
CSS3跟你以前想的不⼀一樣
13年5月26日星期日
TOP 3: 有了CSS3是完全無敵的
13年5月26日星期日
CSS3還是活在瀏覽器的框架下
即使在Mobile上還是有CSS的支援問題
你必須要有備案
13年5月26日星期日
13年5月26日星期日
 事情果然沒這麼單純
13年5月26日星期日
Top 4: 每個網頁很容易在瀏覽器中破掉
13年5月26日星期日
沒有搞清楚瀏覽器的運作機制
沒有對CSS全盤瞭解
經驗不夠或只專注單⼀一平台
13年5月26日星期日
 CSS博大精深,別偷懶
13年5月26日星期日
Top 5: CSS3開發成本高
13年5月26日星期日
CSS反而有助於重複使用
CSS易於調整
CSS可以抽離後端複雜度
13年5月26日星期日
千萬不要忽視維護這件事
13年5月26日星期日
現在,你準備好開始使用CSS3了嗎?
13年5月26日星期日
13年5月26日星期日
Q&A
13年5月26日星期日

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

談笑揭秘CSS3