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
Makes any element partially transparent
a img {
IE
opacity: .5;
filter: alpha(opacity=50);
}
a:hover img {
opacity: 1;
filter: alpha(opacity=100);
}
All descendent tags inherit the property.
Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.
Used here with
the Hover
pseudo-class
RGBA
Alpha
Red, Green, Blue, Alpha
.footer { background-color: rgba(70,80,212,.75); }
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
#nav
#adv
#body
{position: a }
{position: b }
{position: d }
{position: c }
Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.
http://a.deveria.com/?p=236
http://code.google.com/p/css-template-layout/