Watkins Web 1

James Muspratt
Apr 23, 2011

Part 10: Intro to CSS3

Most of the CSS properties we have used so far are technically from the CSS 2.1 specification, and browser support for them is quite good in the latest versions of the major browsers (Internet Explorer 8 and 9, Safari 5, Firefox 3 and 4, and Chrome 11).

CSS3 is not finalized, and browser support is very uneven, but its new properties enable all sorts of interesting styles and animations. Very often you will have to declare the same property and value multiple times, once in a generic way, and several times again with “vendor prefixes”, similar-looking properties that target particular browsers or rendering engines. -webkit targets Safari and Chrome, -moz is for Firefox, and -o is for Opera. Be sure to write the vendor-specific declarations first, followed by the generic declaration. That way, any browser that supports the generic declaration will use it.

In a few years we will be able to drop the vendor prefixes and just use the generic properties, but we’re stuck with them for now. For more on the reasons behind vendor prefixes, read Prefix for Posthack, by Eric Meyer. For a brief look at browser support, look at Deep Blue Sky: CSS3 Support by Browser.

Properties and Syntax

RGBa Color Values

We’re used to specifying text, border, and background colors as English words (color:gray;) and hexademical codes (color:#555555;). The RGB model lets you specify colors with red, green, and blue values (each numbered 0 to 255). Like hexadecimal codes, these are visible in the color pickers in Adobe programs.

#main a {
	color: rgb(76,149,224); /* blue */
	}

RGBa builds on this syntax: you use RGBa to specify an RGB color and then an amount of alpha transparency, which uses a scale of 0 to 1, where 1 is the normal, opaque setting.

#main a {
	color: rgba(76,149,224, .8); /* blue with 80% opacity */
	background-color: yellow;
	}

Why have transparency on your text, rather than just pick a lighter color? You might want to allow a background color — or more often a texture or image — to mix with the text color. Keep in mind you can use RGBa wherever colors are specified. Here’s how to create a semi-transparent border on div: 

div#main {
	border: 10px solid rgba(255, 255, 255, 0.3);
	}

Opacity

The opacity property controls the transparency of the entire contents of the HTML element, images, background images, and text included — not just the background. Unfortunately, this is a property that neither Internet Explorer 6 or 7 supports. Although Microsoft hasn’t adopted the standard vendor prefix syntax, you can add the Explorer-specific filter property. Use the syntax below:

#main a:hover {
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	opacity: .8;
	}

Rounded Corners

Note that border-radius might better be named “box-roundness” — you might well put a background color on an element and round its corners without adding a border at all.

#main  {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	}

CSS columns

CSS3 lets you put a single chunk of text into multiple (equal-size) columns, without floats or complex positioning. This is an impressive trick, but in practice columns have big usability problems. You don’t know the height of the user’s browser window, and so anything but very short columns might require the user to scroll up and down repeatedly to read your text. The basic syntax for the two approaches is below. See Quirksmode’s article on CSS3 columns for more info. 

/* Define the column COUNT */
 div#main {
	/* column count */
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	/* gutters, aka gaps */
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px; 
	/* rules: same syntax as borders*/
	-moz-column-rule: 1px solid black;
	-webkit-column-rule: 1px solid black;
	}

/* Define the column WIDTH */
 div#main {
	/* column width */
	-moz-column-width: 150px;
	-webkit-column-width: 150px;
	column-width: 150px;
	/* gutters, aka gaps */
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px; 
	/* rules: same syntax as borders*/
	-moz-column-rule: 1px solid black;
	-webkit-column-rule: 1px solid black;
	}

Multiple Background Images

CSS3 lets you attach multiple background images to a single element. The trick is to use comma-separated values and the verbose, hyphenated properties instead of the customary, all-in-one background property:

#side {
	background-image: url(background1.png), url(background2.png);
	background-position: 0 0, 10px 10px;
	}

Drop Shadows

Drop shadows are easily generated with CSS3, too, and you can control the shadow offset (how far it is shifted from the element’s edges), how blurry the shadow is, and the shadow color. The syntax goes like this: offset-x offset-y blur-amount shadow-color:

img {
	-moz-box-shadow: 0 0 10px #00b4ff;
	-webkit-box-shadow: 0 0 10px  #00b4ff;
	box-shadow: 0 0 10px #00b4ff;
	}

Transformations

CSS3 Transformations manipulate HTML elements in ways that older CSS properties can’t. You can combine these effects with smooth CSS transitions (below) for a more fluid effect. Here’s a quick way to scale images up to 120% size on hover:

#img:hover {
	margin:0;
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
   }

Other transform values include rotate(), skew(), and translate().

Transitions

Probably the most interesting part of CSS3 is enabling transitions. The most common use is to make the change from a normal state to a hover state gradual, rather than instantaneous (this effect is very common with Flash).

For instance, suppose we have already created a few links that have a class of “button”, and we set them to be blue. On hover, we change them to green and move them 2 pixels down (using margin-top). By default, these changes kick in the moment the user’s mouse passes over the button. Adding a smooth transition requires just four lines of CSS3 code: 

a.button { 
	color:blue;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;	
	}
a.button:hover {
	margin-top:2px;
	color:green;
	}

Notice that you must put the transitions on the a.button style, not on a.button:hover. This seems illogical, since the effect only happens on hover, but remember that CSS uses pseudo-classes for other states besides hover: a:link, a:target, a:active, a:visited. Since the transition would generally be intended to occur for those states too, it was decided to simplify things by requiring the transition info only on the default style.

Our transition is composed of three values: first, we specify which properties should be affected by the transition. Most of the time, all is the easiest choice. However, if we’d only wanted the color change to be gradual, and the margin change to happen instantly, we could have written: transition: color 1s ease;. Second, we write the transition duration, in seconds. Finally, we specify easing. Easing is mostly visible when moving, scaling, or rotating an element: it means making the animation fast at the slow at the beginning and end, making it act more like a real life object. Your options include linear (no easing), ease-in, ease-out, and ease. Again, most of the time ease is a good choice. See Dan Cederholm’s Understanding CSS3 Transitions for more.

Further Reading