Released to coincide with HTML5, CSS 3 introduces new tools for visual emphasis and structuring page layout. Today we look at a couple of promising features.
Use for emphasis on headlines and links, the text shaow is defined by its color, x-coordinate, y-coordinate, and blur radius (in this order). For example, here are examples of the text shadow on an h1 tag and an a link hover state with indicated specifications.
Text shadow on hover state example with gray background.
Used to distinguish a box or div from other areas of the page with a drop shadow, the box shadow requires browser prefixes to encourage support. These preceed the declaration with -moz- or -webkit-, which indicates the browser implementation.
Box shadowing, like text shadowing, is defined by its color, x-coordinate, y-coordinate, and blur radius. The blur radius is optional. Let's look at some examples.
Like box shadowing, one must include a prefix for the Mozilla browser engine used by Firefox. The border radius at its most simple is the number of pixels from the center of an imaginary circle that rounds the corner of a box or div. So, using a simple div like above, we may apply a general border radius to round its corners.
One may also specify the radius of a particular side or sides.
Matthew Blake Department of Journalism CSU-Chico
mdblake@csuchico.edu (530) 898-3608