HTML5 AND CSS3

William NeelyCEO, Piecewise.com

Matt BrendzelGA 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

http://html5boilerplate.com/

BROWSER CONDITIONALS

BROWSER HACKS

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

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,yFactor)

‣ 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,yDeg)

3D TRANSFORMS

‣RotateX

‣ Rotates element around X axis

‣ Transform:rotateX(xDeg)

‣RotateY

‣ Rotates element around Y axis

‣ Transform:rotateY(yDeg)

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

RIBBONS

‣Css-tricks.com (http://css-tricks.com/snippets/css/ribbon/)

‣Use arrows and pseudo elements