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

2. 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

3. BOILERPLATE HTML5 Go over example http://html5boilerplate.com/

4. 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 Firefox @-moz-document url- prefix(){} Chrome @media screen and (- webkit-min-device-pixel-ratio:0){ }

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

6. 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

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

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

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

10. 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)

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

12. ARROWS ‣ Css-tricks.com (http://css- 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

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