The Future of CSS

The Future of CSS
CSS3 Attribute Selectors

a[href^="mailto:"] {
background-image: url(email.gif);
}
a[href$=".pdf"] {
background-image: url(pdf.gif);
}

Interesting CSS3 Selectors

::selection { background: yellow;} /* makes
selected text yellow */
#menu a:after { content:" \00BB";} /* adds a
“»” symbol after every link in the menu */
.comment:target { background: yellow;} /* makes
the comment div yellow when targeted */

Interesting CSS3 Selectors

input:enabled { background: #999;} /* makes
enabled inputs dark grey */
input:disabled { background: #ccc;} /* makes
disabled inputs light grey */
input:checked { background: #39c;} /* makes
checked inputs blue */

Interesting CSS3 Selectors

#menu li:last-child { border-bottom: none;} /*
removes the bottom border on the last li */
tr:nth-child(odd) { color:blue;} /* makes every
other table row blue */

Using Multiple Background Images

.box {
background-image: url(top-left.gif), url(topright.
gif), url(bottom-left.gif), url(bottomright.
gif);
background-repeat: no-repeat, no-repeat, norepeat,
no-repeat;
background-position: top left, top right, bottom
left, bottom right;
}

Using Border Image

.box {
-webkit-border-image: url(images/corners.gif)
25% 25% 25% 25% / 25px round round;
}

Using Border Radius

.box {
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
}

CSS3 Box Shadow

.box {
-webkit-box-shadow: 4px 4px 8px #444;
-moz-box-shadow: 4px 4px 8px #444;
box-shadow: 4px 4px 8px #444;
}

CSS3 Multi-column Layout

#content {
-moz-column-count: 2;
-moz-column-gap: 2em;
-webkit-column-count: 2;
-webkit-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}

Calculations

#mainContent {
width: calc(100% - 200px)
}