Add Some Awesome-Sauce

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;}

DOCTYPE

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">

HTML5 DOCTYPE<!DOCTYPE html>

ELEMENTS

SOOOO MANY‣ section ‣ nav ‣ progress‣ article ‣ ﬁgure ‣ meter‣ aside ‣ ﬁgcaption ‣ time‣ hgroup ‣ video ‣ canvas‣ header ‣ audio ‣ datalist‣ footer ‣ mark ‣ and more…

LETS LOOK AT THESE 3 ‣ header ‣ section ‣ video

HTML5 VIDEO FORMATS‣ mp4‣ webm‣ ogg‣ Dive into HTML5

SELECTORS

AGAIN, SOOOO MANY‣ E[foo^="bar"] ‣ E:last-child‣ E[foo$="bar"] ‣ E:ﬁrst-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…

LETS LOOK AT THESE 3 ‣ E:ﬁrst-child ‣ E:last-child ‣ E:nth-child(n)

PROPERTIES

A WHOLE BUNCH‣ border-radius ‣ text-shadow‣ border-image ‣ animations‣ box-shadow ‣ transforms‣ background-size ‣ transitions‣ multiple backgrounds ‣ opacity‣ background-size ‣ and more…

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, scaleY,rotate, skew, skewX, skewYTransform builder

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-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;}

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 bottom, color-stop(0%,#f8f0e1), color-stop(100%,#eddab7))

GRADIENT SYNTAX-moz-linear-gradient([<point> ||<angle>,]? <stop>, <stop> [, <stop>])-webkit-linear-gradient([<point> ||<angle>,]? <stop>, <stop> [,<stop>]);Gradient generator

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://hp.trevordavis.net

http://trevordavis.net	439
http://feeds.feedburner.com	119
http://feeds2.feedburner.com	7
http://trevordavis.dev	2
http://www.slideshare.net	1
url_unknown	1

Add Some Awesome-Sauce

by davist11

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 569

Statistics

Add Some Awesome-Sauce Presentation Transcript