谈一谈html5/css3 @ webrebuild 2010

61
<谈一谈/> HTML5 & CSS3 2010 WebRebuild.org/ W3C day Tuesday, July 20, 2010

Upload: zi-bin-cheah

Post on 07-Nov-2014

7.504 views

Category:

Technology


11 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 谈一谈HTML5/CSS3 @ WebRebuild 2010

<谈一谈/>

HTML5 & CSS32010 WebRebuild.org/ W3C day

Tuesday, July 20, 2010

Page 2: 谈一谈HTML5/CSS3 @ WebRebuild 2010

<NAME/>

Zi Bin<WORK/>

Opera twitter:zibin谢子斌

Tuesday, July 20, 2010

Page 3: 谈一谈HTML5/CSS3 @ WebRebuild 2010

谈HTML政治谈HTML5运用谈超酷CSS3

Tuesday, July 20, 2010

Page 4: 谈一谈HTML5/CSS3 @ WebRebuild 2010

请举手。。。

Tuesday, July 20, 2010

Page 5: 谈一谈HTML5/CSS3 @ WebRebuild 2010

请举手。。。

如果你做前端开发

Tuesday, July 20, 2010

Page 6: 谈一谈HTML5/CSS3 @ WebRebuild 2010

如果你开始使用CSS3

请举手。。。

如果你做前端开发

Tuesday, July 20, 2010

Page 7: 谈一谈HTML5/CSS3 @ WebRebuild 2010

如果你开始使用CSS3

如果你开始使用HTML5

请举手。。。

如果你做前端开发

Tuesday, July 20, 2010

Page 8: 谈一谈HTML5/CSS3 @ WebRebuild 2010

如果你开始使用CSS3

如果你开始使用HTML5

请举手。。。

如果你做前端开发

如果你就是懒得举手

Tuesday, July 20, 2010

Page 9: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 10: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 11: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 12: 谈一谈HTML5/CSS3 @ WebRebuild 2010

<谈一谈/>

HTML 政治

Tuesday, July 20, 2010

Page 13: 谈一谈HTML5/CSS3 @ WebRebuild 2010

1371771253813717712538

Tuesday, July 20, 2010

Page 14: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 15: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Why do open standards matter?

Tuesday, July 20, 2010

Page 16: 谈一谈HTML5/CSS3 @ WebRebuild 2010

13717712538

Tuesday, July 20, 2010

Page 17: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 18: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 19: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 20: 谈一谈HTML5/CSS3 @ WebRebuild 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年十一月

Tuesday, July 20, 2010

Page 21: 谈一谈HTML5/CSS3 @ WebRebuild 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年八月

Tuesday, July 20, 2010

Page 22: 谈一谈HTML5/CSS3 @ WebRebuild 2010

WHAT-WG网页超文本技术工作小组

Tuesday, July 20, 2010

Page 23: 谈一谈HTML5/CSS3 @ WebRebuild 2010

<谈一谈/>

Video

Tuesday, July 20, 2010

Page 24: 谈一谈HTML5/CSS3 @ WebRebuild 2010

CANVAS<谈一谈/>

Tuesday, July 20, 2010

Page 25: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Web Forms<谈一谈/>

Tuesday, July 20, 2010

Page 26: 谈一谈HTML5/CSS3 @ WebRebuild 2010

CSS3HTML5Semantics Design

Tuesday, July 20, 2010

Page 27: 谈一谈HTML5/CSS3 @ WebRebuild 2010

CSS3<谈一谈/>

Tuesday, July 20, 2010

Page 28: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Borders Background 边框背景

Tuesday, July 20, 2010

Page 29: 谈一谈HTML5/CSS3 @ WebRebuild 2010

border-radius圆角

border-radius: 25px;

Tuesday, July 20, 2010

Page 30: 谈一谈HTML5/CSS3 @ WebRebuild 2010

border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;

border-radius圆角

Tuesday, July 20, 2010

Page 31: 谈一谈HTML5/CSS3 @ WebRebuild 2010

border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;

border-top-left-radius: 10px;border-top-right-radius: 10px;

border-radius圆角

Tuesday, July 20, 2010

Page 32: 谈一谈HTML5/CSS3 @ WebRebuild 2010

border-radius圆角

Tuesday, July 20, 2010

Page 33: 谈一谈HTML5/CSS3 @ WebRebuild 2010

border-radius圆角

source: http://zibin.tehais.com/?p=1410

Tuesday, July 20, 2010

Page 34: 谈一谈HTML5/CSS3 @ WebRebuild 2010

多背景图片 multiple background images

Tuesday, July 20, 2010

Page 35: 谈一谈HTML5/CSS3 @ WebRebuild 2010

background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;

多背景图片 multiple background images

Tuesday, July 20, 2010

Page 36: 谈一谈HTML5/CSS3 @ WebRebuild 2010

阴影效果

box-shadow: 10px 10px 0px #fff;

box-shadow

Tuesday, July 20, 2010

Page 37: 谈一谈HTML5/CSS3 @ WebRebuild 2010

box-shadow: 10px 10px 20px #fff;

阴影效果 box-shadow

Tuesday, July 20, 2010

Page 38: 谈一谈HTML5/CSS3 @ WebRebuild 2010

! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !

阴影效果 box-shadow

Tuesday, July 20, 2010

Page 39: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transitions Transform

转变

Tuesday, July 20, 2010

Page 40: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transitions动态转变

Tuesday, July 20, 2010

Page 41: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transform静态转变

Tuesday, July 20, 2010

Page 42: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transform - translate-o-transform: translate(50px, 100px);

移动

Tuesday, July 20, 2010

Page 43: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transform - scale-o-transform: scale(2.5);

大小

Tuesday, July 20, 2010

Page 44: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transform - skew-o-transform: skew(10deg, 20deg)

歪斜

Tuesday, July 20, 2010

Page 45: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Transform - rotate-o-transform: rotate(30deg)

转动

Tuesday, July 20, 2010

Page 46: 谈一谈HTML5/CSS3 @ WebRebuild 2010

网络字型Tuesday, July 20, 2010

Page 47: 谈一谈HTML5/CSS3 @ WebRebuild 2010

@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }

Tuesday, July 20, 2010

Page 48: 谈一谈HTML5/CSS3 @ WebRebuild 2010

@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }

SVG 网络字型

Tuesday, July 20, 2010

Page 49: 谈一谈HTML5/CSS3 @ WebRebuild 2010

文字阴影 text-shadow

Tuesday, July 20, 2010

Page 50: 谈一谈HTML5/CSS3 @ WebRebuild 2010

text-shadow

text-shadow: #000000 10px 10px 19px;

文字阴影

Tuesday, July 20, 2010

Page 51: 谈一谈HTML5/CSS3 @ WebRebuild 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文字阴影

Tuesday, July 20, 2010

Page 52: 谈一谈HTML5/CSS3 @ WebRebuild 2010

!我现在就想用 Tuesday, July 20, 2010

Page 53: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 54: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 55: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Tuesday, July 20, 2010

Page 56: 谈一谈HTML5/CSS3 @ WebRebuild 2010

调试工具 JavaScriptCSSHTTP HeaderDOM

Dragonfly

Tuesday, July 20, 2010

Page 57: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Future is Now未来就是现在

Tuesday, July 20, 2010

Page 58: 谈一谈HTML5/CSS3 @ WebRebuild 2010

<谢谢:-)/>

Tuesday, July 20, 2010

Page 59: 谈一谈HTML5/CSS3 @ WebRebuild 2010

zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT

问答环节

Tuesday, July 20, 2010

Page 60: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/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/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.jpg

Tuesday, July 20, 2010

Page 61: 谈一谈HTML5/CSS3 @ WebRebuild 2010

Demo & artlclebackground 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.html

Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3

Tuesday, July 20, 2010