1 / 13

Html5 and css3

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

uri
Download Presentation

Html5 and css3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Html5 and css3 Matt Brendzel GA Boston Programs Producer William Neely CEO, Piecewise.com

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

  3. Html5 Boilerplate Go over example http://html5boilerplate.com/

  4. 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){ }

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

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

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

  8. CSS3 RGBA 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. 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)

  11. 3d transforms RotateX • Rotates element around X axis • Transform:rotateX(xDeg) RotateY • Rotates element around Y axis • Transform:rotateY(yDeg)

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

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

More Related