Getting Started with CSS3

6,025 views
5,910 views

Published on

Presented at Minnebar, May 2010.

Published in: Technology
1 Comment
40 Likes
Statistics
Notes
No Downloads
Views
Total views
6,025
On SlideShare
0
From Embeds
0
Number of Embeds
947
Actions
Shares
0
Downloads
0
Comments
1
Likes
40
Embeds 0
No embeds

No notes for slide

Getting Started with CSS3

  1. 1. getting started with CSS   3 Minnebar Spring ‘10!
  2. 2. …CSS3 is amazingly superly cool, & now I plan to be a web designer when i grow up. @katieatkinson!
  3. 3. At the risk of sounding infatuated, I'm just going to say that I love CSS3! @utkJamie! Falling in just a little love with CSS3 @zakmorris! CSS3, I love you!!! @helenucha! I've said it before and I'll say it again... I love CSS3. @gizmo4223!
  4. 4. Ich wollte gerade noch ein paar CSS3- Neuerungen retweeten. Ist nämlich genial, was sich da abspielt. Aber das interessiert euch wohl nicht. @dominikpeters !
  5. 5. history  
  6. 6. 1 1996 CSS  
  7. 7. 2 1997 CSS  
  8. 8. 2.1! CSS  
  9. 9. 3 CSS   modules!
  10. 10. color  
  11. 11. color /! opacity Adjust see-through-ness. div { color: #00c; opacity: 1.0; }! div { color: #00c; opacity: 0.5; }!
  12. 12. color /! rgba Specify colors in RGB format + alpha. div { color: rgb(255, 0, 0); }! div { color: rgba(255, 0, 0, 0.5); }!
  13. 13. color /! hsla Specify colors in HSL format + alpha. div { color: hsl(240, 50%, 50%); }! div { color: hsla(240, 50%, 50%, 0.5); }!
  14. 14. bg & borders  
  15. 15. backgrounds & borders /! background-image As many as you want. background: url(bg-top.png) top left no-repeat, ! !url(bg-bottom.png) bottom left no-repeat, ! ! !url(bg-middle.png) left repeat-y;!
  16. 16. backgrounds & borders /! background-image The OLD way: <div class=“callout”>! !<div class=“inside-a”>! ! !<div class=“inside-b”>! ! ! !...! ! !</div>! !</div>! </div>!
  17. 17. backgrounds & borders /! background-image The NEW way: <div class=“callout”>! !...! </div>!
  18. 18. backgrounds & borders /! background-image The NEW way: .callout { ! background: ! url(gradient.png) 0 0 repeat-x, ! url(angle1.png) 100% 0 no-repeat,! url(angle2.png) 0 100% no-repeat;! }!
  19. 19. backgrounds & borders /! background-size Specify the size of background to display. div { background-size: 100px 100px; }! div { background-size: 300px 100px; }!
  20. 20. backgrounds & borders /! border-color Multiple border colors, 1 pixel at a time. border-color: #333 transparent transparent #333;!
  21. 21. backgrounds & borders /! border-image Borders can be represented by an image. border-image: url(border.png) 10 10 10 10 ! ! !round round;!
  22. 22. backgrounds & borders /! border-radius Curve all corners, or be specific. border-radius: 5px;! border-top-right-radius: 5px;! watch out!
  23. 23. backgrounds & borders /! box-shadow Drop shadows made easy. Too easy. Be afraid. box-shadow: 5px 5px 5px #333;! horizontal offset,! vertical offset,! blur radius,! color!
  24. 24. multi-column  
  25. 25. multi-column/! column-width & -gap Break text into columns. column-width: 200px; ! column-gap: 20px;! (you can also use column-count instead of column-width) ! Lorem ipsum dolor sit amet, consectetur turpis non bibendum. Curabitur fermentum adipiscing elit. Proin varius ligula ac enim posuere faucibus. Mauris blandit ante sit amet congue et sagittis justo scelerisque. Quisque sema tempor vestibulum. Suspendisse porttitor semper magna et vehicula. In hac pellentesque elementum nulla a venenatis. habitasse platea dictumst. Donec odio turpis, Nullam venenatis luctus ultricies. Vestibulum tempor non elementum sed, pulvinar at elit. ante ipsum primis in faucibus orci luctus et Nunc felis urna, ornare in posuere eleifend, ultrices posuere cubilia Curae; Ut non sem ornare non augue. Phasellus ac euismod dolor. augue, non vehicula nibh. In ornare venenatis Etiam urna felis, convallis in volutpat ut, felis, at malesuada ipsum eleifend eu. bibendum id lectus. Quisque egestas egestas
  26. 26. transformation  
  27. 27. transformation /! rotate Rotate an object, in degrees. transform: rotate(45deg);!
  28. 28. http://www.zurb.com/playground/css3-polaroids!
  29. 29. transformation /! scale Scale an object, by ratio. transform: scale(2.0, 0.5);!
  30. 30. transformation /! skew Skew around X and Y axes, in degrees. transform: skew(-30deg);!
  31. 31. transformation /! translate Move along X and Y axes, in anything (px, ems, etc). transform: translate(50px, 0);!
  32. 32. selectors   super sexy stuff!
  33. 33. selectors /! e: only-of-type An element that is the only sibling of its type. img:only-of-type { border: 5px solid red; }! <div> <div> <div> <img>   <img>   <img>   <img>   <img>  
  34. 34. selectors /! e: not(s) An element that does not match simple selectors. img:not(:only-of-type) { border: 5px solid red; }! <div> <div> <div> <img>   <img>   <img>   <img>   <img>  
  35. 35. selectors /! e~f An F element preceded by an E element. div ~ p { color: red; }! section ~ p { color: red; }!
  36. 36. selectors /! e: nth-child(n) An element that is the nth child of its parent. tr:nth-child(odd) td { background: #fff; }! Top Taserings Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009
  37. 37. selectors /! e: nth-child(n) An element that is the nth child of its parent. tr:nth-child(-n+3) td { background: #fff; }! Top Taserings Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009
  38. 38. selectors /! e: nth-last-child(n) An element which is the nth child of its parent, counting from the last one. tr:nth-last-child(-n+2) td { opacity: 0.5; }! Phillies Fan Gets Tasered 2010 Don't Tase Him, Bro 2007 Baptism Gone Wrong 2009 'Snotty' Man Gets Tasered 2006 Mother Tasered in Front of Her Kids 2009 Celebs Sign Up to Be Tasered 2007 Taser Smackdown 2009
  39. 39. selectors /! e: nth-of-type(n) An element that is the nth sibling of its type. p:first-of-type { font-size: 1.2em; }!
  40. 40. template layout   (formerly advanced layout)!
  41. 41. template layout /! display & position Fully separates visual layout order from content. Content is placed in “slots” in a grid. body { display: "aaa"! "bcd"; }! #head { position: a; } ! #nav { position: b; } ! #adv { position: c; } ! #body { position: d; } !
  42. 42. a a a b c d
  43. 43. a #header b c d #nav #adv #body
  44. 44. a #header b c d #nav #adv #body
  45. 45. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius ligula ac enim congue et sagittis justo scelerisque. Quisque porttitor semper magna et vehicula. In hac habitasse platea dictumst. Donec odio turpis, tempor non elementum sed, pulvinar at elit. Nunc felis urna, ornare in posuere eleifend, ornare non augue   phasellus ac euismod dolor. Etiam urna felis, convallis in volutpat ut, bibendum id lectus. Quisque egestas egestas turpis non bibendum. Curabitur fermentum posuere faucibus. Mauris blandit ante sit amet sema tempor vestibulum. Suspendisse pellentesque elementum nulla a venenatis. Nullam venenatis luctus ultricies   Option 1 Option 2 Option 3 Option 4 Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur > amet consectetur > amet consectetur > amet consectetur >
  46. 46. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius ligula ac enim congue et sagittis justo @ scelerisque. Quisque porttitor semper magna et vehicula. In hac habitasse platea dictumst. Donec odio . turpis, tempor non elementum sed, pulvinar at elit. Nunc felis urna, ornare in posuere eleifend, ornare non augue   phasellus ac euismod dolor. Etiam urna felis, convallis in volutpat ut, bibendum id lectus. Quisque egestas egestas turpis non bibendum. Curabitur fermentum posuere faucibus. Mauris blandit ante sit amet sema tempor vestibulum. Suspendisse a @ pellentesque elementum nulla a venenatis. Nullam b venenatis luctus ultricies   Option 1 Option 2 Option 3 Option 4 Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur > amet consectetur > amet consectetur > amet consectetur > c d e f
  47. 47. @ . a @ b c d e f
  48. 48. @ @ . . a @ @ b c d e f
  49. 49. body ! { display: ”@@.." ! ! ! ! ! ! ”a@@b”! ! ! ! ! ! !“cdef” } !
  50. 50. media queries  
  51. 51. media queries /! @media “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.” – W3C @media screen and (min-width: 400px) and (max-width: 700px) { ... } !
  52. 52. combine 2   media queries + template layout!
  53. 53. @media all { ! body! { display: "aaa" ! ! ! ! ! ! "bcd" } ! #head { position: a } ! #nav! { position: b } ! #adv! { position: c } ! #body { position: d } ! }! @media all and (max-width: 500px) { ! body! { display: "a" ! ! ! ! ! ! "b" ! ! ! ! ! ! "c" } ! #head { position: a } ! #nav! { position: b } ! #adv! { display: none } ! #body { position: c } ! }!
  54. 54. a #header b c d #nav #adv #body
  55. 55. a #header b #nav c #body
  56. 56. what now?  
  57. 57. graceful degradation vs. progressive enhancement   vs. progressful degrahancement*   vs. ! get a different job   * term originally coined by Jackson Wilkinson: http://jounce.net/!
  58. 58. IE 6 IE 7 IE 8 Little CSS3! Opera 10 Safari 3 Firefox 3.5 IE 9 Chrome 4 Safari 4 Opera 10.5 Firefox 3.7 Lots o’ CSS3!
  59. 59. IE 6 IE 7 IE 8 Little CSS3! Opera 10 Safari 3 Firefox 3.5 IE 9 Chrome 4 Safari 4 Opera 10.5 Firefox 3.7 Lots o’ CSS3!
  60. 60. IE 6 IE 7 IE 8 Little CSS3! Opera 10 Safari 3 Firefox 3.5 IE 9 Chrome 4 Safari 4 Opera 10.5 Firefox 3.7 Lots o’ CSS3!
  61. 61. IE 6 IE 7 IE 8 Little CSS3! Opera 10 Safari 3 Firefox 3.5 IE 9 Chrome 4 Safari 4 Opera 10.5 Firefox 3.7 Lots o’ CSS3!
  62. 62. IE9 Opera 10.5 Safari 4 Firefox 3.7 Chrome 4 opacity border-radius box-shadow ?   :nth-child()
  63. 63. I love CSS3! When I grow up I want to be a web designer. @mikebollinger!
  64. 64. </presentation> mike@livefront.com! @mikebollinger!

×