0
HTML5 & CSS3
                                  2010




Saturday, August 7, 2010
zibin
                           Web Evangelist

                                    twitter:zibin




Saturday, August 7,...
Saturday, August 7, 2010
Saturday, August 7, 2010
Why do open
                 standards matter?




Saturday, August 7, 2010
13717712538




Saturday, August 7, 2010
Saturday, August 7, 2010
Saturday, August 7, 2010
W3C                                                HTML4

                                   HTML                 XML
    ...
...  XHTML2    HTML4
            XHTML1.0 XHTML1.1. XHTML2


            ...while the ancestry of XHTML2 comes from HTML4,...
350                                            4 5
         W3C
                                                          ...
WHAT-WG


Saturday, August 7, 2010
<   />


                           HTML5    Text




Saturday, August 7, 2010
Text




                           http://devfiles.myopera.com/articles/572/idlist-url.htm


Saturday, August 7, 2010
Text




Saturday, August 7, 2010
Text




Saturday, August 7, 2010
<   />


                           HTML5    Text




Saturday, August 7, 2010
<embed src="http://player.youku.com/player.php/sid/
       XMTk1NjY4NDc2/v.swf" quality="high" width="480"
               ...
<   />


                    Video
                                    source: http://zibin.tehais.com/?p=1641




Saturda...
<   />


           CANVAS
                                    3D?



Saturday, August 7, 2010
<   />


                           SVG


Saturday, August 7, 2010
Saturday, August 7, 2010
<   />


                   Web Forms        Text




Saturday, August 7, 2010
type="date"




                              Text




Saturday, August 7, 2010
demo




Saturday, August 7, 2010
<   />


                  Appcache
                               http://dev.opera.com/articles/view/offline-applications-...
<   />


                           Geolocation
                                    Text   not html5




Saturday, August ...
<         />


                           Widgets
                               not html5
                               ...
W3C Standards
                           Browser Independent
                           Runs on phone, TV, desktop




Sat...
Saturday, August 7, 2010
demo




Saturday, August 7, 2010
HTML5
                           Semantics
                                       CSS3
                                   ...
<   />


                           CSS3


Saturday, August 7, 2010
Borders Background




Saturday, August 7, 2010
border-radius




       border-radius: 25px;




Saturday, August 7, 2010
border-radius




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



Saturday, August 7, 2010
border-radius




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




Saturday, August 7, 2010
border-radius




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


Saturday, August 7,...
multiple background images




Saturday, August 7, 2010
multiple background images




     background:
       url(rose.png) no-repeat 150px -20px,
       url(driedrose.png) no-r...
box-shadow




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




Saturday, August 7, 2010
box-shadow




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




Saturday, August 7, 2010
box-shadow




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

Saturday, August 7, 2010
Transitions Transform




Saturday, August 7, 2010
Transitions

Saturday, August 7, 2010
div {
     -o-transition-property: background-color,
   width, height;
     -o-transition-duration: 4s, 8s, 5s;
     -o-tr...
Transform

Saturday, August 7, 2010
Transform - translate
         -o-transform: translate(50px, 100px);




Saturday, August 7, 2010
Transform - scale
         -o-transform: scale(2.5);




Saturday, August 7, 2010
Transform - skew
         -o-transform: skew(10deg, 20deg)




Saturday, August 7, 2010
Transform - rotate
         -o-transform: rotate(30deg)




Saturday, August 7, 2010
Saturday, August 7, 2010
@font-face {
     src: url(DeutscheZierschrift.ttf) format("truetype");
     font-family: "Zierschrift";
     font-style: ...
SVG




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




Saturday, August 7, 2010
text-shadow




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




Saturday, August 7, 2010
text-shadow




         text-shadow:
         0 0 4px white, 0 -5px 4px #ff3,
         2px -10px 6px #fd3, -2px -15px 11p...
Saturday, August 7, 2010
Saturday, August 7, 2010
Saturday, August 7, 2010
Saturday, August 7, 2010
Dragonfly


JavaScript
CSS
HTTP Header
DOM




Saturday, August 7, 2010
Saturday, August 7, 2010
Future is Now


Saturday, August 7, 2010
<   :-)/>




Saturday, August 7, 2010
zibin AT opera.com
         www.opera.com/developer (      )
         zibin.tehais.com(     )
         twitter: zibin
    ...
love
                http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/
                spider web
               ...
Demo &  
                  background and borders articles
                  http://dev.opera.com/articles/view/css3-borde...
introduction to CSS2.1 and CSS3
                  http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3




...
Upcoming SlideShare
Loading in...5
×

Html5/CSS3 in shanghai 2010

2,023

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,023
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
188
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Html5/CSS3 in shanghai 2010"

  1. 1. HTML5 & CSS3 2010 Saturday, August 7, 2010
  2. 2. zibin Web Evangelist twitter:zibin Saturday, August 7, 2010
  3. 3. Saturday, August 7, 2010
  4. 4. Saturday, August 7, 2010
  5. 5. Why do open standards matter? Saturday, August 7, 2010
  6. 6. 13717712538 Saturday, August 7, 2010
  7. 7. Saturday, August 7, 2010
  8. 8. Saturday, August 7, 2010
  9. 9. 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 Saturday, August 7, 2010
  10. 10. ... 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 Saturday, August 7, 2010
  11. 11. 350 4 5 W3C 2008 http://dev.opera.com/articles/view/mama-w3c-validator-research-2/ Saturday, August 7, 2010
  12. 12. WHAT-WG Saturday, August 7, 2010
  13. 13. < /> HTML5 Text Saturday, August 7, 2010
  14. 14. Text http://devfiles.myopera.com/articles/572/idlist-url.htm Saturday, August 7, 2010
  15. 15. Text Saturday, August 7, 2010
  16. 16. Text Saturday, August 7, 2010
  17. 17. < /> HTML5 Text Saturday, August 7, 2010
  18. 18. <embed src="http://player.youku.com/player.php/sid/ XMTk1NjY4NDc2/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x- shockwave-flash"></embed> Saturday, August 7, 2010
  19. 19. < /> Video source: http://zibin.tehais.com/?p=1641 Saturday, August 7, 2010
  20. 20. < /> CANVAS 3D? Saturday, August 7, 2010
  21. 21. < /> SVG Saturday, August 7, 2010
  22. 22. Saturday, August 7, 2010
  23. 23. < /> Web Forms Text Saturday, August 7, 2010
  24. 24. type="date" Text Saturday, August 7, 2010
  25. 25. demo Saturday, August 7, 2010
  26. 26. < /> Appcache http://dev.opera.com/articles/view/offline-applications-html5-appcache/ Saturday, August 7, 2010
  27. 27. < /> Geolocation Text not html5 Saturday, August 7, 2010
  28. 28. < /> Widgets not html5 Text Saturday, August 7, 2010
  29. 29. W3C Standards Browser Independent Runs on phone, TV, desktop Saturday, August 7, 2010
  30. 30. Saturday, August 7, 2010
  31. 31. demo Saturday, August 7, 2010
  32. 32. HTML5 Semantics CSS3 Design Saturday, August 7, 2010
  33. 33. < /> CSS3 Saturday, August 7, 2010
  34. 34. Borders Background Saturday, August 7, 2010
  35. 35. border-radius border-radius: 25px; Saturday, August 7, 2010
  36. 36. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Saturday, August 7, 2010
  37. 37. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Saturday, August 7, 2010
  38. 38. border-radius Saturday, August 7, 2010
  39. 39. border-radius source: http://zibin.tehais.com/?p=1410 Saturday, August 7, 2010
  40. 40. multiple background images Saturday, August 7, 2010
  41. 41. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Saturday, August 7, 2010
  42. 42. box-shadow box-shadow: 10px 10px 0px #fff; Saturday, August 7, 2010
  43. 43. box-shadow box-shadow: 10px 10px 20px #fff; Saturday, August 7, 2010
  44. 44. box-shadow width, height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Saturday, August 7, 2010
  45. 45. Transitions Transform Saturday, August 7, 2010
  46. 46. Transitions Saturday, August 7, 2010
  47. 47. div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s; } Saturday, August 7, 2010
  48. 48. Transform Saturday, August 7, 2010
  49. 49. Transform - translate -o-transform: translate(50px, 100px); Saturday, August 7, 2010
  50. 50. Transform - scale -o-transform: scale(2.5); Saturday, August 7, 2010
  51. 51. Transform - skew -o-transform: skew(10deg, 20deg) Saturday, August 7, 2010
  52. 52. Transform - rotate -o-transform: rotate(30deg) Saturday, August 7, 2010
  53. 53. Saturday, August 7, 2010
  54. 54. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Saturday, August 7, 2010
  55. 55. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Saturday, August 7, 2010
  56. 56. text-shadow Saturday, August 7, 2010
  57. 57. text-shadow text-shadow: #000000 10px 10px 19px; Saturday, August 7, 2010
  58. 58. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Saturday, August 7, 2010
  59. 59. Saturday, August 7, 2010
  60. 60. Saturday, August 7, 2010
  61. 61. Saturday, August 7, 2010
  62. 62. Saturday, August 7, 2010
  63. 63. Dragonfly JavaScript CSS HTTP Header DOM Saturday, August 7, 2010
  64. 64. Saturday, August 7, 2010
  65. 65. Future is Now Saturday, August 7, 2010
  66. 66. < :-)/> Saturday, August 7, 2010
  67. 67. zibin AT opera.com www.opera.com/developer ( ) zibin.tehais.com( ) twitter: zibin slideshare.net/zibin PPT Saturday, August 7, 2010
  68. 68. love http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/ 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/ dinosaur http://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/ 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 me http://www.douban.com/photos/album/30539339/ expo http://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/ Saturday, August 7, 2010
  69. 69. Demo &   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 Geolocation demo http://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htm newspaper http://people.opera.com/zibin/newspaper/newspaper_test.html#image1 Saturday, August 7, 2010
  70. 70. introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Saturday, August 7, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×