What's Coming in CSS 3.0: A Web Developer's Perspective

By Vincent Wright


	CSS 3.0 Spec
	Syntax: border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat>

	Firefox Implementation
	Syntax: -moz-border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat>

	Safari/Webkit Implementation
	Syntax: -webkit-border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat>

Besides specifying colors, you can use an image for the border. The above syntax is the shorthand property. There are five properties to set. There is a lot of information to cover on these and is out of the scope of this article.

Figure 6


There are a few new options to handle text and the way text is displayed.


	Syntax: word-wrap: break-word|normal

Have you ever created a box that had a width set, but was a little too small for a long word? You can use the word-wrap property to wrap really long words. In figure 7, you will see the text without word-wrap and the text with it.

Figure 7


	Syntax: text-shadow: <horizontal offset value> <vertical offset value> <blur radius> <color>

Text-shadow works similar to the box-shadow property discussed earlier. This property creates a shadow under the text specified. You can even create multiple shadows on the text. You can even specify multiple shadows giving the text a glow or outline. This works in almost all browsers except IE.

Figure 8


There are not a lot of new features proposed for backgrounds properties. This biggest one is background layering. Several of the background properties have been updated to allow for multiple values to support layering.

Background Layering

CSS 3.0 allows for multiple background layers. By separating the background properties with commas, you can specify several layers. The size, position, and tiling are set using comma separated values. In figure 9, you will see that we have 3 images set for the background, and then the "position" is set for each image.

	background-image: url(sky.png), url(sun.png), url(kite.png);
	background-position: top left, top right, center center;


	CSS 3.0 Spec
	Syntax: background-origin: border-box|padding-box|content-box

	Firefox Implementation
	Syntax: -moz-background-origin: border|padding|content

	Safari/Webkit Implementation
	Syntax: -webkit-background-origin: border|padding|content

The background-origin property determines the position of the background. There are three values, border-box, padding-box, and content-box. These values correspond to the box models, border, padding, and content areas. The position is set relative to the value. This means that if you set it to padding-box, the background position will be relative to the box's padding.


	CSS 3.0 Spec
	Syntax: background-clip: border-box|padding-box

	Firefox Implementation
	Syntax: -moz-background-clip: border|padding

	Safari/Webkit Implementation
	Syntax: -webkit-background-clip: border|padding

The background-clip property determines the background painting area. There are two values, padding-box and border-box. As with the background-origin property, the padding-box and the border-box correspond to the box models padding and border areas. Figure 9 gives an example of the background-clip and background-origin properties.

Figure 9


We discussed a lot of new proposals for CSS 3.0. Keep in mind this article was an introduction. If you want more information, you can check out the W3C for more information (http://www.w3.org/Style/CSS/). Even though several browsers have implemented these features, there is no guarantee these will be in the final specifications.

Page 2 of 2

Previous Page
1 2

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date