Downloaded 30 times
Uploaded byZi Bin Cheah
HTML5/CSS3 @ Baidu
This document discusses HTML5 and CSS3 standards. It provides an overview of the history and development of HTML standards by the W3C including HTML4, XHTML1/2, and the development of HTML5 in collaboration with the WHAT-WG. It also covers new CSS3 features for borders, backgrounds, box-shadows, multiple backgrounds, transforms, transitions, web fonts, and text effects. Examples are provided and sources for further information and demos are listed.
More Related Content
![[WebVisions 2010] CSS3 Workshop (Afternoon)](https://cdn.slidesharecdn.com/ss_thumbnails/2010-webvisions-css3-100521114422-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5/CSS3 @ Baidu
- 1. < /> HTML5 & CSS3 2010 Thursday, July 29, 2010
- 2. zibin Web Evangelist twitter:zibin :zibinone Thursday, July 29, 2010
- 3.
- 4.
- 5. 13717712538 13717712538 Thursday, July 29, 2010
- 6.
- 7. Why do open standards matter? Thursday, July 29, 2010
- 8.
- 9.
- 10.
- 11. 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 Thursday, July 29, 2010
- 12. ... 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 Thursday, July 29, 2010
- 13. 350 4 5 W3C 2008 http://dev.opera.com/articles/view/mama-w3c-validator-research-2/ Thursday, July 29, 2010
- 14.
- 15.
- 16. < /> Video source: http://zibin.tehais.com/?p=1641 Thursday, July 29, 2010
- 17. < /> CANVAS 3D? Thursday, July 29, 2010
- 18. < /> Web Forms Text Thursday, July 29, 2010
- 19.
- 20. < /> Appcache http://dev.opera.com/articles/view/offline-applications-html5-appcache/ Thursday, July 29, 2010
- 21. < /> Geolocation Text not html5 Thursday, July 29, 2010
- 22. < /> Widgets not html5 Text Thursday, July 29, 2010
- 23.
- 24. HTML5 Semantics CSS3 Design Thursday, July 29, 2010
- 25. < /> CSS3 Thursday, July 29, 2010
- 26.
- 27. border-radius border-radius: 25px; Thursday, July 29, 2010
- 28. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, July 29, 2010
- 29. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Thursday, July 29, 2010
- 30.
- 31. border-radius source: http://zibin.tehais.com/?p=1410 Thursday, July 29, 2010
- 32. multiple background images Thursday,July 29, 2010
- 33. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Thursday, July 29, 2010
- 34. box-shadow box-shadow: 10px 10px 0px #fff; Thursday, July 29, 2010
- 35. box-shadow box-shadow: 10px 10px 20px #fff; Thursday, July 29, 2010
- 36. box-shadow width,height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Thursday, July 29, 2010
- 37.
- 38.
- 39. div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s; } Thursday, July 29, 2010
- 40.
- 41. Transform - translate -o-transform: translate(50px, 100px); Thursday, July 29, 2010
- 42. Transform - scale -o-transform: scale(2.5); Thursday, July 29, 2010
- 43. Transform - skew -o-transform: skew(10deg, 20deg) Thursday, July 29, 2010
- 44. Transform - rotate -o-transform: rotate(30deg) Thursday, July 29, 2010
- 45.
- 46. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Thursday, July 29, 2010
- 47. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Thursday, July 29, 2010
- 48.
- 49. text-shadow text-shadow: #000000 10px 10px 19px; Thursday, July 29, 2010
- 50. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Thursday, July 29, 2010
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. Future is Now Thursday,July 29, 2010
- 58. < :-)/> Thursday, July 29, 2010
- 59. zibin AT opera.com www.opera.com/developer ( ) zibin.tehais.com( ) twitter: zibin slideshare.net/zibin PPT Thursday, July 29, 2010
- 60. 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/ Thursday, July 29, 2010
- 61. 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 Thursday, July 29, 2010
- 62. introduction to CSS2.1and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Thursday, July 29, 2010