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