HTML5/CSS3 @ Baidu
62
<谈一谈/> 2010 百度分享会 HTML5 & CSS3 Thursday, July 29, 2010
-
Upload
zi-bin-cheah -
Category
Technology
-
view
1.390 -
download
0
description
HTML5 presentation @ Baidu, Beijing.
Transcript of HTML5/CSS3 @ Baidu
<谈一谈/>
2010 百度分享会HTML5 & CSS3
Thursday, July 29, 2010
谢子斌／zibinWeb Evangelist／网络布道者
twitter:zibin新浪微博:zibinone
Thursday, July 29, 2010
Thursday, July 29, 2010
回顾一下。。
互联网
从前Thursday, July 29, 2010
1371771253813717712538
Thursday, July 29, 2010
Thursday, July 29, 2010
Why do open standards matter?
Thursday, July 29, 2010
13717712538
Thursday, July 29, 2010
Thursday, July 29, 2010
Thursday, July 29, 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年十一月
Thursday, July 29, 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年八月
Thursday, July 29, 2010
350万网页，只有4－5％通过W3C兼容。
2008 年http://dev.opera.com/articles/view/mama-w3c-validator-research-2/
Thursday, July 29, 2010
Thursday, July 29, 2010
WHAT-WG网页超文本技术工作小组
Thursday, July 29, 2010
<谈一谈/>
Videosource: http://zibin.tehais.com/?p=1641
Thursday, July 29, 2010
CANVAS<谈一谈/>
3D?
Thursday, July 29, 2010
TextWeb Forms<谈一谈/>
Thursday, July 29, 2010
废话少说，demo
Thursday, July 29, 2010
Appcache<谈一谈/>
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
应用缓存
Thursday, July 29, 2010
TextGeolocation<谈一谈/>
not html5
Thursday, July 29, 2010
TextWidgets<谈一谈/>
not html5
Thursday, July 29, 2010
废话少说，demo
Thursday, July 29, 2010
CSS3HTML5Semantics Design
Thursday, July 29, 2010
CSS3<谈一谈/>
Thursday, July 29, 2010
Borders Background 边框背景
Thursday, July 29, 2010
border-radius圆角
border-radius: 25px;
Thursday, July 29, 2010
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-radius圆角
Thursday, July 29, 2010
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-top-left-radius: 10px;border-top-right-radius: 10px;
border-radius圆角
Thursday, July 29, 2010
border-radius圆角
Thursday, July 29, 2010
border-radius圆角
source: http://zibin.tehais.com/?p=1410
Thursday, July 29, 2010
多背景图片 multiple background images
Thursday, July 29, 2010
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
多背景图片 multiple background images
Thursday, July 29, 2010
阴影效果
box-shadow: 10px 10px 0px #fff;
box-shadow
Thursday, July 29, 2010
box-shadow: 10px 10px 20px #fff;
阴影效果 box-shadow
Thursday, July 29, 2010
! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !
阴影效果 box-shadow
Thursday, July 29, 2010
Transitions Transform
转变
Thursday, July 29, 2010
Transitions动态转变
Thursday, July 29, 2010
div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s;}
Thursday, July 29, 2010
Transform静态转变
Thursday, July 29, 2010
Transform - translate-o-transform: translate(50px, 100px);
移动
Thursday, July 29, 2010
Transform - scale-o-transform: scale(2.5);
大小
Thursday, July 29, 2010
Transform - skew-o-transform: skew(10deg, 20deg)
歪斜
Thursday, July 29, 2010
Transform - rotate-o-transform: rotate(30deg)
转动
Thursday, July 29, 2010
网络字型Thursday, July 29, 2010
@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }
Thursday, July 29, 2010
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG 网络字型
Thursday, July 29, 2010
文字阴影 text-shadow
Thursday, July 29, 2010
text-shadow
text-shadow: #000000 10px 10px 19px;
文字阴影
Thursday, July 29, 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文字阴影
Thursday, July 29, 2010
！我现在就想用 Thursday, July 29, 2010
Thursday, July 29, 2010
Thursday, July 29, 2010
Thursday, July 29, 2010
调试工具 JavaScriptCSSHTTP HeaderDOM
Dragonfly
Thursday, July 29, 2010
做前端是幸福的。。。
Thursday, July 29, 2010
Future is Now未来就是现在
Thursday, July 29, 2010
<谢谢:-)/>
Thursday, July 29, 2010
zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT
问答环节
Thursday, July 29, 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/
Thursday, July 29, 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
Thursday, July 29, 2010
其他参考introduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Thursday, July 29, 2010
