Introduction to CSS 2.1 and CSS 3

12,384 views

Published on

A slide made to introduce people to CSS 2.1 and CSS 3. It includes a brief history of CSS, many examples (including the CSS, HTML, and rendered output), and a browser-support chart for each example. The online demo-page can be seen at: http://marcamos.com/presentation/intro-css2.1-css3/demo/

Published in: Technology, Education, Design
9 Comments
50 Likes
Statistics
Notes
No Downloads
Views
Total views
12,384
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
507
Comments
9
Likes
50
Embeds 0
No embeds

No notes for slide

Introduction to CSS 2.1 and CSS 3

  1. AN INTRODUCTION TO CSS 2.1 & CSS 3 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  2. A Few Questions It’s hand-raising time • How many of you are designers? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  3. A Few Questions It’s hand-raising time • How many of you are designers? • How many of you are front-end developers? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  4. A Few Questions It’s hand-raising time • How many of you are designers? • How many of you are front-end developers? • How many of you are back-end developers? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  5. A Few Questions It’s hand-raising time • How many of you are designers? • How many of you are front-end developers? • How many of you are back-end developers? • How many of you are all of the above? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  6. A Few Questions It’s hand-raising time • How many of you are designers? • How many of you are front-end developers? • How many of you are back-end developers? • How many of you are all of the above? • How many of you are none of the above? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  7. A Few Questions It’s hand-raising time • How many of you are designers? • How many of you are front-end developers? • How many of you are back-end developers? • How many of you are all of the above? • How many of you are none of the above? • How many of you hate raising your hand? AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  8. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  9. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 • CSS 2.1 and CSS 3 are not fully supported AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  10. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 • CSS 2.1 and CSS 3 are not fully supported • Nearly everything you’ll see will not work in Internet Explorer 6 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  11. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 • CSS 2.1 and CSS 3 are not fully supported • Nearly everything you’ll see will not work in Internet Explorer 6 • We don’t like Internet Explorer 6 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  12. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 • CSS 2.1 and CSS 3 are not fully supported • Nearly everything you’ll see will not work in Internet Explorer 6 • We don’t like Internet Explorer 6 • Or 7 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  13. Disclaimer(s) Setting expectations & protecting my butt • This is an introduction to CSS 2.1 and CSS 3 • CSS 2.1 and CSS 3 are not fully supported • Nearly everything you’ll see will not work in Internet Explorer 6 • We don’t like Internet Explorer 6 • Or 7 • 8 is OK AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  14. The History of CSS The new stuff is old & it’s out of order • CSS 1 became a W3C recommendation in December of 1996 http://www.w3.org/TR/CSS1/ AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  15. The History of CSS The new stuff is old & it’s out of order • CSS 1 became a W3C recommendation in December of 1996 http://www.w3.org/TR/CSS1/ • CSS 2 became a W3C recommendation in May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/ AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  16. The History of CSS The new stuff is old & it’s out of order • CSS 1 became a W3C recommendation in December of 1996 http://www.w3.org/TR/CSS1/ • CSS 2 became a W3C recommendation in May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/ • CSS 3 became a W3C working draft in April of 2000 http://www.w3.org/TR/2000/WD-css3-selectors-20000410 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  17. The History of CSS The new stuff is old & it’s out of order • CSS 1 became a W3C recommendation in December of 1996 http://www.w3.org/TR/CSS1/ • CSS 2 became a W3C recommendation in May of 1998 http://www.w3.org/TR/2008/REC-CSS2-20080411/ • CSS 3 became a W3C working draft in April of 2000 http://www.w3.org/TR/2000/WD-css3-selectors-20000410 • CSS 2.1 became a W3C working draft in August of 2002 http://www.w3.org/TR/2002/WD- CSS21-20020802/ AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  18. Lets See Some Examples We’ll see examples of CSS that will... 1. Improve element and content targeting AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  19. Lets See Some Examples We’ll see examples of CSS that will... 1. Improve element and content targeting 2. Replace outdated techniques for achieving certain design trends (lets stop making rounded corners and drop-shadows with images, eh?) AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  20. Lets See Some Examples We’ll see examples of CSS that will... 1. Improve element and content targeting 2. Replace outdated techniques for achieving certain design trends (lets stop making rounded corners and drop-shadows with images, eh?) 3. Replace some actions and behaviors currently found in JavaScript AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  21. Lets See Some Examples We’ll see examples of CSS that will... 1. Improve element and content targeting 2. Replace outdated techniques for achieving certain design trends (lets stop making rounded corners and drop-shadows with images, eh?) 3. Replace some actions and behaviors currently found in JavaScript AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  22. Child Selector > Select any element that’s a child of another element #childSelector > p { This content is targeted. color: red; • This content is NOT targeted } • This content is NOT targeted This content is NOT targeted. <div id="childSelector"> This content is targeted. <p>This content is targeted.</p> This content is targeted. <ul> <li>This content is NOT targeted.</li> <li>This content is NOT targeted.</li> </ul> <blockquote> <p>This content is NOT targeted.</p> 7 8 </blockquote> <p>This content is targeted.</p> <p>This content is targeted.</p> 2 3 3.5 </div> 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  23. Adjacent Sibling Selector + Select an element that’s a direct sibling of another element blockquote + p { This content is NOT targeted. color: red; This content is inside of a blockquote. } This content is targeted. This content is NOT targeted. <p>This content is NOT targeted.</p> <blockquote> <p>This content is inside of a blockquote.</p> </blockquote> <p>This content is targeted.</p> <p>This content is NOT targeted.</p> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  24. General Sibling Selector ~ Select an element that’s a sibling of another element blockquote ~ p { This content is NOT targeted. color: red; This content is inside of a blockquote. } This content is targeted. This content is targeted. <p>This content is NOT targeted.</p> This content is NOT targeted. <blockquote> <p>This content is inside of a blockquote.</p> This content is targeted. </blockquote> <p>This content is targeted.</p> <p>This content is targeted.</p> <div> <p>This content is NOT targeted.</p> 7 8 </div> <p>This content is targeted.</p> 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  25. Attribute Selector [name=value] Select an element that has a particular attribute & value input[type=text] { border-color: red; } <input type="password" name="one" /> <input type="text" name="two" /> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  26. First Child Pseudo-class :first-child Select only the first child element among many of its siblings ul li:first-child { • This content is targeted color: red; • This content is NOT targeted } • This content is NOT targeted • This content is NOT targeted • This content is NOT targeted <ul> <li>This content is targeted</li> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> </ul> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  27. Last Child Pseudo-class :last-child Select only the last child element among many of its siblings ul li:last-child { • This content is NOT targeted color: red; • This content is NOT targeted } • This content is NOT targeted • This content is NOT targeted • This content is targeted <ul> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> <li>This content is NOT targeted</li> <li>This content is targeted</li> </ul> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  28. First Letter Pseudo-element :first-letter Select the first letter in any element p:first-letter { color: red; The first letter in this paragraph is targeted. font-size: 2em; } <p>The first letter in this paragraph is targeted.</p> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  29. First Line Pseudo-element :first-line Dynamically select the first line of text in any element p:first-line { The first line of this paragraph is targeted. Resize your color: red; browser window and watch how, regardless of where } words move, only those words found in the first line remain targeted. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. <p>The first line of this paragraph is targeted. Resize your browser window and watch how, regardless of where words move, only those words found in the first line remain targeted. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the 7 8 paragraph larger.</p> 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  30. Enabled, Disabled, & Checked Pseudo-classes :enabled, :disabled, :checked Change the appearance of form inputs based on their status :enabled { This input is enabled border-color: green; } This input is disabled :disabled { border-color: red; This checkbox is initially checked } :checked { margin-left: 50px; } 7 8 <input type="text" value="This input is enabled" /> 2 3 3.5 <input type="text" disabled="disabled" value="This input is disabled" /> <label> 3 3.1 4 <input type="checkbox" checked="checked" /> This checkbox is initially checked </label> 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  31. nth of Type Pseudo-class :nth-of-type() Select multiple instances of sibling elements based on a formula tbody tr:nth-of-type(2n+1) td { Monday Tuesday Wednesday background-color: gray; 14 234 54 } 15 236 51 <table> <thead> 18 230 53 <tr> <th scope="col">Monday</th> 14 233 50 <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> 14 236 55 </tr> </thead> <tbody> <tr> 7 8 <td>14</td> <td>234</td> <td>54</td> 2 3 3.5 </tr> <tr> 3 3.1 4 <td>15</td> <td>236</td> <td>51</td> 9 </tr> …and so on… AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  32. Lets See Some Examples We’ll see examples of CSS that will... ✓ Improve element and content targeting 2. Replace outdated techniques for achieving certain design trends (lets stop making rounded corners and drop-shadows with images, eh?) 3. Replace some actions and behaviors currently found in JavaScript AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  33. Border Radius Property border-radius Create rounded-corners on any block-level element p { border: 5px solid red; This is just some filler content to make the padding: 1em; paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler -moz-border-radius: 10px; content to make the paragraph larger. This is just -webkit-border-radius: 10px; some filler content to make the paragraph larger. } This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. <p>This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to 7 8 make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the 2 3 3.5 paragraph larger.</p> 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  34. Box Shadow Property box-shadow Create a drop-shadow behind any block-level element p { This is just some filler content to make the background-color: black; paragraph larger. This is just some filler content to padding: 1em; make the paragraph larger. This is just some filler -moz-box-shadow: 3px 5px 15px white; content to make the paragraph larger. This is just -webkit-box-shadow: 3px 5px 15px white; some filler content to make the paragraph larger. } This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. <p>This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to 7 8 make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the 2 3 3.5 paragraph larger.</p> 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  35. Text Shadow Property text-shadow Create a drop-shadow behind text p { background-color: white; This content has a color: white; font-size: 2.5em; text-shadow. font-weight: bold; text-shadow: 2px 2px 6px black; } <p>This content has a text-shadow.</p> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  36. Multiple Background Images Use more than one background image in an element #multipleBackgroundImages { background-image: url(/images/gmail.png), This is just some filler content to make the paragraph larger. This is just some filler content to url(/images/automator.gif); make the paragraph larger. This is just some filler background-position: top left, content to make the paragraph larger. bottom right; background-repeat: no-repeat; This is just some filler content to make the border: 1px solid white; paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler padding: 0 1em; content to make the paragraph larger. } <div id="multipleBackgroundImages"> <p>This is just some filler content to make the paragraph larger. This is just 7 8 some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger.</p> 2 3 3.5 <p>This is just some filler content to make the paragraph larger. This is just 3 3.1 4 some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger.</p> 9 </div> AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  37. Opacity Property opacity Adjust an element’s opacity on a scale of 0-1 p { background-color: yellow; opacity: .5; This is just some filler content to make the paragraph padding: 1em; larger. This is just some filler content to make the } paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph <p>This is just some filler content to make larger. This is just some filler content to make the the paragraph larger. This is just some filler paragraph larger. This is just some filler content to content to make the paragraph larger. This is make the paragraph larger. This is just some filler just some filler content to make the paragraph content to make the paragraph larger. larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler 7 8 content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to 2 3 3.5 make the paragraph larger.</p> 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  38. RGBa Value rgba(x, x, x, x) Adjust a color’s opacity on a scale of 0-1 p { background-color: rgba(255, 255, 0, .5); padding: 1em; This is just some filler content to make the paragraph } larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph <p>This is just some filler content to make larger. This is just some filler content to make the the paragraph larger. This is just some filler paragraph larger. This is just some filler content to content to make the paragraph larger. This is make the paragraph larger. This is just some filler just some filler content to make the paragraph content to make the paragraph larger. larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler 7 8 content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to 2 3 3.5 make the paragraph larger.</p> 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  39. Lets See Some Examples We’ll see examples of CSS that will... ✓ Improve element and content targeting ✓ Replace outdated techniques for achieving certain design trends (lets stop making rounded corners and drop-shadows with images, eh?) 3. Replace some actions and behaviors currently found in JavaScript AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  40. Min/Max Height/Width Properties min-height, max-height, min-width, & max-width Allow an element to grow or shrink until it reaches a certain size #minHeight { #minWidth { <p id="minHeight">This is just some filler min-height: 100px; min-width: 900px; content to make the paragraph larger.</p> } } <p id="maxHeight">This is just some filler #maxHeight { #maxWidth { content to make the paragraph larger. This is max-height: 12px; max-width: 700px; just some filler content to make the paragraph overflow: hidden; } larger. This is just some filler content to } make the paragraph larger.</p> <p id="minWidth">This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph 7 8 larger. This is just some filler content to make the paragraph larger.</p> <p id="maxWidth">This is just some filler 2 3 3.5 content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to 3 3.1 4 make the paragraph larger.</p> 9 Browser demo time! AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  41. Column Properties column-width & column-gap Automatically create columns #columnProperty { These three make the paragraph larger. -moz-column-gap: 2em; paragraphs are paragraph larger. inside of a single This is just some This is just some -moz-column-width: 10em; div that has filler content to filler content to -webkit-column-gap: 2em; column make the make the -webkit-column-width: 10em; properties paragraph larger. paragraph larger. } applied to it. This is just some This is just some Look closely, filler content to filler content to <div id="columnProperty"> there is no make the make the <p>These three paragraphs are inside of a floating or paragraph larger. paragraph larger. single div that has column properties applied positioning going This is just some This is just some to it. Look closely, there is no floating or on here. filler content to filler content to positioning going on here.</p> make the make the <p>This is just some filler content to make This is just some paragraph larger. the paragraph larger. This is just some filler content to filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger.</p> 2 3 3.5 <p>This is just some filler content to make the paragraph larger. This is just some 3 3.1 4 filler content to make the paragraph larger. This is just some filler content to make the 7 8 9 paragraph larger.</p> </div> AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  42. Resize Property resize Allow an element to be resized by the visitor p { overflow: auto; Browser demo time! resize: both; width: 325px; } <p>This paragraph can be resized both horizontally and vertically. It looks like a text input field, but it&rsquo;s not.</p> 7 8 2 3 3.5 3 3.1 4 9 AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  43. Text Overflow Property text-overflow Characters that approach the edge of an element become an ellipsis p { border: 1px solid white; This is just some filler content to make the paragra... overflow: hidden; padding: 1em; text-overflow: ellipsis; white-space: nowrap; } Browser demo time! <p>This is just some filler content to make the paragraph larger. This is just some filler 7 8 content to make the paragraph larger. This is just some filler content to make the paragraph 2 3 3.5 larger. This is just some filler content to make the paragraph larger. This is just some filler content to make the paragraph larger. 3 3.1 4 This is just some filler content to make the paragraph larger.</p> 9 (requires -o-text-overflow) AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  44. Transition Property -webkit-transition Basic animation, with CSS p { <p class="scale">Example 1</p> border: 1px solid black; <p class="slideLeft">Example 2</p> float: left; <p class="slideRight">Example 3</p> margin-right: 2em; <p class="rotate">Example 4</p> padding: 1em; text-align: center; width: 100px; } -webkit-transition: all 1s ease-in-out; Browser demo time! .scale:hover { -moz-transform: scale(2); -webkit-transform: scale(2); } .slideLeft:hover { 7 8 -moz-transform: translate(-3em,1em); -webkit-transform: translate(-3em,1em); } 2 3 3.5 (sort of…) .slideRight:hover { -moz-transform: translate(3em,0); 3 3.1 4 -webkit-transform: translate(3em,0); } .rotate:hover { 9 -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); } AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  45. Lets See Some Examples We’ll see examples of CSS that will... ✓ Improve element and content targeting ✓ Replace outdated techniques for achieving certain design trends (lets stop making </fin> rounded corners and drop-shadows with images, eh?) ✓ Replace some actions and behaviors currently found in JavaScript AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  46. Conclusion Allow myself to conclude myself • Browser support varies, drastically in some cases. Choose wisely based on your audience and the browsers they use. AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  47. Conclusion Allow myself to conclude myself • Browser support varies, drastically in some cases. Choose wisely based on your audience and the browsers they use. • That said, a handful of these selectors and properties can be used as “added awesome,” visible only to those who use better browsers without ruining the experience for those using older browsers. AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  48. Conclusion Allow myself to conclude myself • Browser support varies, drastically in some cases. Choose wisely based on your audience and the browsers they use. • That said, a handful of these selectors and properties can be used as “added awesome,” visible only to those who use better browsers without ruining the experience for those using older browsers. • DEVELOPER DAY is incredible. AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  49. Questions? (re)sources: links: • CSS Current Work • The demonstration page http://www.w3.org/Style/CSS/current- http://marcamos.com/presentation/ work intro-css2.1-css3/ • Quirksmode (Peter-Paul Koch) • My personal website http://www.quirksmode.org/css/ http://www.marcamos.com contents.html • Boston Web Studio • CSS3.info http://www.bostonwebstudio.com http://www.css3.info • The Build Guild • My Brain http://www.buildguild.org localhost AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD
  50. </awesomePresentation> AN INTRODUCTION TO CSS 2.1 & CSS 3 MARC AMOS / BOSTON WEB STUDIO / BUILD GUILD

×