May 19, 2010 in HTML/CSS by Alan Holmes

Useful Styling Techniques Introduced in CSS3

No Ratings Yet

 Loading ...

With the introduction of CSS3, comes some new, very useful styling abilities, including border-radius, which can be used to create rounded borders, like those seen in the WordPress admin menus, buttons and tables.

Tags: border-radius, box-shadow, CSS3, text-shadow, word-wrap

About the Author: Alan Holmes

Hi I'm Alan Holmes, the owner of AHdevelopment. I have been doing web development for many years, and I created this site so that I can finally start archiving my development solutions in one central place, as well as making them available for others to find.

Alan Holmes has written 8 article(s).

CSS3 Techniques

Although all CSS3 techniques are not yet full supported (well, to be honest, not supported in Internet Explorer, surprise surprise), there are some useful techniques that are worth knowing about now, and currently (on my personal tests), work in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, but are also said to work in Konqueror and Opera.

Here we shall be looking at four techniques in particular, border-radius, box-shadow, text-shadow and word-wrap.

Border-Radius

Border-Radius will allow you to create round corners, without the need to use images. You can add it to all, or specific corners, buy using the following:

/* Round all corners */
-moz-border-radius:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;

/* Round top left corner */
-moz-border-radius-topleft :10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-left-radius: 10px;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Border-Radius in use.

Box-Shadow

Box-Shadow will apply a drop shadow to the box. It takes three lengths and a colour as its attributes, the lengths are as follows:

• The horizontal offset, positive means the shadow will be on the right, a negative offset will put the shadow on the left
• The vertical offset, a positive one means the shadow will be below the box, a negative one means the shadow will be above the box
• The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be

Use the following css to add a shadow:

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Box-Shaodw in use.

Text-Shadow

Text-Shadow will apply a drop shadow to text. It takes three lengths and a colour as its attributes, the lengths are as follows:

• The horizontal offset, positive means the shadow will be on the right, a negative offset will put the shadow on the left
• The vertical offset, a positive one means the shadow will be below the box, a negative one means the shadow will be above the box
• The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be

Use the following css to add a shadow:

text-shadow: 2px 2px 2px #333;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Text-Shaodw in use.

Word-Wrap

Word-wrap allows long words to be wrapped within a box, making the word flow onto the next line. It has two possible values, normal and break-word.

Using break-word you will be able to force long words to be spread across multiple lines.

Use the following css to add a shadow:

word-wrap:break-word;

This technique works in IE7, Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Word-Wrap in use.

Compatibility, Conclusion and Download

These techniques have been tested in IE7, Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, all on a windows platform. Please refer to each example as to which browsers they do work in. These are very useful techniques, and can save a lot of time, as they are much simpler than trying to reproduce the same results with images. All we need now is for Microsoft to pick up these techniques an include them in Internet Explorer, so that they can be used without needing to provide alternatives just for IE.

Any feedback or improvements are welcome.