css3大補貼 - coscup/gnome.asia
DESCRIPTION
TRANSCRIPT
![Page 1: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/1.jpg)
2010 COSCUP/GNOME.asia分享会CSS3大補貼
Saturday, August 14, 2010
![Page 2: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/2.jpg)
謝子斌/zibinWeb Evangelist/網絡佈道者
twitter:zibinhttp://www.slideshare.net/zibin
Saturday, August 14, 2010
![Page 3: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/3.jpg)
Saturday, August 14, 2010
![Page 4: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/4.jpg)
Saturday, August 14, 2010
![Page 5: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/5.jpg)
Saturday, August 14, 2010
![Page 6: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/6.jpg)
CSS3<谈一谈/>
Saturday, August 14, 2010
![Page 7: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/7.jpg)
Borders Background 边框背景
Saturday, August 14, 2010
![Page 8: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/8.jpg)
border-radius圆角
border-radius: 25px;
Saturday, August 14, 2010
![Page 9: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/9.jpg)
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-radius圆角
Saturday, August 14, 2010
![Page 10: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/10.jpg)
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-top-left-radius: 10px;border-top-right-radius: 10px;
border-radius圆角
Saturday, August 14, 2010
![Page 11: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/11.jpg)
border-radius圆角
Saturday, August 14, 2010
![Page 12: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/12.jpg)
border-radius圆角
source: http://zibin.tehais.com/?p=1410
Saturday, August 14, 2010
![Page 13: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/13.jpg)
多背景图片 multiple background images
Saturday, August 14, 2010
![Page 14: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/14.jpg)
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
多背景图片 multiple background images
Saturday, August 14, 2010
![Page 15: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/15.jpg)
阴影效果
box-shadow: 10px 10px 0px #fff;
box-shadow
Saturday, August 14, 2010
![Page 16: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/16.jpg)
box-shadow: 10px 10px 20px #fff;
阴影效果 box-shadow
Saturday, August 14, 2010
![Page 17: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/17.jpg)
! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !
阴影效果 box-shadow
Saturday, August 14, 2010
![Page 18: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/18.jpg)
Transitions Transform
转变
Saturday, August 14, 2010
![Page 19: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/19.jpg)
Transitions动态转变
Saturday, August 14, 2010
![Page 20: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/20.jpg)
div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s;}
Saturday, August 14, 2010
![Page 21: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/21.jpg)
Transform静态转变
Saturday, August 14, 2010
![Page 22: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/22.jpg)
Transform - translate-o-transform: translate(50px, 100px);
移动
Saturday, August 14, 2010
![Page 23: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/23.jpg)
Transform - scale-o-transform: scale(2.5);
大小
Saturday, August 14, 2010
![Page 24: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/24.jpg)
Transform - skew-o-transform: skew(10deg, 20deg)
歪斜
Saturday, August 14, 2010
![Page 25: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/25.jpg)
Transform - rotate-o-transform: rotate(30deg)
转动
Saturday, August 14, 2010
![Page 26: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/26.jpg)
网络字型Saturday, August 14, 2010
![Page 27: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/27.jpg)
@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }
Saturday, August 14, 2010
![Page 28: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/28.jpg)
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG 网络字型
Saturday, August 14, 2010
![Page 29: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/29.jpg)
SVG 网络字型
Saturday, August 14, 2010
![Page 30: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/30.jpg)
文字阴影 text-shadow
Saturday, August 14, 2010
![Page 31: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/31.jpg)
text-shadow
text-shadow: #000000 10px 10px 19px;
文字阴影
Saturday, August 14, 2010
![Page 32: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/32.jpg)
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 14, 2010
![Page 33: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/33.jpg)
Saturday, August 14, 2010
![Page 34: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/34.jpg)
opacity
opacity: 1.0;
透明
opacity: 0.2; opacity: 0.5;
Saturday, August 14, 2010
![Page 35: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/35.jpg)
rgba/hsla透明
rgba(255,0,0,1.0);
rgba(255,0,0,0.8);
rgba(255,0,0,0.6);
rgba(255,0,0,0.4);
rgba(255,0,0,0.2);
Saturday, August 14, 2010
![Page 36: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/36.jpg)
!我現在就要用 Saturday, August 14, 2010
![Page 37: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/37.jpg)
Progressive Enhancement
Graceful Degradation
Saturday, August 14, 2010
![Page 38: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/38.jpg)
Saturday, August 14, 2010
![Page 39: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/39.jpg)
Saturday, August 14, 2010
![Page 40: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/40.jpg)
雖然他是一個老爺車。。。
Saturday, August 14, 2010
![Page 41: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/41.jpg)
雖然他是一個老爺車。。。
不過他還是有權利“上(馬)路”Saturday, August 14, 2010
![Page 42: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/42.jpg)
Vendor Prefix
-moz-border-radius
-webkit-border-radius
-o-border-radius
-ms-border-radius
border-radius
CSS3
Saturday, August 14, 2010
![Page 43: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/43.jpg)
Saturday, August 14, 2010
![Page 44: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/44.jpg)
Saturday, August 14, 2010
![Page 45: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/45.jpg)
Saturday, August 14, 2010
![Page 46: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/46.jpg)
调试工具 JavaScriptCSSHTTP HeaderDOM
Dragonfly
Saturday, August 14, 2010
![Page 47: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/47.jpg)
有了CSS3是幸福的。。。
Saturday, August 14, 2010
![Page 48: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/48.jpg)
Future is Now未来就是现在
Saturday, August 14, 2010
![Page 49: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/49.jpg)
<谢谢:-)/>
Saturday, August 14, 2010
![Page 50: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/50.jpg)
zibin AT opera.comwww.opera.com/developer (团队)zibin.tehais.com(个人)twitter: zibin可以在slideshare.net/zibin找到今天的PPT
问答环节
Saturday, August 14, 2010
![Page 51: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/51.jpg)
图片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/mehttp://www.douban.com/photos/album/30539339/expohttp://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/color cupshttp://www.flickr.com/photos/jenny-pics/
Saturday, August 14, 2010
![Page 52: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/52.jpg)
图片2vintage car 2http://www.flickr.com/photos/infomatique/3741725042/sizes/l/in/photostream/gnutellhttp://www.flickr.com/photos/geishabot/2341580658/sizes/o/in/photostream/bread loafhttp://www.flickr.com/photos/lizard_queen/88663944/sizes/o/in/photostream/
Saturday, August 14, 2010
![Page 53: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/53.jpg)
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 14, 2010
![Page 54: CSS3大補貼 - COSCUP/GNOME.asia](https://reader031.vdocument.in/reader031/viewer/2022031520/54b412554a7959e10c8b4648/html5/thumbnails/54.jpg)
其他参考introduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Saturday, August 14, 2010