CSS3: Ready for Primetime?

3,004 views

Published on

Take a look at CSS3 and ponder whether we are ready to use it in our client work. We will consider arguments both for and against. Then we will take a look at a couple of sites using CSS3 and go under the hood to whet your appetite for the exciting things it can do.

Published in: Design

CSS3: Ready for Primetime?

  1. 1. CSS3 Ready for Primetime? Refresh Orlando • April 27, 2010
  2. 2. Who am I?
  3. 3. Why is CSS3 so appealing?
  4. 4. Why is CSS3 so appealing? Simplified solutions
  5. 5. Less Markup
  6. 6. Zebra Striping a Table
  7. 7. Zebra Striping a Table <table> <tr><td></td></tr> <tr class=“even”><td></td></tr> <tr><td></td></tr> <tr class=“even”><td></td></tr> <tr><td></td></tr> <tr class=“even”><td></td></tr> <tr><td></td></tr> <tr class=“even”><td></td></tr> </table>
  8. 8. Zebra Striping a Table .even{ style declaration }
  9. 9. New Solution using CSS3 advanced selector
  10. 10. New Solution using CSS3 advanced selector tr:nth-child(even){ style declaration }
  11. 11. Code solutions opposed to image solutions
  12. 12. Rounded Corners
  13. 13. Rounded Corners
  14. 14. Rounded Corners <div class=“box”> <div class=“box-inner”> <img src=“boat.jpg” alt=“boat” /> </div> </div>
  15. 15. Rounded Corners .box{ width:226px; background:#e2e1d4 url(round-bottom.gif) no- repeat bottom left;} .box-inner{ padding:15px; background: url(round-top.gif) no-repeat top left;}
  16. 16. Rounded Corners - Fluid
  17. 17. Rounded Corners - Fluid
  18. 18. Rounded Corners - Fluid <div class=“box”> <div class=“box-inner”> <div class=“box-inner2”> <div class=“box-inner3”> <img src=“boat.jpg” alt=“boat” /> </div></div></div> </div>
  19. 19. Rounded Corners á la CSS3
  20. 20. Rounded Corners á la CSS3 <div class=“box”> <img src=“boat.jpg” alt=“boat” /> </div>
  21. 21. Rounded Corners á la CSS3 <div class=“box”> <img src=“boat.jpg” alt=“boat” /> </div> .box{ padding:15px; background:#e2e1d4; border-radius:8px; }
  22. 22. The Problem with CSS3
  23. 23. The Problem with CSS3 Not all browsers support it (yet)
  24. 24. http://www.findmebyip.com/litmus/
  25. 25. Is CSS3 ready for primetime?
  26. 26. Yes?
  27. 27. Progressive Enhancement
  28. 28. No?
  29. 29. It depends
  30. 30. “Good craftsmanship is about understanding the various ways to solve a particular problem, then choosing the right task for the job.” Dan Cederholm, Handcrafted CSS
  31. 31. Things to consider
  32. 32. The Client
  33. 33. The Audience Photo by werkunz, http://www.flickr.com/photos/werkunz/ Used under Creative Commons License
  34. 34. The Design Problem Photo by Seth and Alexa, http://www.flickr.com/people/sethandalexa/ Used under Creative Commons License
  35. 35. The Design Solution http://theshipandthesea.com
  36. 36. The Designer
  37. 37. The Cost
  38. 38. My Challenge to you:
  39. 39. My Challenge to you: Try CSS3 where it is appropriate
  40. 40. Pitching it to a Client
  41. 41. Not all browsers see the same design
  42. 42. HDTV
  43. 43. Video Games Wii XBox 360 Paul Stanton http://coffeepowered.co.uk/2010/02/an-analogy-for-progressive-enhancement/
  44. 44. Ramp Champ
  45. 45. Now for the fun part of our show Ramp Champ
  46. 46. Andy Clarke http://www.cannybill.com
  47. 47. Rounded Corners
  48. 48. Rounded Corners Text shadows
  49. 49. Rounded Corners Text shadows Transforms
  50. 50. Rounded Corners Webkit transitions Text shadows Transforms
  51. 51. RGBa Rounded Corners Webkit transitions Text shadows Transforms
  52. 52. Rounded Corners .borderradius header.branding nav ul { -moz-border-radius:20px 20px 20px 20px; -web-kit-border-radius: 20px 20px 20px 20px; }
  53. 53. Text shadows and RGBa .rgba body { color:rgba(255, 255, 255, 0.9); text-shadow:0 1px 1px rgba(0, 0, 0, 0.8); }
  54. 54. Transforms .csstransforms figure.video-tour:hover img { -moz-transform:scale(1.15); -web-kit-tranform:scale(1.15); }
  55. 55. Transitions (web-kit) .csstransforms figure.video-tour img { -webkit-transition-property : scale; -webkit-transition-duration : 0.2s; -webkit-transition-timing-function : ease-in- out; }
  56. 56. http://sxsw.beercamp.com/
  57. 57. Multiple Text shadows
  58. 58. Multiple Text shadows Transform
  59. 59. Multiple Text shadows Transform border-radius
  60. 60. @font-face Multiple Text shadows Transform border-radius
  61. 61. Transform
  62. 62. Multiple Text Shadow h1 .b { text-shadow: 1px 0px #FE8, 1px 2px #EB0, 3px 1px #FE8, 2px 3px #EB0, 4px 2px #FE8, 4px 4px #EB0, 5px 3px #FE8, 5px 5px #EB0, 7px 4px #FE8, 6px 6px #EB0, 8px 5px #FE8, 7px 7px #EB0, 9px 6px #FE8, 9px 8px #EB0, 11px 7px #FE8, 10px 9px #EB0, 12px 8px #FE8, 11px 10px #EB0, 13px 9px #FE8, 12px 11px #EB0, 15px 10px #FE8, 13px 12px #EB0, 16px 11px #FE8, 15px 13px #EB0, 17px 12px #FE8, 16px 14px #EB0, 19px 13px #FE8, 17px 15px #EB0, 19px 14px #FE8, 18px 16px #EB0, 21px 15px #FE8, 19.6px 17px #EB0, 22px 16px #FE8, 21px 18px #EB0, 24px 17px #FE8, 22px 19px #EB0, 25px 18px #FE8, 23px 20px #EB0, 26px 19px #FE8, 24.5px 21px #EB0, 27.783px 20px #FE8, 26px 22px #EB0, 29px 21px #FE8, 27px 23px #EB0, 30px 22px #FE8, 28px 24px #EB0, 32px 23px #FE8, 29.4px 25px #EB0, 33px 24px #FE8, 31px 26px #EB0; z-index: 50; }
  63. 63. Transform
  64. 64. Transform #location:hover { top: 25px; -moz-transform: scale(1.1); -webkit-transform: scale(1.1);}
  65. 65. Transform #location:hover { top: 25px; -moz-transform: scale(1.1); -webkit-transform: scale(1.1);} #location h2 { -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); }
  66. 66. Transform
  67. 67. Transform #sponsors li a:hover { -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -moz-transform: rotate(7deg) scale(1.2); -webkit-transform: rotate(7deg) scale(1.2); }
  68. 68. #location .pointer { display: block; position: absolute; left: -20px; bottom: -55px; border-style: solid; border-width: 60px 90px 0; border-color: #EB0 transparent; }
  69. 69. Elliot Jay Stocks http://neutroncreations.com/blog/
  70. 70. Text
  71. 71. Text
  72. 72. Web-kit animation div.neutron01 { -webkit-animation-name:neutron01; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear } Text @-webkit-keyframes neutron01 { from { -webkit-transform:rotate(0deg) } to { -webkit- transform:rotate(360deg) } } div.neutron02 { -webkit-animation-name:neutron02; -webkit-animation-duration:4s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear } @-webkit-keyframes neutron02 { from { -webkit-transform:rotate(360deg) } to { -webkit- transform:rotate(0deg) } }
  73. 73. Edge of My Seat http://24ways.org
  74. 74. My Challenge to you:
  75. 75. My Challenge to you: Try CSS3 where it is appropriate
  76. 76. Jeff Bridgforth
  77. 77. Jeff Bridgforth http://www.slideshare.net/JBridg4th
  78. 78. Jeff Bridgforth http://www.slideshare.net/JBridg4th jeffbridgforth.com/refresh-talk
  79. 79. Jeff Bridgforth http://www.slideshare.net/JBridg4th jeffbridgforth.com/refresh-talk Twitter: @webcraftsman

×