ADD SOMEAWESOME-SAUCETrevor Davis05.06.2011
WHAT DO I DO?‣ Flat designs to interactive sites‣ HTML‣ CSS‣ JavaScript
HTML5 & CSS3
WHAT WELL COVER‣ Doctype‣ Elements‣ Selectors‣ Properties‣ Values
PROGRESSIVE ENRICHMENT
DEGRADATION‣ Not everything is supported in every browser‣ Thats ok‣ Provide fallbacks
PREFIXES
PREFIXES.something {    -moz-border-radius: 10px;    -webkit-border-radius: 10px;    border-radius: 10px;}
HTML5
DOCTYPE
PRE-HTML5 DOCTYPES<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d...
GROSS
HTML5 DOCTYPE<!DOCTYPE html>
ELEMENTS
SOOOO MANY‣ section   ‣ nav         ‣ progress‣ article   ‣ figure       ‣ meter‣ aside     ‣ figcaption   ‣ time‣ hgroup   ...
LETS LOOK AT THESE 3 ‣ header ‣ section ‣ video
HTML5 VIDEO FORMATS‣ mp4‣ webm‣ ogg‣ Dive into HTML5
CSS3
SELECTORS
AGAIN, SOOOO MANY‣ E[foo^="bar"]         ‣ E:last-child‣ E[foo$="bar"]         ‣ E:first-of-type‣ E[foo*="bar"]         ‣ E...
LETS LOOK AT THESE 3 ‣ E:first-child ‣ E:last-child ‣ E:nth-child(n)
PROPERTIES
A WHOLE BUNCH‣ border-radius          ‣ text-shadow‣ border-image           ‣ animations‣ box-shadow             ‣ transfo...
TEXT SHADOWtext-shadow: 1px 1px 1px #ffftext-shadow: x y blur color
BORDER RADIUSborder-radius: 5pxborder-radius: length
BOX SHADOWbox-shadow: inset 0 0 5px #000box-shadow: inset x y blur spreadcolor
OPACITYopacity: 0.5opacity: alphavalue
TRANSFORMtransform: transform-functiontransform: rotate(60deg)matrix, translate, translateX,translateY, scale, scaleX, sca...
TRANSITIONtransition: all 2.5s ease-in-out 2stransition: property duration timing-function delayCeasar
ANIMATIONanimation: fly 4.5s linear infiniteanimation: name duration timing-function delay count direction
VALUES
LETS JUST LOOK AT THESE ‣ font-face ‣ rgba ‣ gradients
FONT FACE@font-face {    font-family: ArvoItalic;    src: url(/fonts/arvo-italic-webfont.eot);    src: url(/fonts/arvo-ita...
RGBAcolor: rgba(0, 0, 0, 0.5)color: rgba(red, green, blue, alpha)
GRADIENTSbackground: -moz-linear-gradient(top,#f8f0e1 0%, #eddab7 100%)background: -webkit-gradient(linear,left top, left ...
GRADIENT SYNTAX-moz-linear-gradient([<point> ||<angle>,]? <stop>, <stop> [, <stop>])-webkit-linear-gradient([<point> ||<an...
RANDOM CSS TIPS
RANDOM CSS TIPS‣ Create a baseline‣ Alphabetize properties‣ Comment grouping‣ Dont touch CSS until your HTML is solid
QUESTIONS?
THANKS!‣ My Site: http://trevordavis.net‣ Twitter: @trevor_davis‣ Source: https://github.com/davist11/HP-Demo‣ Demo: http:...
Add Some Awesome-Sauce
Upcoming SlideShare
Loading in …5
×

Add Some Awesome-Sauce

2,966 views

Published on

Presentation to Clarksburg High School students with supporting demo site: http://hp.trevordavis.net

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,966
On SlideShare
0
From Embeds
0
Number of Embeds
808
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Add Some Awesome-Sauce

  1. 1. ADD SOMEAWESOME-SAUCETrevor Davis05.06.2011
  2. 2. WHAT DO I DO?‣ Flat designs to interactive sites‣ HTML‣ CSS‣ JavaScript
  3. 3. HTML5 & CSS3
  4. 4. WHAT WELL COVER‣ Doctype‣ Elements‣ Selectors‣ Properties‣ Values
  5. 5. PROGRESSIVE ENRICHMENT
  6. 6. DEGRADATION‣ Not everything is supported in every browser‣ Thats 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//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 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. LETS 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. LETS 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 SHADOWtext-shadow: 1px 1px 1px #ffftext-shadow: x y blur color
  25. 25. BORDER RADIUSborder-radius: 5pxborder-radius: length
  26. 26. BOX SHADOWbox-shadow: inset 0 0 5px #000box-shadow: inset x y blur spreadcolor
  27. 27. OPACITYopacity: 0.5opacity: alphavalue
  28. 28. TRANSFORMtransform: transform-functiontransform: rotate(60deg)matrix, translate, translateX,translateY, scale, scaleX, scaleY,rotate, skew, skewX, skewYTransform builder
  29. 29. TRANSITIONtransition: all 2.5s ease-in-out 2stransition: property duration timing-function delayCeasar
  30. 30. ANIMATIONanimation: fly 4.5s linear infiniteanimation: name duration timing-function delay count direction
  31. 31. VALUES
  32. 32. LETS 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. RGBAcolor: rgba(0, 0, 0, 0.5)color: rgba(red, green, blue, alpha)
  35. 35. GRADIENTSbackground: -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‣ Dont 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

×