<Bleeding Edge/>


                     HTML5 & CSS3
                     WebExpo Tour, Bratislava Budapest Vienna 2010


...
<NAME/>

                         Zi Bin Cheah
                         twitter:zibin
                         <WORK/>

  ...
<Bleeding Edge/>


                     CSS3


Tuesday, June 15, 2010
Question
            raise your hand....




Tuesday, June 15, 2010
Question
            raise your hand....
       if you are a designer




Tuesday, June 15, 2010
Question
            raise your hand....
       if you are a designer
      if you are a front end developer




Tuesday, ...
Question
            raise your hand....
       if you are a designer
      if you are a front end developer
      if you ...
Question
            raise your hand....
       if you are a designer
      if you are a front end developer
      if you ...
Question
            raise your hand....
       if you are a designer
      if you are a front end developer
      if you ...
HTML5
                         Semantics
                                     CSS3
                                      D...
Once upon a time....


                             CSS3
             CSS1             CSS2      CSS3   CSS2.1




Tuesday...
Today we will look at a few


                         CSS3
Borders and background allows styling of boxes and
div, and al...
Today we will look at a few


                         CSS3
Borders and background allows styling of boxes and
div, and al...
Borders
 Background



Tuesday, June 15, 2010
border-radius        aka rounded-corners




       border-radius: 25px;




Tuesday, June 15, 2010
border-radius        aka rounded-corners




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


...
border-radius                    aka rounded-corners




        border-bottom-left-radius: 40px;
        border-bottom-ri...
border-radius        aka rounded-corners




Tuesday, June 15, 2010
border-radius        aka rounded-corners




Tuesday, June 15, 2010
multiple background




Tuesday, June 15, 2010
multiple background




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




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




Tuesday, June 15, 2010
box-shadow




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




Tuesday, June 15, 2010
box-shadow




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

Tuesday, June 15, 2010
Today we will look at a few


                         CSS3
Borders and background allows styling of boxes and
div, and al...
Transitions
  Transform



Tuesday, June 15, 2010
Transitions

Tuesday, June 15, 2010
div {
     -o-transition-property: background-color,
   width, height;
     -o-transition-duration: 4s, 8s, 5s;
     -o-tr...
Transitions

Tuesday, June 15, 2010
Transform

Tuesday, June 15, 2010
Transform - translate
         -o-transform: translate(50px, 100px);




Tuesday, June 15, 2010
Transform - scale
         -o-transform: scale(2.5);




Tuesday, June 15, 2010
Transform - skew
         -o-transform: skew(10deg, 20deg)




Tuesday, June 15, 2010
Transform - rotate
         -o-transform: rotate(30deg)




Tuesday, June 15, 2010
Today we will look at a few


                         CSS3
Borders and background allows styling of boxes and
div, and al...
Web Fonts
Tuesday, June 15, 2010
@font-face {
     src: url(DeutscheZierschrift.ttf) format("truetype");
     font-family: "Zierschrift";
     font-style: ...
Tuesday, June 15, 2010
SVG web fonts




     @font-face {
     !      font-family: Blackout-Midnight;
     !      src: url(Blackout-Midnight.ttf...
Today we will look at a few


                         CSS3
Borders and background allows styling of boxes and
div, and al...
text shadow



Tuesday, June 15, 2010
text-shadow




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




Tuesday, June 15, 2010
text-shadow




         text-shadow:
         0 0 4px white, 0 -5px 4px #ff3,
         2px -10px 6px #fd3, -2px -15px 11p...
p le
                          x a m
                         E

  CSS3 + HTML5
Tuesday, June 15, 2010
When    ?
                         Can I use




Tuesday, June 15, 2010
Tuesday, June 15, 2010
Tuesday, June 15, 2010
Tuesday, June 15, 2010
Progressive    Graceful
            Enhancement    Degradation




Tuesday, June 15, 2010
-o-border-radius
                         -moz-border-radius
      CSS3
                         -webkit-border-radius
   ...
Debugger Dragonfly

JavaScript
CSS
HTTP Header
DOM




Tuesday, June 15, 2010
Future
                           is
                          Now

Tuesday, June 15, 2010
<Thank you:-)/>




Tuesday, June 15, 2010
Q&A


        zibin AT opera.com     shwetankd AT opera.com
        twitter: zibin         twitter: shwetank




Tuesday, ...
Creative Commons license image
                 clap
                 http://www.flickr.com/photos/tudor/953584594/
      ...
Demo & artlcle
                 background and borders articles
                 http://dev.opera.com/articles/view/css3-b...
Upcoming SlideShare
Loading in …5
×

Cutting Edge CSS3 @ WebExpo Tour 2010

2,138 views

Published on

CSS3

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,138
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
106
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Cutting Edge CSS3 @ WebExpo Tour 2010

  1. 1. <Bleeding Edge/> HTML5 & CSS3 WebExpo Tour, Bratislava Budapest Vienna 2010 Tuesday, June 15, 2010
  2. 2. <NAME/> Zi Bin Cheah twitter:zibin <WORK/> Web Evangelist Tuesday, June 15, 2010
  3. 3. <Bleeding Edge/> CSS3 Tuesday, June 15, 2010
  4. 4. Question raise your hand.... Tuesday, June 15, 2010
  5. 5. Question raise your hand.... if you are a designer Tuesday, June 15, 2010
  6. 6. Question raise your hand.... if you are a designer if you are a front end developer Tuesday, June 15, 2010
  7. 7. Question raise your hand.... if you are a designer if you are a front end developer if you are a backend developer /programmer Tuesday, June 15, 2010
  8. 8. Question raise your hand.... if you are a designer if you are a front end developer if you are a backend developer /programmer if you are new to CSS / CSS3 Tuesday, June 15, 2010
  9. 9. Question raise your hand.... if you are a designer if you are a front end developer if you are a backend developer /programmer if you are new to CSS / CSS3 if you hate raising your hand Tuesday, June 15, 2010
  10. 10. HTML5 Semantics CSS3 Design Tuesday, June 15, 2010
  11. 11. Once upon a time.... CSS3 CSS1 CSS2 CSS3 CSS2.1 Tuesday, June 15, 2010
  12. 12. Today we will look at a few CSS3 Borders and background allows styling of boxes and div, and also have multiple background Transitions and transform an element by rotating, “on- the-fly” movement and such Web fonts allows styling of fonts Text shadow creates shadows Tuesday, June 15, 2010
  13. 13. Today we will look at a few CSS3 Borders and background allows styling of boxes and div, and also have multiple background Transitions and transform an element by rotating, “on- the-fly” movement and such Web fonts allows styling of fonts Text shadow creates shadows Tuesday, June 15, 2010
  14. 14. Borders Background Tuesday, June 15, 2010
  15. 15. border-radius aka rounded-corners border-radius: 25px; Tuesday, June 15, 2010
  16. 16. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Tuesday, June 15, 2010
  17. 17. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Tuesday, June 15, 2010
  18. 18. border-radius aka rounded-corners Tuesday, June 15, 2010
  19. 19. border-radius aka rounded-corners Tuesday, June 15, 2010
  20. 20. multiple background Tuesday, June 15, 2010
  21. 21. multiple background background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Tuesday, June 15, 2010
  22. 22. box-shadow box-shadow: 10px 10px 0px #fff; Tuesday, June 15, 2010
  23. 23. box-shadow box-shadow: 10px 10px 20px #fff; Tuesday, June 15, 2010
  24. 24. box-shadow width, height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Tuesday, June 15, 2010
  25. 25. Today we will look at a few CSS3 Borders and background allows styling of boxes and div, and also have multiple background Transitions and transform an element by rotating, “on- the-fly” movement and such Web fonts allows styling of fonts Text shadow creates shadows Tuesday, June 15, 2010
  26. 26. Transitions Transform Tuesday, June 15, 2010
  27. 27. Transitions Tuesday, June 15, 2010
  28. 28. div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s; } Tuesday, June 15, 2010
  29. 29. Transitions Tuesday, June 15, 2010
  30. 30. Transform Tuesday, June 15, 2010
  31. 31. Transform - translate -o-transform: translate(50px, 100px); Tuesday, June 15, 2010
  32. 32. Transform - scale -o-transform: scale(2.5); Tuesday, June 15, 2010
  33. 33. Transform - skew -o-transform: skew(10deg, 20deg) Tuesday, June 15, 2010
  34. 34. Transform - rotate -o-transform: rotate(30deg) Tuesday, June 15, 2010
  35. 35. Today we will look at a few CSS3 Borders and background allows styling of boxes and div, and also have multiple background Transitions and transform an element by rotating, “on- the-fly” movement and such Web fonts allows styling of fonts Text shadow creates shadows Tuesday, June 15, 2010
  36. 36. Web Fonts Tuesday, June 15, 2010
  37. 37. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Tuesday, June 15, 2010
  38. 38. Tuesday, June 15, 2010
  39. 39. SVG web fonts @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Tuesday, June 15, 2010
  40. 40. Today we will look at a few CSS3 Borders and background allows styling of boxes and div, and also have multiple background Transitions and transform an element by rotating, “on- the-fly” movement and such Web fonts allows styling of fonts Text shadow creates shadows Tuesday, June 15, 2010
  41. 41. text shadow Tuesday, June 15, 2010
  42. 42. text-shadow text-shadow: #000000 10px 10px 19px; Tuesday, June 15, 2010
  43. 43. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Tuesday, June 15, 2010
  44. 44. p le x a m E CSS3 + HTML5 Tuesday, June 15, 2010
  45. 45. When ? Can I use Tuesday, June 15, 2010
  46. 46. Tuesday, June 15, 2010
  47. 47. Tuesday, June 15, 2010
  48. 48. Tuesday, June 15, 2010
  49. 49. Progressive Graceful Enhancement Degradation Tuesday, June 15, 2010
  50. 50. -o-border-radius -moz-border-radius CSS3 -webkit-border-radius Vendor Prefix -ms-border-radius border-radius Tuesday, June 15, 2010
  51. 51. Debugger Dragonfly JavaScript CSS HTTP Header DOM Tuesday, June 15, 2010
  52. 52. Future is Now Tuesday, June 15, 2010
  53. 53. <Thank you:-)/> Tuesday, June 15, 2010
  54. 54. Q&A zibin AT opera.com shwetankd AT opera.com twitter: zibin twitter: shwetank Tuesday, June 15, 2010
  55. 55. Creative Commons license image clap http://www.flickr.com/photos/tudor/953584594/ 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/ 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/ Tuesday, June 15, 2010
  56. 56. Demo & artlcle 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 Presentation reference introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Tuesday, June 15, 2010

×