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 now

5,557 views

Published on

Use CSS3 now, don't wait for "the future"!

Published in: Technology

CSS3 now

  1. 1. CSS3 NOW! Monday 29th of November — Tech Mondays Kaho St. Lieven — Johan RonsseTuesday 30 November 2010
  2. 2. Hi! I’m Johan.Tuesday 30 November 2010
  3. 3. FLANDERS WEB VALLEY! #introductionTuesday 30 November 2010
  4. 4. Netlog.comTuesday 30 November 2010
  5. 5. Larian StudiosTuesday 30 November 2010
  6. 6. Kaho!Tuesday 30 November 2010
  7. 7. I work at Netlash, a web agencyTuesday 30 November 2010
  8. 8. Tuesday 30 November 2010
  9. 9. Tuesday 30 November 2010
  10. 10. Tuesday 30 November 2010
  11. 11. Tuesday 30 November 2010
  12. 12. Who writes CSS on a regular basis?Tuesday 30 November 2010
  13. 13. Who uses CSS3 properties in their CSS?Tuesday 30 November 2010
  14. 14. FallacyTuesday 30 November 2010
  15. 15. Browser feature: traditional The spec writer writes feature The browser developer implements The web developer implements Visitor sees featureTuesday 30 November 2010
  16. 16. CSS feature: now The web developer needs feature Web developer hacks feature into code (with JS) Visitor sees feature The browser developers implement the feature (wait a few months) The spec writers write about it in the spec (wait a few years)Tuesday 30 November 2010
  17. 17. WEB DEV’S RESPONSIBILITY Advance the web!Tuesday 30 November 2010
  18. 18. How? USE CSS3 NOW!Tuesday 30 November 2010
  19. 19. 1. @FONT-FACETuesday 30 November 2010
  20. 20. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.htmlTuesday 30 November 2010
  21. 21. Typekit.comTuesday 30 November 2010
  22. 22. By Jason Santa MariaTuesday 30 November 2010
  23. 23. By Frank ChimeroTuesday 30 November 2010
  24. 24. Free alternatives to Typekit: FontSquirrel Google font directoryTuesday 30 November 2010
  25. 25. Door populariteit Typekit: • .woff support in Firefox, coming in other browsers • meer beschikbare fonts voor web embedding • fonts worden herbekeken voor betere weergave op scherm (e.g. FF META)Tuesday 30 November 2010
  26. 26. 2. LIGHT&SHADOWSTuesday 30 November 2010
  27. 27. Simulate Photoshop layer styles with CSS3: border-radius, (inset) box-shadow, opacity, rgba/hslTuesday 30 November 2010
  28. 28. Box shadow demo #element { box-shadow: 2px 2px 6px #000; } #element { box-shadow: inset 2px 2px 6px #000; } (Before: try to recreate shadow with images)Tuesday 30 November 2010
  29. 29. Tuesday 30 November 2010
  30. 30. IE Fallback: Simulate shadow with border-right and border-bottomTuesday 30 November 2010
  31. 31. rgba() demo CSS2: CSS3: #element { #elementRGBA { background: rgb(0,0,0); background: rgba(0,0,0,0.33); width: 200px; width: 200px; height: 100px; height: 100px; margin: 20px; margin: 20px; } }Tuesday 30 November 2010
  32. 32. Gradients demo #element { background: #1E5799; /* old browsers */ background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop (0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop (100%,#7db9e8)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr=#1E5799, endColorstr=#7db9e8,GradientType=0 ); /* ie */ } http://www.colorzilla.com/gradient-editor/Tuesday 30 November 2010
  33. 33. IE Fallback: Gradient filter/repeating PNG background/ flat colorTuesday 30 November 2010
  34. 34. 3. ANIMATE! (hardware accelerated)Tuesday 30 November 2010
  35. 35. deaxon.comTuesday 30 November 2010
  36. 36. Great animation demo http://www.nevermindthebullets.comTuesday 30 November 2010
  37. 37. IE Fallback: Gradient filter/repeating PNG background/ flat colorTuesday 30 November 2010
  38. 38. Use modernizr.js (for feature detection) http://www.modernizr.com/Tuesday 30 November 2010
  39. 39. To end this presentation: Some popular websites in IE6 http://www.elated.com/articles/top-30-websites-viewed-in-ie6/Tuesday 30 November 2010
  40. 40. Twitter.com: very much broken.Tuesday 30 November 2010
  41. 41. MSN: Can’t click lightbox. Javascript error. Stuck on this page.Tuesday 30 November 2010
  42. 42. Wordpress: layout borked.Tuesday 30 November 2010
  43. 43. Flick: layout borked too.Tuesday 30 November 2010
  44. 44. IE: the best browser to download Firefox. (Firefox.com borked in IE6 too)Tuesday 30 November 2010
  45. 45. CNN: politics page crashes the browser.Tuesday 30 November 2010
  46. 46. Summary 1. Websites don’t have to look the same in every browser 2. Stop spending 5 hours debugging IE on a 20 hour project 3. Don’t spend your time creating crazy sprites and hacking functionality into older browsers 4. Use progressively enhanced CSS3 instead :)Tuesday 30 November 2010
  47. 47. Q&ATuesday 30 November 2010
  48. 48. johan@johanronsse.be http://www.netlash.com http://www.wolfslittlestore.be Twitter: @wolfr_Tuesday 30 November 2010

×