CSS3

http://www.css3.info/ https://browserlab.adobe.com http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/

None of the CSS3 modules are complete.

Developers already including elements of CSS3 even though it is not finished.

Your pages do not have to look the same in every browser.

BUT ensure that your websites work for all site’s visitors.

Child Selectors

Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

Child Selectors

Beginning with second item select every 4th items

Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

Child Selectors

table tr:nth-child(odd) { background-color: #efefef; }

Multi-column layout

-moz-column-width: 13em-webkit-column-width: 13em-moz-column-gap: 1em-webkit-column-gap: 1em;

-moz = Firefox-webkit = Safari

Number of columns will vary based on width of browser window.

Multi-column layout

-moz-column-count: 3-moz-column-gap: 1em -moz-column-rule: 1px solid black -webkit-column-count: 3-webkit-column-gap: 1em-webkit-column-rule: 1px solid black;

Number of columns will be 3, gap 1em, with black border

Opacity

a img {opacity: .5;filter: alpha(opacity=50);}

a:hover img {opacity: 1;filter: alpha(opacity=100);

}

Makes any element partially transparent

All descendent tags inherit the property.

Used here with the Hover pseudo-class

IE

Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

RGBA

.footer { background-color: rgba(70,80,212,.75); }

Red, Green, Blue, AlphaAlph

a

Fonts

@font-face {font-family: Lavoisier;src: url('lavoisier.otf');}

h1 {font-family: Lavoisier, Arial,

Helvetica, sans-serif;color: #FF993E;font-size: 48px;

}open type (.otf) or true type (.ttf) | IE embedded open type (.eot)

Pseudo-elements

p:before {content: “HELLO World!";}

ul li:first-child:after {content: " | HELLO World!";}

ul li:nth-child(odd):after {content: " | HELLO World!";}

Template layout module

Can use letters to define a page’s basic structure.

Divides the page into two rows: top row aaa being one unit bottom row bcd being three units or

columns:body {display: “aaa” “bcd”;}

#head {position: a }#nav {position: b }#adv {position: d }#body {position: c }

http://a.deveria.com/?p=236

http://code.google.com/p/css-template-layout/

Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.