Your SlideShare is downloading. ×
Add Some Awesome-Sauce
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Add Some Awesome-Sauce

2,497
views

Published on

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

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,497
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
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. ADD SOMEAWESOME-SAUCETrevor Davis05.06.2011
  • 2. WHAT DO I DO?‣ Flat designs to interactive sites‣ HTML‣ CSS‣ JavaScript
  • 3. HTML5 & CSS3
  • 4. WHAT WELL COVER‣ Doctype‣ Elements‣ Selectors‣ Properties‣ Values
  • 5. PROGRESSIVE ENRICHMENT
  • 6. DEGRADATION‣ Not everything is supported in every browser‣ Thats ok‣ Provide fallbacks
  • 7. PREFIXES
  • 8. PREFIXES.something { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
  • 9. HTML5
  • 10. DOCTYPE
  • 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. GROSS
  • 13. HTML5 DOCTYPE<!DOCTYPE html>
  • 14. ELEMENTS
  • 15. SOOOO MANY‣ section ‣ nav ‣ progress‣ article ‣ figure ‣ meter‣ aside ‣ figcaption ‣ time‣ hgroup ‣ video ‣ canvas‣ header ‣ audio ‣ datalist‣ footer ‣ mark ‣ and more…
  • 16. LETS LOOK AT THESE 3 ‣ header ‣ section ‣ video
  • 17. HTML5 VIDEO FORMATS‣ mp4‣ webm‣ ogg‣ Dive into HTML5
  • 18. CSS3
  • 19. SELECTORS
  • 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. LETS LOOK AT THESE 3 ‣ E:first-child ‣ E:last-child ‣ E:nth-child(n)
  • 22. PROPERTIES
  • 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. TEXT SHADOWtext-shadow: 1px 1px 1px #ffftext-shadow: x y blur color
  • 25. BORDER RADIUSborder-radius: 5pxborder-radius: length
  • 26. BOX SHADOWbox-shadow: inset 0 0 5px #000box-shadow: inset x y blur spreadcolor
  • 27. OPACITYopacity: 0.5opacity: alphavalue
  • 28. TRANSFORMtransform: transform-functiontransform: rotate(60deg)matrix, translate, translateX,translateY, scale, scaleX, scaleY,rotate, skew, skewX, skewYTransform builder
  • 29. TRANSITIONtransition: all 2.5s ease-in-out 2stransition: property duration timing-function delayCeasar
  • 30. ANIMATIONanimation: fly 4.5s linear infiniteanimation: name duration timing-function delay count direction
  • 31. VALUES
  • 32. LETS JUST LOOK AT THESE ‣ font-face ‣ rgba ‣ gradients
  • 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. RGBAcolor: rgba(0, 0, 0, 0.5)color: rgba(red, green, blue, alpha)
  • 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. GRADIENT SYNTAX-moz-linear-gradient([<point> ||<angle>,]? <stop>, <stop> [, <stop>])-webkit-linear-gradient([<point> ||<angle>,]? <stop>, <stop> [,<stop>]);Gradient generator
  • 37. RANDOM CSS TIPS
  • 38. RANDOM CSS TIPS‣ Create a baseline‣ Alphabetize properties‣ Comment grouping‣ Dont touch CSS until your HTML is solid
  • 39. QUESTIONS?
  • 40. THANKS!‣ My Site: http://trevordavis.net‣ Twitter: @trevor_davis‣ Source: https://github.com/davist11/HP-Demo‣ Demo: http://hp.trevordavis.net