HTML5 AND CSS3 William Neely CEO, Piecewise.com Matt Brendzel GA Boston Programs Producer

NEW HTML5 STRUCTURAL ELEMENTS HTL5 ‣ Header ‣ Contains the header *zOmg, no way, really?!?* ‣ Hgroup ‣ Wrap multiple headings into one ‣ Footer ‣ Nav ‣ Article ‣ Stand alone content ‣ Ex: news story ‣ RSS 2 ‣ Section ‣ Group similar articles ‣ Define sections of single article ‣ Time ‣ For dates/times ‣ Q. Why useful? ‣ Aside ‣ Related but not essential ‣ Figure,figcaption ‣ For figures and captions

BOILERPLATE HTML5 Go over example

BROWSER CONDITIONALS BROWSER HACKS IE Insert HTML, CSS, JS only for IE Target specific IE versions gt(e), greater than (equal) lt(e), less than (equal) Change CSS url- prefix(){} screen and (- webkit-min-device-pixel-ratio:0){ }

VENDOR PREFIXES CSS3 ‣ Needed for parts of CSS3 ‣ Mozilla/Firefox/Gecko: -moz- ‣ Webkit (Safari/Chrome): -webkit- ‣ Opera: -o- ‣ IE: -ms- ‣ No rule of thumb

BOX SHADOW CSS3 ‣ Style ‣ Box-shadow,-mox-box- shadow,-webkit-box-shadow ‣ Ex: box-shadow:#CCC 3px 4px 5px 6px* inset*; *optional ‣ #CCC ‣ Shadow color ‣ 3px ‣ Horizontal offset ‣ 4px ‣ Vertical offset ‣ 5px ‣ Blur value (how fast) ‣ 6px ‣ Blur spread (how far) Inset If used, shadow inside box If not used, shadow outside box

BORDER RADIUS AND TEXT SHADOW CSS3 Border-radius adds rounded corners can create circles Ex: border-radius:5px; border-radius: 5px 10px; border-radius: 4px 5px 7px 10px; border-radius: 5px/4px; (ellipse) Text-shadow text-shadow: 2px 3px 4px* #CCC; 2px=horizontal shadow 3px=vertical shadow 4px=blur #CCC=shadow color

RGBA CSS3 RGBA Red,green,blue,alpha (opacity) Use instead of # Allows opacity without affecting children

OPTIONS Busy Hands CSS arrows and ribbons 2d/3d transformations

2D/3D TRANSFORMS TRANSFORMS ‣ Require browser prefixes ‣ IE, Opera only 2D ‣ Scale ‣ Make bigger ‣ Transform:scale(xFactor,y Factor) ‣ Translate ‣ Moves element by offset x,y ‣ Transform:translate(x,y) ‣ Rotate ‣ Rotates element by degree ‣ Transform:rotate(30deg) ‣ Skew ‣ Skews element by degrees ‣ Transform:skew(xDeg,yD eg)

3D TRANSFORMS ‣ RotateX ‣ Rotates element around X axis ‣ Transform:rotateX(xDeg) ‣ RotateY ‣ Rotates element around Y axis ‣ Transform:rotateY(yDeg)

ARROWS ‣ Css-tricks.com ( tricks.com/snippets/css/css-triangle/) ‣ Arrow ‣ Height,width = 0 ‣ Up arrow ‣ Border-left,right:10px solid transparent; ‣ Border-bottom:10px solid; ‣ Left arrow ‣ Border-top,bottom:10px solid transparent; ‣ Border-right:10px solid #000; ‣ Rules ‣ Colored border opposite of direction arrow will point ‣ Right arrow ‣ Colored left border ‣ Transparent border ‣ If arrow left/right ‣ Transparent top/bottom ‣ If arrow top/bottom ‣ Transparent left/right No border for side that matches arrow

RIBBONS ‣ Css-tricks.com ( tricks.com/snippets/css/ribbon/) ‣ Use arrows and pseudo elements