Getting Started with CSS3

  • 5,528 views
Uploaded on

Presented at Minnebar, May 2010.

Presented at Minnebar, May 2010.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,528
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
1
Likes
38

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. getting started with CSS   3 Minnebar Spring ‘10!
  • 2. …CSS3 is amazingly superly cool, & now I plan to be a web designer when i grow up. @katieatkinson!
  • 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. 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. history  
  • 6. 1 1996 CSS  
  • 7. 2 1997 CSS  
  • 8. 2.1! CSS  
  • 9. 3 CSS   modules!
  • 10. color  
  • 11. color /! opacity Adjust see-through-ness. div { color: #00c; opacity: 1.0; }! div { color: #00c; opacity: 0.5; }!
  • 12. color /! rgba Specify colors in RGB format + alpha. div { color: rgb(255, 0, 0); }! div { color: rgba(255, 0, 0, 0.5); }!
  • 13. color /! hsla Specify colors in HSL format + alpha. div { color: hsl(240, 50%, 50%); }! div { color: hsla(240, 50%, 50%, 0.5); }!
  • 14. bg & borders  
  • 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. backgrounds & borders /! background-image The OLD way: <div class=“callout”>! !<div class=“inside-a”>! ! !<div class=“inside-b”>! ! ! !...! ! !</div>! !</div>! </div>!
  • 17. backgrounds & borders /! background-image The NEW way: <div class=“callout”>! !...! </div>!
  • 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. backgrounds & borders /! background-size Specify the size of background to display. div { background-size: 100px 100px; }! div { background-size: 300px 100px; }!
  • 20. backgrounds & borders /! border-color Multiple border colors, 1 pixel at a time. border-color: #333 transparent transparent #333;!
  • 21. backgrounds & borders /! border-image Borders can be represented by an image. border-image: url(border.png) 10 10 10 10 ! ! !round round;!
  • 22. backgrounds & borders /! border-radius Curve all corners, or be specific. border-radius: 5px;! border-top-right-radius: 5px;! watch out!
  • 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. multi-column  
  • 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. transformation  
  • 27. transformation /! rotate Rotate an object, in degrees. transform: rotate(45deg);!
  • 28. http://www.zurb.com/playground/css3-polaroids!
  • 29. transformation /! scale Scale an object, by ratio. transform: scale(2.0, 0.5);!
  • 30. transformation /! skew Skew around X and Y axes, in degrees. transform: skew(-30deg);!
  • 31. transformation /! translate Move along X and Y axes, in anything (px, ems, etc). transform: translate(50px, 0);!
  • 32. selectors   super sexy stuff!
  • 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. 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. selectors /! e~f An F element preceded by an E element. div ~ p { color: red; }! section ~ p { color: red; }!
  • 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. 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. 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. 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. template layout   (formerly advanced layout)!
  • 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. a a a b c d
  • 43. a #header b c d #nav #adv #body
  • 44. a #header b c d #nav #adv #body
  • 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. 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. @ . a @ b c d e f
  • 48. @ @ . . a @ @ b c d e f
  • 49. body ! { display: ”@@.." ! ! ! ! ! ! ”a@@b”! ! ! ! ! ! !“cdef” } !
  • 50. media queries  
  • 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. combine 2   media queries + template layout!
  • 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. a #header b c d #nav #adv #body
  • 55. a #header b #nav c #body
  • 56. what now?  
  • 57. graceful degradation vs. progressive enhancement   vs. progressful degrahancement*   vs. ! get a different job   * term originally coined by Jackson Wilkinson: http://jounce.net/!
  • 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. 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. 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. 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. IE9 Opera 10.5 Safari 4 Firefox 3.7 Chrome 4 opacity border-radius box-shadow ?   :nth-child()
  • 63. I love CSS3! When I grow up I want to be a web designer. @mikebollinger!
  • 64. </presentation> mike@livefront.com! @mikebollinger!