870 likes | 2.17k Views
Html5 and css3. Matt Brendzel GA Boston Programs Producer. William Neely CEO, Piecewise.com . htl5. New html5 structural elements. Section Group similar articles Define sections of single article Time For dates/times Q. Why useful? Aside Related but not essential Figure,figcaption
E N D
Html5 and css3 Matt Brendzel GA Boston Programs Producer William Neely CEO, Piecewise.com
htl5 New html5 structural elements 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 Header • Contains the header *zOmg, no way, really?!?* • Hgroup • Wrap multiple headings into one Footer Nav Article • Stand alone content • Ex: news story • RSS
Html5 Boilerplate Go over example http://html5boilerplate.com/
Browser hacks Browser conditionals IE Insert HTML, CSS, JS only for IE Target specific IE versions <!--[if IE]><[endif]--> 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){ }
css3 Vendor prefixes Needed for parts of CSS3 Mozilla/Firefox/Gecko: -moz- Webkit (Safari/Chrome): -webkit- Opera: -o- IE: -ms- No rule of thumb
css3 Box shadow #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 Style • Box-shadow,-mox-box-shadow,-webkit-box-shadow Ex: box-shadow:#CCC 3px 4px 5px 6px* inset*; *optional
css3 Border radius and text shadow 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
CSS3 RGBA RGBA Red,green,blue,alpha (opacity) Use instead of # Allows opacity without affecting children
Options Busy Hands CSS arrows and ribbons 2d/3d transformations
Transforms 2D/3D transforms Rotate • Rotates element by degree • Transform:rotate(30deg) Skew • Skews element by degrees • Transform:skew(xDeg,yDeg) Require browser prefixes IE, Opera only 2D Scale • Make bigger • Transform:scale(xFactor,yFactor) Translate • Moves element by offset x,y • Transform:translate(x,y)
3d transforms RotateX • Rotates element around X axis • Transform:rotateX(xDeg) RotateY • Rotates element around Y axis • Transform:rotateY(yDeg)
Arrows 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 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;
Ribbons Css-tricks.com (http://css-tricks.com/snippets/css/ribbon/) Use arrows and pseudo elements