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

4. Tuesday, July 20, 2010

5. Tuesday, July 20, 2010

6. CSS3
Tuesday, July 20, 2010

7. CSS3
HTML5
Tuesday, July 20, 2010

8. CSS3
HTML5
Tuesday, July 20, 2010

9. Tuesday, July 20, 2010

10. Tuesday, July 20, 2010

11. Tuesday, July 20, 2010

12. < />
HTML
Tuesday, July 20, 2010

13. 13717712538
13717712538
Tuesday, July 20, 2010

14. Tuesday, July 20, 2010

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

16. 13717712538
Tuesday, July 20, 2010

17. Tuesday, July 20, 2010

18. Tuesday, July 20, 2010

19. 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

22. WHAT-WG
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

28. Borders Background
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

32. border-radius
Tuesday, July 20, 2010

33. border-radius
source: http://zibin.tehais.com/?p=1410
Tuesday, July 20, 2010

34. multiple background images
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

39. Transitions Transform
Tuesday, July 20, 2010

40. Transitions
Tuesday, July 20, 2010

41. Transform
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

46. 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

49. text-shadow
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

52. Tuesday, July 20, 2010

53. Tuesday, July 20, 2010

54. Tuesday, July 20, 2010

55. Tuesday, July 20, 2010

56. Dragonfly
JavaScript
CSS
HTTP Header
DOM
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