Downloaded 332 times
Uploaded byZi Bin Cheah
谈一谈HTML5/CSS3 @ WebRebuild 2010
The document appears to be a presentation slide deck on HTML5 and CSS3 given by Zi Bin of Opera on July 20, 2010. It covers topics such as CSS3 properties like border-radius, box-shadow, text-shadow, transitions, transforms, multiple backgrounds, and @font-face. It also briefly mentions HTML5 features like video, canvas, and forms. The presentation encourages the use of open standards and provides references for further information.
More Related Content
Similar to 谈一谈HTML5/CSS3 @ WebRebuild 2010
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
谈一谈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
- 4.
- 5.
- 6.
- 7. CSS3 HTML5 Tuesday, July 20, 2010
- 8. CSS3 HTML5 Tuesday, July 20, 2010
- 9.
- 10.
- 11.
- 12. < /> HTML Tuesday, July 20, 2010
- 13. 13717712538 13717712538 Tuesday, July 20, 2010
- 14.
- 15. Why do open standards matter? Tuesday, July 20, 2010
- 16.
- 17.
- 18.
- 19.
- 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.
- 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, July20, 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.
- 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.
- 40.
- 41.
- 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.
- 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.
- 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.
- 53.
- 54.
- 55.
- 56.
- 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 licenseimage 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