SlideShare a Scribd company logo
<      />


                         HTML5 & CSS3
                         2010 WebRebuild.org/ W3C day




Tuesday, July 20, 2010
<NAME/>

                                         Zi Bin
                         twitter:zibin
                         <WORK/>

                         Opera

Tuesday, July 20, 2010
HTML
                         HTML5
                             CSS3
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
CSS3




Tuesday, July 20, 2010
CSS3

                         HTML5




Tuesday, July 20, 2010
CSS3

                         HTML5




Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
<   />


                         HTML


Tuesday, July 20, 2010
13717712538
                          13717712538




Tuesday, July 20, 2010
Tuesday, July 20, 2010
Why do open
                 standards matter?




Tuesday, July 20, 2010
13717712538




Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
W3C                                                HTML4

                                   HTML                 XML
         W3C has no intention to extend HTML4 as such. Instead, further work is focusing on a
         reformulatoin of HTML in XML

                                                                                  1999




Tuesday, July 20, 2010
...  XHTML2    HTML4
            XHTML1.0 XHTML1.1. XHTML2


            ...while the ancestry of XHTML2 comes from HTML4, XHTML 1.0 and XHTML 1.1. It is not
            intended to be backward compatible with its earlier versions

                                                                                      2002




Tuesday, July 20, 2010
WHAT-WG


Tuesday, July 20, 2010
<   />


                    Video


Tuesday, July 20, 2010
<   />


           CANVAS


Tuesday, July 20, 2010
<   />


             Web Forms


Tuesday, July 20, 2010
HTML5
                         Semantics
                                     CSS3
                                      Design




Tuesday, July 20, 2010
<   />


                         CSS3


Tuesday, July 20, 2010
Borders Background




Tuesday, July 20, 2010
border-radius




       border-radius: 25px;




Tuesday, July 20, 2010
border-radius




    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;



Tuesday, July 20, 2010
border-radius




         border-bottom-left-radius: 40px;
         border-bottom-right-radius: 40px;
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;



Tuesday, July 20, 2010
border-radius




Tuesday, July 20, 2010
border-radius




                                         source: http://zibin.tehais.com/?p=1410


Tuesday, July 20, 2010
multiple background images




Tuesday, July 20, 2010
multiple background images




     background:
       url(rose.png) no-repeat 150px -20px,
       url(driedrose.png) no-repeat,! ! ! !   !   !
       url(fieldsky.jpg) no-repeat;

Tuesday, July 20, 2010
box-shadow




      box-shadow: 10px 10px 0px #fff;




Tuesday, July 20, 2010
box-shadow




    box-shadow: 10px 10px 20px #fff;




Tuesday, July 20, 2010
box-shadow




 width, height: 100px;
 box-shadow:10px 10px 20px #ff0000;
 border-radius:60px;

Tuesday, July 20, 2010
Transitions Transform




Tuesday, July 20, 2010
Transitions

Tuesday, July 20, 2010
Transform

Tuesday, July 20, 2010
Transform - translate
         -o-transform: translate(50px, 100px);




Tuesday, July 20, 2010
Transform - scale
         -o-transform: scale(2.5);




Tuesday, July 20, 2010
Transform - skew
         -o-transform: skew(10deg, 20deg)




Tuesday, July 20, 2010
Transform - rotate
         -o-transform: rotate(30deg)




Tuesday, July 20, 2010
Tuesday, July 20, 2010
@font-face {
     src: url(DeutscheZierschrift.ttf) format("truetype");
     font-family: "Zierschrift";
     font-style: normal;
     }

Tuesday, July 20, 2010
SVG




     @font-face {
     !      font-family: Blackout-Midnight;
     !      src: url(Blackout-Midnight.ttf) format("truetype");
     ! }

Tuesday, July 20, 2010
text-shadow




Tuesday, July 20, 2010
text-shadow




    text-shadow: #000000 10px 10px 19px;




Tuesday, July 20, 2010
text-shadow




         text-shadow:
         0 0 4px white, 0 -5px 4px #ff3,
         2px -10px 6px #fd3, -2px -15px 11px #f80,
         2px -25px 18px #f20;




Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Dragonfly


JavaScript
CSS
HTTP Header
DOM




Tuesday, July 20, 2010
Future is Now


Tuesday, July 20, 2010
<   :-)/>




Tuesday, July 20, 2010
zibin AT opera.com
         www.opera.com/developer (      )
         zibin.tehais.com(     )
         twitter: zibin
                 slideshare.net/zibin       PPT



Tuesday, July 20, 2010
Creative Commons license image
                  clap
                  http://www.flickr.com/photos/tudor/953584594/
                  spider web
                  http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
                  now
                  http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
                  maximize-profits
                  shadow
                  http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
                  transitions transform
                  http://www.flickr.com/photos/28481088@N00/1298930743/
                  borders and background
                  http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
                  web fonts
                  http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
                  clapping photo
                  http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
                  sun flower
                  http://www.flickr.com/photos/treyevan/429692359/sizes/l/
                  transition
                  http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
                  using internet
                  http://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpg


Tuesday, July 20, 2010
Demo & artlcle
                  background and borders articles
                  http://dev.opera.com/articles/view/css3-border-background-boxshadow/
                  border-radius flower demo
                  http://people.opera.com/zibin/css3flower/flower.html
                  transiitons and transform article
                  http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
                  web fonts article
                  http://dev.opera.com/articles/view/seven-web-fonts-showcases/
                  9elements HTML5 demo
                  http://9elements.com/io/projects/html5/canvas/
                  David’s photobook demo
                  http://people.opera.com/dstorey/transforms/image-gallery.html




                  Presentation reference
                  introduction to CSS2.1 and CSS3
                  http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3




Tuesday, July 20, 2010

More Related Content

Viewers also liked

HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
Zac Gordon
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
mbeatrizoliveira
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
Gopi A
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise Jacobs
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
Achmad Solichin
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 

Viewers also liked (8)

HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 

Similar to 谈一谈HTML5/CSS3 @ WebRebuild 2010

Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
Zi Bin Cheah
 
CSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonCSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp Boston
Jen Simmons
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asia
Zi Bin Cheah
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
Zi Bin Cheah
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talk
Zi Bin Cheah
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project Argo
Wesley Lindamood
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3
Meagan Fisher
 
Introduction to jQuery :: CharlotteJS
Introduction to jQuery :: CharlotteJSIntroduction to jQuery :: CharlotteJS
Introduction to jQuery :: CharlotteJS
gjj391
 
Cassandra nosql eu 2010
Cassandra nosql eu 2010Cassandra nosql eu 2010
Cassandra nosql eu 2010
jbellis
 
Mobile Cross Platform
Mobile Cross PlatformMobile Cross Platform
Mobile Cross Platform
Nikolai Onken
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
Johan Ronsse
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
PavingWays Ltd.
 
GLT Vol.24 とべとべカメラマン
GLT Vol.24 とべとべカメラマンGLT Vol.24 とべとべカメラマン
GLT Vol.24 とべとべカメラマン
key-cc yamaguchiintlab
 
Web App Scaffolding - FOWA London 2010
Web App Scaffolding - FOWA London 2010Web App Scaffolding - FOWA London 2010
Web App Scaffolding - FOWA London 2010
Cal Henderson
 
20100626-OSC2010do-RubySapporo
20100626-OSC2010do-RubySapporo20100626-OSC2010do-RubySapporo
20100626-OSC2010do-RubySapporo
Koji SHIMADA
 
ソーシャルグラフとEdgeRank
ソーシャルグラフとEdgeRankソーシャルグラフとEdgeRank
ソーシャルグラフとEdgeRank
Naoki Yanai
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиков
Yuriy Artyukh
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standards
Zi Bin Cheah
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
Bastian Hofmann
 
Momentum
MomentumMomentum
Momentum
ekozoriz
 

Similar to 谈一谈HTML5/CSS3 @ WebRebuild 2010 (20)

Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
 
CSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp BostonCSS3: The Future is Now at Drupal Design Camp Boston
CSS3: The Future is Now at Drupal Design Camp Boston
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asia
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talk
 
The Tech Side of Project Argo
The Tech Side of Project ArgoThe Tech Side of Project Argo
The Tech Side of Project Argo
 
Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3Creating Lifelike Designs with CSS3
Creating Lifelike Designs with CSS3
 
Introduction to jQuery :: CharlotteJS
Introduction to jQuery :: CharlotteJSIntroduction to jQuery :: CharlotteJS
Introduction to jQuery :: CharlotteJS
 
Cassandra nosql eu 2010
Cassandra nosql eu 2010Cassandra nosql eu 2010
Cassandra nosql eu 2010
 
Mobile Cross Platform
Mobile Cross PlatformMobile Cross Platform
Mobile Cross Platform
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
GLT Vol.24 とべとべカメラマン
GLT Vol.24 とべとべカメラマンGLT Vol.24 とべとべカメラマン
GLT Vol.24 とべとべカメラマン
 
Web App Scaffolding - FOWA London 2010
Web App Scaffolding - FOWA London 2010Web App Scaffolding - FOWA London 2010
Web App Scaffolding - FOWA London 2010
 
20100626-OSC2010do-RubySapporo
20100626-OSC2010do-RubySapporo20100626-OSC2010do-RubySapporo
20100626-OSC2010do-RubySapporo
 
ソーシャルグラフとEdgeRank
ソーシャルグラフとEdgeRankソーシャルグラフとEdgeRank
ソーシャルグラフとEdgeRank
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиков
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standards
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
 
Momentum
MomentumMomentum
Momentum
 

More from Zi Bin Cheah

W3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG ReportW3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG Report
Zi Bin Cheah
 
Html5games
Html5gamesHtml5games
Html5games
Zi Bin Cheah
 
Beyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real TimeBeyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real Time
Zi Bin Cheah
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah
 
不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5Zi Bin Cheah
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
Nigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile WebNigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile Web
Zi Bin Cheah
 
Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia Tour
Zi Bin Cheah
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesia
Zi Bin Cheah
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile web
Zi Bin Cheah
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
Zi Bin Cheah
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk Oslo
Zi Bin Cheah
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour Indonesia
Zi Bin Cheah
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes back
Zi Bin Cheah
 

More from Zi Bin Cheah (14)

W3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG ReportW3C HTML5 Chinese IG Report
W3C HTML5 Chinese IG Report
 
Html5games
Html5gamesHtml5games
Html5games
 
Beyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real TimeBeyond HTML5:Device, Graphics, Orientation, Real Time
Beyond HTML5:Device, Graphics, Orientation, Real Time
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
 
不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5不懂HTML5 非好汉 Be a man, learn HTML5
不懂HTML5 非好汉 Be a man, learn HTML5
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Nigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile WebNigeria & Designing for the Mobile Web
Nigeria & Designing for the Mobile Web
 
Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia Tour
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesia
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile web
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk Oslo
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour Indonesia
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes back
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 

谈一谈HTML5/CSS3 @ WebRebuild 2010

  • 1. < /> HTML5 & CSS3 2010 WebRebuild.org/ W3C day Tuesday, July 20, 2010
  • 2. <NAME/> Zi Bin twitter:zibin <WORK/> Opera Tuesday, July 20, 2010
  • 3. HTML HTML5 CSS3 Tuesday, July 20, 2010
  • 7. CSS3 HTML5 Tuesday, July 20, 2010
  • 8. CSS3 HTML5 Tuesday, July 20, 2010
  • 12. < /> HTML Tuesday, July 20, 2010
  • 13. 13717712538 13717712538 Tuesday, July 20, 2010
  • 15. Why do open standards matter? Tuesday, July 20, 2010
  • 20. W3C HTML4 HTML XML W3C has no intention to extend HTML4 as such. Instead, further work is focusing on a reformulatoin of HTML in XML 1999 Tuesday, July 20, 2010
  • 21. ... XHTML2 HTML4 XHTML1.0 XHTML1.1. XHTML2 ...while the ancestry of XHTML2 comes from HTML4, XHTML 1.0 and XHTML 1.1. It is not intended to be backward compatible with its earlier versions 2002 Tuesday, July 20, 2010
  • 23. < /> Video Tuesday, July 20, 2010
  • 24. < /> CANVAS Tuesday, July 20, 2010
  • 25. < /> Web Forms Tuesday, July 20, 2010
  • 26. HTML5 Semantics CSS3 Design Tuesday, July 20, 2010
  • 27. < /> CSS3 Tuesday, July 20, 2010
  • 29. border-radius border-radius: 25px; Tuesday, July 20, 2010
  • 30. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Tuesday, July 20, 2010
  • 31. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Tuesday, July 20, 2010
  • 33. border-radius source: http://zibin.tehais.com/?p=1410 Tuesday, July 20, 2010
  • 35. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Tuesday, July 20, 2010
  • 36. box-shadow box-shadow: 10px 10px 0px #fff; Tuesday, July 20, 2010
  • 37. box-shadow box-shadow: 10px 10px 20px #fff; Tuesday, July 20, 2010
  • 38. box-shadow width, height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Tuesday, July 20, 2010
  • 42. Transform - translate -o-transform: translate(50px, 100px); Tuesday, July 20, 2010
  • 43. Transform - scale -o-transform: scale(2.5); Tuesday, July 20, 2010
  • 44. Transform - skew -o-transform: skew(10deg, 20deg) Tuesday, July 20, 2010
  • 45. Transform - rotate -o-transform: rotate(30deg) Tuesday, July 20, 2010
  • 47. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Tuesday, July 20, 2010
  • 48. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Tuesday, July 20, 2010
  • 50. text-shadow text-shadow: #000000 10px 10px 19px; Tuesday, July 20, 2010
  • 51. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Tuesday, July 20, 2010
  • 57. Future is Now Tuesday, July 20, 2010
  • 58. < :-)/> Tuesday, July 20, 2010
  • 59. zibin AT opera.com www.opera.com/developer ( ) zibin.tehais.com( ) twitter: zibin slideshare.net/zibin PPT Tuesday, July 20, 2010
  • 60. Creative Commons license image clap http://www.flickr.com/photos/tudor/953584594/ spider web http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/ now http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to- maximize-profits shadow http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/ transitions transform http://www.flickr.com/photos/28481088@N00/1298930743/ borders and background http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/ web fonts http://www.flickr.com/photos/sekimura/4363831481/sizes/o/ clapping photo http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg sun flower http://www.flickr.com/photos/treyevan/429692359/sizes/l/ transition http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/ using internet http://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpg Tuesday, July 20, 2010
  • 61. Demo & artlcle background and borders articles http://dev.opera.com/articles/view/css3-border-background-boxshadow/ border-radius flower demo http://people.opera.com/zibin/css3flower/flower.html transiitons and transform article http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ web fonts article http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 9elements HTML5 demo http://9elements.com/io/projects/html5/canvas/ David’s photobook demo http://people.opera.com/dstorey/transforms/image-gallery.html Presentation reference introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Tuesday, July 20, 2010