Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS3
                             2010 COSCUP/GNOME.asia




Saturday, August 14, 2010
zibin
                            Web Evangelist

                                      twitter:zibin
                    ...
Saturday, August 14, 2010
Saturday, August 14, 2010
Saturday, August 14, 2010
<   />


                            CSS3


Saturday, August 14, 2010
Borders Background




Saturday, August 14, 2010
border-radius




       border-radius: 25px;




Saturday, August 14, 2010
border-radius




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



Saturday, August 14, 2010
border-radius




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




Saturday, August 14, 2010
border-radius




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


Saturday, August 1...
multiple background images




Saturday, August 14, 2010
multiple background images




     background:
       url(rose.png) no-repeat 150px -20px,
       url(driedrose.png) no-r...
box-shadow




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




Saturday, August 14, 2010
box-shadow




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




Saturday, August 14, 2010
box-shadow




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

Saturday, August 14, 2010
Transitions Transform




Saturday, August 14, 2010
Transitions

Saturday, August 14, 2010
div {
     -o-transition-property: background-color,
   width, height;
     -o-transition-duration: 4s, 8s, 5s;
     -o-tr...
Transform

Saturday, August 14, 2010
Transform - translate
         -o-transform: translate(50px, 100px);




Saturday, August 14, 2010
Transform - scale
         -o-transform: scale(2.5);




Saturday, August 14, 2010
Transform - skew
         -o-transform: skew(10deg, 20deg)




Saturday, August 14, 2010
Transform - rotate
         -o-transform: rotate(30deg)




Saturday, August 14, 2010
Saturday, August 14, 2010
@font-face {
     src: url(DeutscheZierschrift.ttf) format("truetype");
     font-family: "Zierschrift";
     font-style: ...
SVG




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




Saturday, August 14, 2010
text-shadow




Saturday, August 14, 2010
text-shadow




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




Saturday, August 14, 2010
text-shadow




         text-shadow:
         0 0 4px white, 0 -5px 4px #ff3,
         2px -10px 6px #fd3, -2px -15px 11p...
Saturday, August 14, 2010
opacity




                  opacity: 1.0;       opacity: 0.5;   opacity: 0.2;




Saturday, August 14, 2010
rgba hsla


                                        rgba(255,0,0,1.0);

                                        rgba(255,0...
Saturday, August 14, 2010
Progressive     Graceful
            Enhancement     Degradation




Saturday, August 14, 2010
Saturday, August 14, 2010
Saturday, August 14, 2010
Saturday, August 14, 2010
“   ”
Saturday, August 14, 2010
-o-border-radius
                            -moz-border-radius
       CSS3
                            -webkit-border-rad...
Saturday, August 14, 2010
Saturday, August 14, 2010
Saturday, August 14, 2010
Dragonfly


JavaScript
CSS
HTTP Header
DOM




Saturday, August 14, 2010
CSS3




Saturday, August 14, 2010
Future is Now


Saturday, August 14, 2010
<   :-)/>




Saturday, August 14, 2010
zibin AT opera.com
         www.opera.com/developer (      )
         zibin.tehais.com(     )
         twitter: zibin
    ...
love
                  http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/
                  spider web
           ...
2
                  vintage car 2
                  http://www.flickr.com/photos/infomatique/3741725042/sizes/l/in/photost...
Demo &  
                  background and borders articles
                  http://dev.opera.com/articles/view/css3-borde...
introduction to CSS2.1 and CSS3
                  http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3




...
Upcoming SlideShare
Loading in …5
×

CSS3大補貼 - COSCUP/GNOME.asia

1,932 views

Published on

Published in: Technology
  • Be the first to comment

CSS3大補貼 - COSCUP/GNOME.asia

  1. 1. CSS3 2010 COSCUP/GNOME.asia Saturday, August 14, 2010
  2. 2. zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Saturday, August 14, 2010
  3. 3. Saturday, August 14, 2010
  4. 4. Saturday, August 14, 2010
  5. 5. Saturday, August 14, 2010
  6. 6. < /> CSS3 Saturday, August 14, 2010
  7. 7. Borders Background Saturday, August 14, 2010
  8. 8. border-radius border-radius: 25px; Saturday, August 14, 2010
  9. 9. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Saturday, August 14, 2010
  10. 10. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Saturday, August 14, 2010
  11. 11. border-radius Saturday, August 14, 2010
  12. 12. border-radius source: http://zibin.tehais.com/?p=1410 Saturday, August 14, 2010
  13. 13. multiple background images Saturday, August 14, 2010
  14. 14. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Saturday, August 14, 2010
  15. 15. box-shadow box-shadow: 10px 10px 0px #fff; Saturday, August 14, 2010
  16. 16. box-shadow box-shadow: 10px 10px 20px #fff; Saturday, August 14, 2010
  17. 17. box-shadow width, height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Saturday, August 14, 2010
  18. 18. Transitions Transform Saturday, August 14, 2010
  19. 19. Transitions Saturday, August 14, 2010
  20. 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
  21. 21. Transform Saturday, August 14, 2010
  22. 22. Transform - translate -o-transform: translate(50px, 100px); Saturday, August 14, 2010
  23. 23. Transform - scale -o-transform: scale(2.5); Saturday, August 14, 2010
  24. 24. Transform - skew -o-transform: skew(10deg, 20deg) Saturday, August 14, 2010
  25. 25. Transform - rotate -o-transform: rotate(30deg) Saturday, August 14, 2010
  26. 26. Saturday, August 14, 2010
  27. 27. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Saturday, August 14, 2010
  28. 28. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Saturday, August 14, 2010
  29. 29. SVG Saturday, August 14, 2010
  30. 30. text-shadow Saturday, August 14, 2010
  31. 31. text-shadow text-shadow: #000000 10px 10px 19px; Saturday, August 14, 2010
  32. 32. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Saturday, August 14, 2010
  33. 33. Saturday, August 14, 2010
  34. 34. opacity opacity: 1.0; opacity: 0.5; opacity: 0.2; Saturday, August 14, 2010
  35. 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
  36. 36. Saturday, August 14, 2010
  37. 37. Progressive Graceful Enhancement Degradation Saturday, August 14, 2010
  38. 38. Saturday, August 14, 2010
  39. 39. Saturday, August 14, 2010
  40. 40. Saturday, August 14, 2010
  41. 41. “ ” Saturday, August 14, 2010
  42. 42. -o-border-radius -moz-border-radius CSS3 -webkit-border-radius Vendor Prefix -ms-border-radius border-radius Saturday, August 14, 2010
  43. 43. Saturday, August 14, 2010
  44. 44. Saturday, August 14, 2010
  45. 45. Saturday, August 14, 2010
  46. 46. Dragonfly JavaScript CSS HTTP Header DOM Saturday, August 14, 2010
  47. 47. CSS3 Saturday, August 14, 2010
  48. 48. Future is Now Saturday, August 14, 2010
  49. 49. < :-)/> Saturday, August 14, 2010
  50. 50. zibin AT opera.com www.opera.com/developer ( ) zibin.tehais.com( ) twitter: zibin slideshare.net/zibin PPT Saturday, August 14, 2010
  51. 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
  52. 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
  53. 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
  54. 54. introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Saturday, August 14, 2010

×