CSS3大補貼 - COSCUP/GNOME.asia

2010 COSCUP/GNOME.asia分享会CSS3大補貼

Saturday, August 14, 2010

謝子斌／zibinWeb Evangelist／網絡佈道者

twitter:zibinhttp://www.slideshare.net/zibin

CSS3<谈一谈/>

Borders Background 边框背景

border-radius圆角

border-radius: 25px;

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

border-radius圆角

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

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

border-radius圆角

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

多背景图片 multiple background images

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

多背景图片 multiple background images

阴影效果

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

box-shadow

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

阴影效果 box-shadow

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

阴影效果 box-shadow

Transitions Transform

转变

Transitions动态转变

div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s;}

Transform静态转变

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

移动

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

大小

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

歪斜

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

转动

网络字型Saturday, August 14, 2010

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

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

SVG 网络字型

文字阴影 text-shadow

text-shadow

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

文字阴影

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

text-shadow文字阴影

opacity

opacity: 1.0;

透明

opacity: 0.2; opacity: 0.5;

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

Progressive Enhancement

Graceful Degradation

雖然他是一個老爺車。。。

不過他還是有權利“上（馬）路”Saturday, August 14, 2010

Vendor Prefix

-moz-border-radius

-webkit-border-radius

-o-border-radius

-ms-border-radius

border-radius

调试工具 JavaScriptCSSHTTP HeaderDOM

Dragonfly

有了CSS3是幸福的。。。

Future is Now未来就是现在

<谢谢:-)/>

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

问答环节

图片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/

图片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/

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

其他参考introduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3

CSS3大補貼 - COSCUP/GNOME.asia

Technology

Welcome to Apache OpenOffice 3.4 COSCUP 2012

eekboard a virtual keyboard for GNOME - COSCUP · eekboard a virtual keyboard for GNOME Daiki Ueno ueno@unixuser.org Red Hat, i18n team COSCUP / GNOME.Asia Summit 2010, Taipei, Taiwan

COSCUP 開源工作坊：Git workflows

Writing Web Apps in C++? - COSCUP Web... · 2019-02-23 · Writing Web Apps in C++? Eric Bidelman, Google COSCUP / GNOME.Asia - Taipei, Taiwan August 14, 2010 Saturday, August 14,

Hybrid Desktop/Web applications with WebKitGTK+ (COSCUP 2010)

Micro HTTP Server Implemented in C @ COSCUP 2016

Exploring New Paradigms of Computing for GNOME, GNOME.Asia 2010 Presentation

Bind Python and C @ COSCUP 2015

COSCUP: What, Why, and How

COSCUP 2014 - Make something as your wish

GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

COSCUP 從硬體到軟體

Introduction of Mozilla Hong Kong (COSCUP 2014)

Pingluweb @ Coscup 2013

Build your own COSCUP

GNOME.Asia 2009 Vietnam

COSCUP promoting in HP7

COSCUP - Fleet

Coscup SDN workshop - mininet

MozTW BoF at Coscup 2009