« launchpad at Web 2.0 Expo | Main | Baratunde Thurston: There's a Hashtag for That »

November 18, 2009

CSS3 for Working Web Designers

Listening to Hakon Wium Lie (CTO for Opera Software, friend of Tim Burners Lee) at the Web 2.0 Expo NYC speaking about CSS3.

Hakon was first at CERN, the physics laboratory. He got to work with Tim Burners Lee, and has a picture of the office Tim worked in and the public terminal where the "World Wide Web" was first usable. CERN broke the group off and Hakon went to Italy and Tim went to MIT.

CSS was first proposed in 1994, first specs approved in 1996. Version 2 became a recommended version by W3C in 1998. CSS wasn't really usable until 2001. In 2009, CSS 2.1 is a candidate recommendation, there are many CSS3 drafts and CSS3 is implemented in at least 2 browsers right now.

[I've heard two separate recommendations for the CSS zen garden, been there before but should check it out in more detail]

Hakom suggests that we need a new, easy name for the new standards coming. He suggests:


CSS1 was basic styling. CSS2 adds text-shadow.

Demo of CSS3

Includes the addition of web fonts. Doesn't work in IE, but most everything else from the last year supports this.

Colors have improved. Use rgba to set transparency background: rgba(255,0,0,.05);. Can also use the opacity keyword.

Media queries allow you to have different CSS applied for different browser properties. Really powerful example of how as you resize the browser window to very narrow, the elements on the screen change.

@media all and (min-width: 600px) and (max-width: 800px)

Box changes allow you to have a border-radius. Can have different horizontal and vertical radius, which lets you create any combination of different rounding on each of the corners of a box. Also can have box-shadow, with control over the color and fuzziness. You can combine these radius and shadow to make buttons with shadows.

Transitions allow you to set transitions between different states. If you're doing something like "hover", you can set a transition-duration attribute that lets you control how much time to take when changing from one state to another.

Hakon does a little demo of having built the Apple logo entirely in CSS. Really impressive, including shadows, rounded corners, hovering.

There's a bunch of @page stuff to let HTML documents be rendered for print. There is an ::after selector, within which you can use the target-counter to programmatically have page numbers, bullet numbers, etc automatically generated.

Posted by mike at November 18, 2009 11:08 AM