Top 10 Features in CSS 3

Cascading Style Sheets 3 and HTML5 are all the buzz these days, and for good reason. Together, they represent what will become another major evolutionary step forward for the World Wide Web, helping developers to create increasingly compelling and attractive Web applications. In fact, CSS3 eventually will become the Web’s next standard for stylizing presentational markup.

I’ve been digging into CSS3 in recent weeks, and I am pretty excited about what’s possible. In this article, I highlight 10 new features that you’ll undoubtedly see in use around the Web as browser developers continue racing to complete CSS3 support. Keep in mind that some of these features are still in a state of flux, and in several cases you’ll see that some are browser-specific, as the property prefixes will indicate.

1. Attribute Selectors

CSS selectors make it easy to apply styles to specific HTML elements. CSS3 introduces several new selectors which make it even easier to target very specific elements according to an attribute value. The following example will apply a bold font styling to any element having a title which ends in highlight:

span[title$="highlight"] {
  font-weight: bold;
}
...
The Zend Framework makes 
building websites fun and easy.

Other attribute selectors are also supported, including [attribute^="value"], which will match attributes starting with the value, and [attribute*="value"], which will match attributes containing the value.

2. Rounded Corners

Rounded corners have long been something of an obsession within the web design community, having been implemented in countless ways, often using wildly imaginative workarounds. In recognition of their importance, the ability to easily add rounded corners has been implemented within CSS3:

#sidebar {
 width: 200px;
 padding: 2px;
 border:  2px solid #CCC;
 /* Mozilla */
 -moz-border-radius: 15px;
 /* WebKit */
 -webkit-border-radius: 15px;
}
...
Home
Tutorials
About

3. Multi-Column Layouts

Speaking from the perspective of somebody who has spent a fair amount of time in the publishing world, I find the prospect of easily integrating multi-column layouts into a page quite exciting. CSS3 offers a very simple way to present a block of text in accordance with a specific number of columns, column spacing, and border decoration, as demonstrated here:

#multi {
 /* Mozilla */
 -moz-column-count: 4;
 -moz-column-gap: 0.5em;
 -moz-column-rule: 0px;

 /* WebKit */
 -webkit-column-count: 4;
 -webkit-column-gap: 0.5em;
 -webkit-column-rule: 0px;
}
...
Add long block of text here

4. Setting the Opacity

Like the aforementioned rounded corners feature, setting opacity has long been a feature of great interest within the web design community. This feature is now available natively within CSS3. For instance, to set an element’s opacity to 30 percent, use the following CSS declaration:

#opacity {
  background: #CCC;
  opacity: 0.3;
}
...
...

5. Font Flexibility

Fonts have long been one area where the Web has long fallen woefully short, with the choice of fonts limited to the browser’s default settings. While workarounds and browser-specific implementations have come and gone over the years, the matter is now en route to being definitively resolved thanks CSS3, which allows developers the flexibility of using any OpenType or TrueType font. For instance,

@font-face {
  font-family: "BaroqueScript";
  src: url("BaroqueScript.ttf") format("truetype");
}

h3 {
  font-family: "BaroqueScript";
}
...
Welcome to My Site!

Of course, you’ll need to arrange for the licensing of any commercial fonts you use within your website.

6. Word Wrapping

Another useful property for online publishers seeking to control every aspect of the text layouts is CSS3’s word-wrap property. You can use this feature to enforce the breaking of long words which might otherwise spill out of a predefined area. This presents many useful opportunities, including preventing malicious users from making your blog look bad by trying to post long strings of text. For instance, the following use of word-wrap will break the user’s long string before it exceeds the DIV boundaries:

.comment {
  width: 250px;
  word-wrap: break-word;
}
...
iwanttomakeyourwebsitelookmessedupbypostingareallylongstringoftextinthecomments

7. Text Shadowing

Adding a text shadow is another CSS3 feature offering huge potential. The following example will apply a gray text shadow 2px to the lower right, and further blurring it 5px:

#sidebar h3 {
 text-shadow: 2px 2px 5px #CCC;
}
...
Welcome

8. Applying Box Shadowing

Web designers have long used an image editing program such as The Gimp to create shadows which were they applied as background images to a page element. CSS3 makes this process much easier (particularly for the design challenged individuals in the audience, present party included) by offering the box-shadow property:

#masthead {
 width: 100%;
 height: 150px;
 background: #000;
 /* Mozilla */
 -moz-box-shadow: 2px 2px 5px #9BE1FB;
 /* WebKit */
 -webkit-box-shadow: 2px 2px 5px #9BE1FB;
}

9. Transforming Elements

Another promising CSS3 feature is the ability to rotate, scale, and skew a page element using the transform property. For instance, the following example will rotate the page element defined by the sale ID 25 degrees:

#sale {
 width: 150px;
 height: 15px;
 background: #CCC;
 /* Mozilla */
 -moz-transform: rotate(15deg);
 /* WebKit */
 -webkit-transform: rotate(15deg);
}
...
Sale! Today Only!

10. Using Gradients

Last but certainly not least, I’d like to introduce CSS3’s amazing gradient feature. You can use the gradient property to apply a two-color gradient to a page element, and can even specify the starting and ending points within the element, as well as the direction. Here’s an example:

#sale {
 width: 150px;
 height: 150px;
 /* Mozilla */
 background: -moz-linear-gradient(bottom, #CCC 50%, #fff 100%);
 /* WebKit */
 background: -webkit-gradient(linear, bottom, top, from(#CCC), to(#fff));
}
...
Sale! Today Only!

Conclusion

Are you doing anything interesting with CSS3? Tell us about it in the comments.

About the Author

Jason Gilmore is the founder of EasyPHPWebsites.com, and author of the popular book, “Easy PHP Websites with the Zend Framework”. Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer’s conference, and was a member of the 2008 MySQL Conference speaker selection board.