html5/css3 in shanghai 2010
DESCRIPTION
TRANSCRIPT
2010 上海分享会HTML5 & CSS3
Saturday, August 7, 2010
谢子斌／zibinWeb Evangelist／网络布道者
twitter:zibin
Saturday, August 7, 2010
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。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
...虽然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
350万网页，只有4－5％通过W3C兼容。
2008 年http://dev.opera.com/articles/view/mama-w3c-validator-research-2/
Saturday, August 7, 2010
WHAT-WG网页超文本技术工作小组
Saturday, August 7, 2010
TextHTML5 语义<谈一谈/>
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
TextHTML5 功能<谈一谈/>
Saturday, August 7, 2010
<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
<谈一谈/>
Videosource: http://zibin.tehais.com/?p=1641
Saturday, August 7, 2010
CANVAS<谈一谈/>
3D?
Saturday, August 7, 2010
SVG<谈一谈/>
Saturday, August 7, 2010
Saturday, August 7, 2010
TextWeb Forms<谈一谈/>
Saturday, August 7, 2010
Text
type="date"
Saturday, August 7, 2010
废话少说，demo
Saturday, August 7, 2010
Appcache<谈一谈/>
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
应用缓存
Saturday, August 7, 2010
TextGeolocation<谈一谈/>
not html5
Saturday, August 7, 2010
TextWidgets<谈一谈/>
not html5
Saturday, August 7, 2010
W3C StandardsBrowser IndependentRuns on phone, TV, desktop
Saturday, August 7, 2010
Saturday, August 7, 2010
废话少说，demo
Saturday, August 7, 2010
CSS3HTML5Semantics Design
Saturday, August 7, 2010
CSS3<谈一谈/>
Saturday, August 7, 2010
Borders Background 边框背景
Saturday, August 7, 2010
border-radius圆角
border-radius: 25px;
Saturday, August 7, 2010
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-radius圆角
Saturday, August 7, 2010
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-top-left-radius: 10px;border-top-right-radius: 10px;
border-radius圆角
Saturday, August 7, 2010
border-radius圆角
Saturday, August 7, 2010
border-radius圆角
source: http://zibin.tehais.com/?p=1410
Saturday, August 7, 2010
多背景图片 multiple background images
Saturday, August 7, 2010
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
多背景图片 multiple background images
Saturday, August 7, 2010
阴影效果
box-shadow: 10px 10px 0px #fff;
box-shadow
Saturday, August 7, 2010
box-shadow: 10px 10px 20px #fff;
阴影效果 box-shadow
Saturday, August 7, 2010
! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !
阴影效果 box-shadow
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-transition-delay: 0s, 0s 2s;}
Saturday, August 7, 2010
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: normal; }
Saturday, August 7, 2010
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG 网络字型
Saturday, August 7, 2010
文字阴影 text-shadow
Saturday, August 7, 2010
text-shadow
text-shadow: #000000 10px 10px 19px;
文字阴影
Saturday, August 7, 2010
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
text-shadow文字阴影
Saturday, August 7, 2010
！我现在就想用 Saturday, August 7, 2010
Saturday, August 7, 2010
Saturday, August 7, 2010
Saturday, August 7, 2010
调试工具 JavaScriptCSSHTTP HeaderDOM
Dragonfly
Saturday, August 7, 2010
做前端是幸福的。。。
Saturday, August 7, 2010
Future is Now未来就是现在
Saturday, August 7, 2010
<谢谢:-)/>
Saturday, August 7, 2010
zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT
问答环节
Saturday, August 7, 2010
图片lovehttp://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/dinosaurhttp://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/using internethttp://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpgmehttp://www.douban.com/photos/album/30539339/expohttp://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/
Saturday, August 7, 2010
Demo & 文章background and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.htmlGeolocation demohttp://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htmnewspaperhttp://people.opera.com/zibin/newspaper/newspaper_test.html#image1
Saturday, August 7, 2010
其他参考introduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Saturday, August 7, 2010