Top New Features in CSS 3, Page 2

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.

Page 2 of 2



This article was originally published on January 18, 2011