For simplicity, the CSS3 modules can be separated into into ten categories: borders, backgrounds, fonts, text effects, multiple columns, transitions, 2D transitions, 3D transitions, animations, and user interface. Take a brief look at each module to see what it can do.
Borders: The border module extends the capabilities of the borders category by adding options for setting the border radius to make curved corners, the box shadow for adding drop shadows, and the border image for using graphics to style borders rather than using a single color per edge.
Backgrounds: There are currently three new additions to the background category with CSS3. The background size is especially handy for creating scalable graphics, the background origin offers three locations to position background images relative to the box model, and the background clip allows background colors to be clipped to the contents of a box rather than to the edges of a box.
In addition, CSS3 now allows you to use multiple background images for any container.
Fonts: Instead of being stuck using web-safe fonts for all your designs, the new @font-face property lets you choose and use any font hosted on your web server. What happens is a .ttf (True Type Fonts) or .otf (OpenType Fonts) font file gets automatically downloaded to the user’s device if and when that font is not detected.
You may have already seen a similar feature in action with sites using Google fonts and Typekit fonts. This style rule extends that capability by allowing you to use your own system fonts. However, be sure not to break any copyright laws by specifying copyright protected fonts!
Text Effects: There are actually 11 new properties in this module, but not all of them have major browser support. The properties that do currently have support are justify, overflow, shadow, word break, and word wrap.
Multiple Columns: Without having to use extra containers or floats, you can now create multiple text columns with the ten different multiple column properties. Although most of them work now, some still do require browser-specific style prefixes. Even so, they’re still pretty darn neat. For best results, set the column count and gap width.
Transitions: Hold onto your hat, you can now create movement on the page without animated gifs, Flash, or JavaScript! Transitions come in three flavors, regular, 2D, and 3D. With the regular transition, you can modify any one or more properties of an element, such as altering the width of an object over a specified number of seconds, when combined with the :hover pseudo-class.
2D Transitions: The items in this module allow you to manipulate the 2D properties of an element. Use them separately or combined to move, scale, skew, spin, stretch, and turn elements along a horizontal or vertical plane. For instance, you can make a box grow and spin while moving from left to right.
3D Transitions: As if 2D transitions weren’t cool enough, wait until you see what the 3D transitions do! Using a method that transforms the object along the X and/or Y axis, you can make your objects appear to rotate in 3D space, providing viewers with a chance to see the reversed “back” side of an object.
Though browser support is limited for more advanced transformations, eventually you’ll be able to rotate, scale, and move along the X, Y, and Z axes, among other things. Simply powerful.
Animations: Okay, what happens when you put all these new transformation techniques together? CSS3 animations, baby — the kind that can replace animated GIFs, Flash, and even some JavaScript. All the magic happens by way of binding the new @keyframes property to a selector by using the animation property with a specified name and duration.
For example, you could change the position and background color of an object so that the object has the appearance of morphing through space, and then you could include the code to make the animation reverse order and continue looping endlessly.
User Interface: With these new properties, you can add properties to different objects that convert them into interactive elements for site visitors. For instance, you can resize layers and textarea form fields, invoke the tab and arrow keys on a keyboard, and create an offset outline that extends beyond the border edge.
Now that you have an overview of the new modules, you can find out more about what they can do. For example, you can create shadows on shapes and text, apply background gradient effects, and move your objects from here to there.
