Successfully reported this slideshow.
Your SlideShare is downloading. ×

Add Some Awesome-Sauce

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 41 Ad

More Related Content

Similar to Add Some Awesome-Sauce (20)

Recently uploaded (20)

Advertisement

Add Some Awesome-Sauce

  1. 1. ADD SOME AWESOME-SAUCE Trevor Davis 05.06.2011
  2. 2. WHAT DO I DO? ‣ Flat designs to interactive sites ‣ HTML ‣ CSS ‣ JavaScript
  3. 3. HTML5 & CSS3
  4. 4. WHAT WE'LL COVER ‣ Doctype ‣ Elements ‣ Selectors ‣ Properties ‣ Values
  5. 5. PROGRESSIVE ENRICHMENT
  6. 6. DEGRADATION ‣ Not everything is supported in every browser ‣ That's ok ‣ Provide fallbacks
  7. 7. PREFIXES
  8. 8. PREFIXES .something { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
  9. 9. HTML5
  10. 10. DOCTYPE
  11. 11. PRE-HTML5 DOCTYPES <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
  12. 12. GROSS
  13. 13. HTML5 DOCTYPE <!DOCTYPE html>
  14. 14. ELEMENTS
  15. 15. SOOOO MANY ‣ section ‣ nav ‣ progress ‣ article ‣ figure ‣ meter ‣ aside ‣ figcaption ‣ time ‣ hgroup ‣ video ‣ canvas ‣ header ‣ audio ‣ datalist ‣ footer ‣ mark ‣ and more…
  16. 16. LET'S LOOK AT THESE 3 ‣ header ‣ section ‣ video
  17. 17. HTML5 VIDEO FORMATS ‣ mp4 ‣ webm ‣ ogg ‣ Dive into HTML5
  18. 18. CSS3
  19. 19. SELECTORS
  20. 20. AGAIN, SOOOO MANY ‣ E[foo^="bar"] ‣ E:last-child ‣ E[foo$="bar"] ‣ E:first-of-type ‣ E[foo*="bar"] ‣ E:last-of-type ‣ E:root ‣ E:only-child ‣ E:nth-child(n) ‣ E:empty ‣ E:nth-last-child(n) ‣ and more…
  21. 21. LET'S LOOK AT THESE 3 ‣ E:first-child ‣ E:last-child ‣ E:nth-child(n)
  22. 22. PROPERTIES
  23. 23. A WHOLE BUNCH ‣ border-radius ‣ text-shadow ‣ border-image ‣ animations ‣ box-shadow ‣ transforms ‣ background-size ‣ transitions ‣ multiple backgrounds ‣ opacity ‣ background-size ‣ and more…
  24. 24. TEXT SHADOW text-shadow: 1px 1px 1px #fff text-shadow: x y blur color
  25. 25. BORDER RADIUS border-radius: 5px border-radius: length
  26. 26. BOX SHADOW box-shadow: inset 0 0 5px #000 box-shadow: inset x y blur spread color
  27. 27. OPACITY opacity: 0.5 opacity: alphavalue
  28. 28. TRANSFORM transform: transform-function transform: rotate(60deg) matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY Transform builder
  29. 29. TRANSITION transition: all 2.5s ease-in-out 2s transition: property duration timing- function delay Ceasar
  30. 30. ANIMATION animation: fly 4.5s linear infinite animation: name duration timing- function delay count direction
  31. 31. VALUES
  32. 32. LET'S JUST LOOK AT THESE ‣ font-face ‣ rgba ‣ gradients
  33. 33. FONT FACE @font-face { font-family: 'ArvoItalic'; src: url('/fonts/arvo-italic-webfont.eot'); src: url('/fonts/arvo-italic-webfont.eot?iefix') format('eot'), url('/fonts/arvo-italic-webfont.woff') format('woff'), url('/fonts/arvo-italic-webfont.ttf') format('truetype'), url('/fonts/arvo-italic-webfont.svg#webfontCl4HytEc') format('svg'); font-weight: normal; font-style: normal; }
  34. 34. RGBA color: rgba(0, 0, 0, 0.5) color: rgba(red, green, blue, alpha)
  35. 35. GRADIENTS background: -moz-linear-gradient(top, #f8f0e1 0%, #eddab7 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop (0%,#f8f0e1), color-stop (100%,#eddab7))
  36. 36. GRADIENT SYNTAX -moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]) -webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); Gradient generator
  37. 37. RANDOM CSS TIPS
  38. 38. RANDOM CSS TIPS ‣ Create a baseline ‣ Alphabetize properties ‣ Comment grouping ‣ Don't touch CSS until your HTML is solid
  39. 39. QUESTIONS?
  40. 40. THANKS! ‣ My Site: http://trevordavis.net ‣ Twitter: @trevor_davis ‣ Source: https://github.com/davist11/HP-Demo ‣ Demo: http://hp.trevordavis.net

×