Post on 16-Jan-2015
description
ADD SOMEAWESOME-SAUCE
Trevor Davis05.06.2011
WHAT DO I DO?‣ Flat designs to interactive sites
‣ HTML
‣ CSS
‣ JavaScript
HTML5 & CSS3
WHAT WE'LL COVER‣ Doctype
‣ Elements
‣ Selectors
‣ Properties
‣ Values
PROGRESSIVE ENRICHMENT
DEGRADATION‣ Not everything is supported in every browser
‣ That's 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//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">
GROSS
HTML5 DOCTYPE<!DOCTYPE html>
ELEMENTS
SOOOO MANY‣ section
‣ article
‣ aside
‣ hgroup
‣ header
‣ footer
‣ nav
‣ figure
‣ figcaption
‣ video
‣ audio
‣ mark
‣ progress
‣ meter
‣ time
‣ canvas
‣ datalist
‣ and more…
LET'S 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[foo$="bar"]
‣ E[foo*="bar"]
‣ E:root
‣ E:nth-child(n)
‣ E:nth-last-child(n)
‣ E:last-child
‣ E:first-of-type
‣ E:last-of-type
‣ E:only-child
‣ E:empty
‣ and more…
LET'S LOOK AT THESE 3‣ E:first-child
‣ E:last-child
‣ E:nth-child(n)
PROPERTIES
A WHOLE BUNCH‣ border-radius
‣ border-image
‣ box-shadow
‣ background-size
‣ multiple backgrounds
‣ background-size
‣ text-shadow
‣ animations
‣ transforms
‣ transitions
‣ opacity
‣ and more…
TEXT SHADOWtext-shadow: 1px 1px 1px #fff
text-shadow: x y blur color
BORDER RADIUSborder-radius: 5px
border-radius: length
BOX SHADOWbox-shadow: inset 0 0 5px #000
box-shadow: inset x y blur spread color
OPACITYopacity: 0.5
opacity: alphavalue
TRANSFORMtransform: transform-function
transform: rotate(60deg)
matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY
Transform builder
TRANSITIONtransition: all 2.5s ease-in-out 2s
transition: property duration timing-function delay
Ceasar
ANIMATIONanimation: fly 4.5s linear infinite
animation: name duration timing-function delay count direction
VALUES
LET'S 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
‣ Don't 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