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.
<ul>CSS3 101 </ul><ul>There must be a start for everyone </ul>
The big picture <ul><li>CSS3 includes  a truckload of big new stuff </li><ul><li>Fonts, media queries, transformations, an...
IE defenestration is not required <ul><li>defenestrate, n : a throwing of a person or thing out of a window
The Merriam-Webster dictionary </li></ul>
Current status <ul><li>Explorer (9+) : -ms-*
Firefox : -moz-*
Chrome, Safari : -webkit-*
Opera (10+) : -o-* </li></ul>
Start small <ul><li>Everyone does the same:
start with rounded corners,
then  continue scratching </li></ul>
border-radius <ul><li>{radius}
{topleft, bottomright} {topright, bottomleft }
{topleft} {topright} {bottomright} {bottomleft} </li></ul>.container { border: 4px solid #f00; -moz-border-radius: 5px; -w...
box-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
{x offset} {y offset} {blur} {spread} {color}
{shadow1}, {shadow2}, {shadow3}... </li></ul>.container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5...
text-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
{text-shadow1}, {text-shadow2}, ... </li></ul>.container { text-shadow: 5px 5px 5px #000; }
rgba <ul><li>rgba (red, blue, green, alpha) </li></ul>.using-opacity { opacity: .5; } .using-rgba { background-color: rgba...
Wherever a color fits in <ul><li>background, color, border, shadow </li></ul>.block { background: rgb(218, 37, 29); /* fal...
New fonts <ul><li>We are not limited to web-safe fonts anymore </li></ul>
@font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url(...
Flash Of Unstyled Text <ul><li>Firefox / Opera : show the next font while downloading.
IE / Webkit : do not display anything while downloading </li></ul>
Font repositories <ul><li>Squirrel font
Google Web Fonts </li></ul><ul><li>(Beware with spanish special characters!) </li></ul>
Transitions <ul><li>Simple animations in the browser </li></ul>
Transitions <ul><li>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.  </l...
Transitions: example a {  color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in;  transitio...
Upcoming SlideShare
Loading in …5
×

Css3 101

8,787 views

Published on

My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.

This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.

Published in: Technology, Design

Css3 101

  1. 1. <ul>CSS3 101 </ul><ul>There must be a start for everyone </ul>
  2. 2. The big picture <ul><li>CSS3 includes a truckload of big new stuff </li><ul><li>Fonts, media queries, transformations, animations... </li></ul><li>It also includes lots of small new stuff </li><ul><li>New selectors, rounded corners, gradients, shadows... </li></ul><li>Some of these features were already available with 2.1 </li></ul>
  3. 3. IE defenestration is not required <ul><li>defenestrate, n : a throwing of a person or thing out of a window
  4. 4. The Merriam-Webster dictionary </li></ul>
  5. 5. Current status <ul><li>Explorer (9+) : -ms-*
  6. 6. Firefox : -moz-*
  7. 7. Chrome, Safari : -webkit-*
  8. 8. Opera (10+) : -o-* </li></ul>
  9. 9. Start small <ul><li>Everyone does the same:
  10. 10. start with rounded corners,
  11. 11. then continue scratching </li></ul>
  12. 12. border-radius <ul><li>{radius}
  13. 13. {topleft, bottomright} {topright, bottomleft }
  14. 14. {topleft} {topright} {bottomright} {bottomleft} </li></ul>.container { border: 4px solid #f00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
  15. 15. box-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
  16. 16. {x offset} {y offset} {blur} {spread} {color}
  17. 17. {shadow1}, {shadow2}, {shadow3}... </li></ul>.container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }
  18. 18. text-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
  19. 19. {text-shadow1}, {text-shadow2}, ... </li></ul>.container { text-shadow: 5px 5px 5px #000; }
  20. 20. rgba <ul><li>rgba (red, blue, green, alpha) </li></ul>.using-opacity { opacity: .5; } .using-rgba { background-color: rgba(218, 37, 29, .5); }
  21. 21. Wherever a color fits in <ul><li>background, color, border, shadow </li></ul>.block { background: rgb(218, 37, 29); /* fallback */ background: rgba(218, 37, 29, .5); text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
  22. 22. New fonts <ul><li>We are not limited to web-safe fonts anymore </li></ul>
  23. 23. @font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url( 'pm.ttf' ) format('truetype'); } h1 { font-family: permanentmarker; }
  24. 24. Flash Of Unstyled Text <ul><li>Firefox / Opera : show the next font while downloading.
  25. 25. IE / Webkit : do not display anything while downloading </li></ul>
  26. 26. Font repositories <ul><li>Squirrel font
  27. 27. Google Web Fonts </li></ul><ul><li>(Beware with spanish special characters!) </li></ul>
  28. 28. Transitions <ul><li>Simple animations in the browser </li></ul>
  29. 29. Transitions <ul><li>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. </li></ul>a { color: #000; } a:hover { color:#f00; }
  30. 30. Transitions: example a { color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in; transition: color 1s ease-in; } a:hover { color: #f00; }
  31. 31. transition <ul><li>{property} {duration} {timing function} {delay}
  32. 32. {transition1}, {transition2}, ... </li></ul>a { -webkit-transition: color 1s ease-in, background .3s ease; -moz-transition: color 1s ease-in, background .3s ease; transition: color 1s ease-in, background .3s ease; }
  33. 33. all a { -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } a:hover, a:focus { color: #030; background: #690; }
  34. 34. Animatable properties <ul><li>background, border, position, color, font, size,
  35. 35. margin, padding, opacity, transformation ,
  36. 36. z-index, zoom </li></ul>
  37. 37. CSS transition or Javascript animation? <ul><li>CSS Transitions </li><ul><ul><li>Declared in the CSS
  38. 38. Simpler syntax
  39. 39. Transitions are faster
  40. 40. The animation can be automatically interrupted </li></ul></ul><li>jQuery animate() </li><ul><ul><li>Not limited to simple animations
  41. 41. Support for all browsers </li></ul></ul></ul>
  42. 42. Life's a bitch <ul><li>You should care about older browsers </li></ul>
  43. 43. Internet Explorer 6
  44. 44. IE-specific stylesheets <!--[if IE 7]> <link href=&quot;/ie_hacks7.css&quot; rel=&quot;stylesheet&quot;> <![endif]--> <!--[if lte IE 6]> <link href=&quot;/ie_hacks6.css&quot; rel=&quot;stylesheet&quot;> <![endif]--> http://www.quirksmode.org/css/condcom.html
  45. 45. Fallback properties .block { background: rgb(218, 37, 29); background: rgba(218, 37, 29, .5); } .foo { background: #2989d8; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 55%, #7db9e8 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(55%,#207cca), color-stop(100%,#7db9e8) ); }
  46. 46. IE7.js ie7.js, ie8.js, ie9.js by Dean Edwards Fixes simple CSS 2 and 3 selectors
  47. 47. <ul><li>Brings to IE: </li><ul><li>border-radius
  48. 48. box-shadow
  49. 49. border-image
  50. 50. gradients
  51. 51. rgba </li></ul></ul>
  52. 52. Many more! <ul><li>Chrome Frame
  53. 53. Polyfills
  54. 54. HTML5 boilerplate
  55. 55. IE-specific CSS selectors </li></ul>
  56. 56. Questions?
  57. 57. Thanks! <ul><li>Come to our course and enjoy three straight days of this! </li><ul><li>http://extrema-sistemas.com/training
  58. 58. http://del.icio.us/html5css3
  59. 59. http://github.com/html5css3 </li></ul></ul>twitter.com/nachocoloma [email_address]

×