谈一谈html5/css3 @ webrebuild 2010
Post on 07-Nov-2014
7.504 Views
Preview:
DESCRIPTION
TRANSCRIPT
<谈一谈/>
HTML5 & CSS32010 WebRebuild.org/ W3C day
Tuesday, July 20, 2010
<NAME/>
Zi Bin<WORK/>
Opera twitter:zibin谢子斌
Tuesday, July 20, 2010
谈HTML政治谈HTML5运用谈超酷CSS3
Tuesday, July 20, 2010
请举手。。。
Tuesday, July 20, 2010
请举手。。。
如果你做前端开发
Tuesday, July 20, 2010
如果你开始使用CSS3
请举手。。。
如果你做前端开发
Tuesday, July 20, 2010
如果你开始使用CSS3
如果你开始使用HTML5
请举手。。。
如果你做前端开发
Tuesday, July 20, 2010
如果你开始使用CSS3
如果你开始使用HTML5
请举手。。。
如果你做前端开发
如果你就是懒得举手
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
<谈一谈/>
HTML 政治
Tuesday, July 20, 2010
1371771253813717712538
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Why do open standards matter?
Tuesday, July 20, 2010
13717712538
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 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
...虽然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
WHAT-WG网页超文本技术工作小组
Tuesday, July 20, 2010
<谈一谈/>
Video
Tuesday, July 20, 2010
CANVAS<谈一谈/>
Tuesday, July 20, 2010
Web Forms<谈一谈/>
Tuesday, July 20, 2010
CSS3HTML5Semantics Design
Tuesday, July 20, 2010
CSS3<谈一谈/>
Tuesday, July 20, 2010
Borders Background 边框背景
Tuesday, July 20, 2010
border-radius圆角
border-radius: 25px;
Tuesday, July 20, 2010
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-radius圆角
Tuesday, July 20, 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
border-radius圆角
Tuesday, July 20, 2010
border-radius圆角
source: http://zibin.tehais.com/?p=1410
Tuesday, July 20, 2010
多背景图片 multiple background images
Tuesday, July 20, 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
阴影效果
box-shadow: 10px 10px 0px #fff;
box-shadow
Tuesday, July 20, 2010
box-shadow: 10px 10px 20px #fff;
阴影效果 box-shadow
Tuesday, July 20, 2010
! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !
阴影效果 box-shadow
Tuesday, July 20, 2010
Transitions Transform
转变
Tuesday, July 20, 2010
Transitions动态转变
Tuesday, July 20, 2010
Transform静态转变
Tuesday, July 20, 2010
Transform - translate-o-transform: translate(50px, 100px);
移动
Tuesday, July 20, 2010
Transform - scale-o-transform: scale(2.5);
大小
Tuesday, July 20, 2010
Transform - skew-o-transform: skew(10deg, 20deg)
歪斜
Tuesday, July 20, 2010
Transform - rotate-o-transform: rotate(30deg)
转动
Tuesday, July 20, 2010
网络字型Tuesday, July 20, 2010
@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }
Tuesday, July 20, 2010
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG 网络字型
Tuesday, July 20, 2010
文字阴影 text-shadow
Tuesday, July 20, 2010
text-shadow
text-shadow: #000000 10px 10px 19px;
文字阴影
Tuesday, July 20, 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
！我现在就想用 Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
Tuesday, July 20, 2010
调试工具 JavaScriptCSSHTTP HeaderDOM
Dragonfly
Tuesday, July 20, 2010
Future is Now未来就是现在
Tuesday, July 20, 2010
<谢谢:-)/>
Tuesday, July 20, 2010
zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT
问答环节
Tuesday, July 20, 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
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
top related