CSS3 2010 COSCUP/GNOME.asia Saturday, August 14, 2010 zibin Web - - PowerPoint PPT Presentation

▶
css3
SMART_READER_LITE
LIVE PREVIEW

CSS3 2010 COSCUP/GNOME.asia Saturday, August 14, 2010 zibin Web - - PowerPoint PPT Presentation

Oct 23, 2022 229 likes •786 views

CSS3 2010 COSCUP/GNOME.asia Saturday, August 14, 2010 zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Saturday, August 14, 2010 Saturday, August 14, 2010 Saturday, August

slide-1
SLIDE 1

2010 COSCUP/GNOME.asia分享会

CSS3大補貼

Saturday, August 14, 2010
slide-2
SLIDE 2

謝子斌／zibin Web Evangelist／網絡佈道者

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

Saturday, August 14, 2010
slide-3
SLIDE 3 Saturday, August 14, 2010
slide-4
SLIDE 4 Saturday, August 14, 2010
slide-5
SLIDE 5 Saturday, August 14, 2010
slide-6
SLIDE 6

CSS3

<谈一谈/>

Saturday, August 14, 2010
slide-7
SLIDE 7

Borders Background

边框背景

Saturday, August 14, 2010
slide-8
SLIDE 8

border-radius

圆角

border-radius: 25px;

Saturday, August 14, 2010
slide-9
SLIDE 9

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

border-radius

圆角

Saturday, August 14, 2010
slide-10
SLIDE 10 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
slide-11
SLIDE 11

border-radius

圆角

Saturday, August 14, 2010
slide-12
SLIDE 12

border-radius

圆角

source: http://zibin.tehais.com/?p=1410 Saturday, August 14, 2010
slide-13
SLIDE 13

多背景图片 multiple background images

Saturday, August 14, 2010
slide-14
SLIDE 14 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
slide-15
SLIDE 15

阴影效果

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

box-shadow

Saturday, August 14, 2010
slide-16
SLIDE 16

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

阴影效果 box-shadow

Saturday, August 14, 2010
slide-17
SLIDE 17

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

阴影效果 box-shadow

Saturday, August 14, 2010
slide-18
SLIDE 18

Transitions Transform

转变

Saturday, August 14, 2010
slide-19
SLIDE 19

Transitions

动态转变

Saturday, August 14, 2010
slide-20
SLIDE 20

div {

  • o-transition-property: background-color,

width, height;

  • o-transition-duration: 4s, 8s, 5s;
  • o-transition-delay: 0s, 0s 2s;

}

Saturday, August 14, 2010
slide-21
SLIDE 21

Transform

静态转变

Saturday, August 14, 2010
slide-22
SLIDE 22

Transform - translate

  • t

r a n s f

  • r

m : t r a n s l a t e ( 5 p x , 1 p x ) ;

移动

Saturday, August 14, 2010
slide-23
SLIDE 23

Transform - scale

  • t

r a n s f

  • r

m : s c a l e ( 2 . 5 ) ;

大小

Saturday, August 14, 2010
slide-24
SLIDE 24

Transform - skew

  • t

r a n s f

  • r

m : s k e w ( 1 d e g , 2 d e g )

歪斜

Saturday, August 14, 2010
slide-25
SLIDE 25

Transform - rotate

  • t

r a n s f

  • r

m : r

  • t

a t e ( 3 d e g )

转动

Saturday, August 14, 2010
slide-26
SLIDE 26

网络字型

Saturday, August 14, 2010
slide-27
SLIDE 27 @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Saturday, August 14, 2010
slide-28
SLIDE 28 @font-face {
  • font-family: Blackout-Midnight;
  • src: url(Blackout-Midnight.ttf) format("truetype");
  • }

SVG 网络字型

Saturday, August 14, 2010
slide-29
SLIDE 29

SVG 网络字型

Saturday, August 14, 2010
slide-30
SLIDE 30

文字阴影 text-shadow

Saturday, August 14, 2010
slide-31
SLIDE 31

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

文字阴影

Saturday, August 14, 2010
slide-32
SLIDE 32 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
slide-33
SLIDE 33 Saturday, August 14, 2010
slide-34
SLIDE 34
  • pacity
  • pacity: 1.0;

透明

  • pacity: 0.2;
  • pacity: 0.5;
Saturday, August 14, 2010
slide-35
SLIDE 35

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
slide-36
SLIDE 36

！

我現在就要用

Saturday, August 14, 2010
slide-37
SLIDE 37

Progressive Enhancement

Graceful Degradation

Saturday, August 14, 2010
slide-38
SLIDE 38 Saturday, August 14, 2010
slide-39
SLIDE 39 Saturday, August 14, 2010
slide-40
SLIDE 40

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

Saturday, August 14, 2010
slide-41
SLIDE 41

雖然他是一個老爺車。。。 不過他還是有權利“上（馬）路”

Saturday, August 14, 2010
slide-42
SLIDE 42

Vendor Prefix

  • moz-border-radius
  • webkit-border-radius
  • o-border-radius
  • ms-border-radius

border-radius CSS3

Saturday, August 14, 2010
slide-43
SLIDE 43 Saturday, August 14, 2010
slide-44
SLIDE 44 Saturday, August 14, 2010
slide-45
SLIDE 45 Saturday, August 14, 2010
slide-46
SLIDE 46

调试工具

JavaScript CSS HTTP Header DOM

Dragonfly

Saturday, August 14, 2010
slide-47
SLIDE 47

有了CSS3是幸福的。。。

Saturday, August 14, 2010
slide-48
SLIDE 48

Future is Now

未来就是现在

Saturday, August 14, 2010
slide-49
SLIDE 49

<谢谢:-)/>

Saturday, August 14, 2010
slide-50
SLIDE 50

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

问答环节

Saturday, August 14, 2010
slide-51
SLIDE 51

图片

love http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/ spider web http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/ now http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to- maximize-profits shadow http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/ transitions transform http://www.flickr.com/photos/28481088@N00/1298930743/ borders and background http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/ web fonts http://www.flickr.com/photos/sekimura/4363831481/sizes/o/ dinosaur http://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/ clapping photo http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg sun flower http://www.flickr.com/photos/treyevan/429692359/sizes/l/ transition http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/ me http://www.douban.com/photos/album/30539339/ expo http://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/ color cups http://www.flickr.com/photos/jenny-pics/ Saturday, August 14, 2010
slide-52
SLIDE 52

图片2

vintage car 2 http://www.flickr.com/photos/infomatique/3741725042/sizes/l/in/photostream/ gnutell http://www.flickr.com/photos/geishabot/2341580658/sizes/o/in/photostream/ bread loaf http://www.flickr.com/photos/lizard_queen/88663944/sizes/o/in/photostream/ Saturday, August 14, 2010
slide-53
SLIDE 53

Demo & 文章

background and borders articles http://dev.opera.com/articles/view/css3-border-background-boxshadow/ border-radius flower demo http://people.opera.com/zibin/css3flower/flower.html transiitons and transform article http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ web fonts article http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 9elements HTML5 demo http://9elements.com/io/projects/html5/canvas/ David’s photobook demo http://people.opera.com/dstorey/transforms/image-gallery.html Geolocation demo http://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htm newspaper http://people.opera.com/zibin/newspaper/newspaper_test.html#image1 Saturday, August 14, 2010
slide-54
SLIDE 54

其他参考

introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Saturday, August 14, 2010