Friday, March 29, 2024

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

Although developers have been busy discussing HTML5, there are a lot of cool new features coming in CSS 3.0. We will discuss some of the more exciting features in this article. One thing to keep in mind is that CSS 3.0 is still evolving. This means it could change.

Almost all of these features have been implemented by most browsers; it does not mean it will work across all browsers the same. Most browsers support some of the CSS 3.0 features. Which ones they support is not consistent. With that said, you do not want to rely on these features when designing your web site, but you can use them to enhance the look and feel.

Colors

There are several new ways to set color properties on HTML elements. You will be able to use HSL (hue, saturation, lightness), HSLa (hue, saturation, lightness, alpha), RGBa (red, green, blue, alpha) and opacity.

Opacity

	Syntax: opacity: <value>

Opacity is the transparency of the color. The value can be 0.0 to 1.0, the lower the value the more the transparency. This can be applied to any HTML element including images. As you can see in figure 1, we have two images. One is the full color image, and the other is the image with opacity set to .1.

figure1
Figure 1

HSL, HSLa, and RGBa

	Syntax: [color property to set]: hsl(<value>, <value>, <value>)
	Syntax: [color property to set]: hsla(<value>, <value>, <value>, <value>)
	Syntax: [color property to set]: rgba(<value>, <value>, <value>, <value>)

HSL and HSLa allow for a wider range of colors and tones. The H or hue is a degree on the color wheel from 0 to 360. An example would be, 0/360 is red, 120 is green, and 240 is blue, see figure 2. The S or saturation and L or lightness are percentage values. The ranges are 0% to 100%.

figure2
Figure 2

So what does the "a" or alpha mean? The alpha setting is the opacity of the color or the alpha channel. Instead of specifying the color and then the opacity value, you can do it all at once.

Borders

CSS 3.0 gives us many new options for the borders around HTML elements. There are new color options to control the color better, a new option to allow you to specify an image to be used for a border, a new shadow option to add a drop-shadow, and of course, rounded corners.

Border-radius

	CSS 3.0 Spec
	Syntax: border-top-right-radius: <value>
	Syntax: border-bottom-right-radius: <value>
	Syntax: border-top-left-radius: <value>
	Syntax: border-bottom-left-radius: <value>
	Syntax: border-radius: <value> | <top-left value> <top-right value> <bottom-right value> <bottom-left value>

	Firefox Implementation
	Syntax: -moz-border-radius-topright: <value>
	Syntax: -moz-border-radius-bottomright: <value>
	Syntax: -moz-border-radius-bottomleft: <value>
	Syntax: -moz-border-radius-topleft: <value>
	Syntax: -moz-border-radius: <value> | <top-left value> <top-right value> <bottom-right value> <bottom-left value>

	Safari/Webkit Implementation
	Syntax: -webkit-border-top-right-radius: <value>
	Syntax: -webkit-border-bottom-right-radius: <value>
	Syntax: -webkit-border-top-left-radius: <value>
	Syntax: -webkit-border-bottom-left-radius: <value>
	Syntax: -webkit-border-radius: <value> | <top-left value> <top-right value> <bottom-right value> <bottom-left value>

We can now have rounded corners for our borders. Rounded corners are not support in Internet Explorer. Firefox and Safari/Webkit both support rounded corners, but only if you use special property values. The CSS 3.0 properties are not finalized, but the effects can still be accomplished. This article is not going to go into great detail on some of the extra properties added by Mozilla or special effects in Webkit. In figure 3 there are a few examples of rounded corners.

figure3
Figure 3

Box-shadow

	CSS 3.0 Spec
	Syntax: box-shadow: <horizontal offset value> <vertical offset value> <blur radius> <color>

	Firefox Implementation
	Syntax: -moz-box-shadow: <horizontal offset value> <vertical offset value> <blur radius> <color>

	Safari/Webkit Implementation
	Syntax: -webkit-box-shadow: <horizontal offset value> <vertical offset value> <blur radius> <color>

Box-shadow allows you to place a shadow under HTML elements. It takes 3 length values and a color value. The horizontal and vertical values represent the offset of the shadow. These values can be either positive or negative. Positive horizontal values move the shadow to the right and negative values move it to the left. Positive vertical values move the shadow down and negative values move the shadow up. The blur radius sets how much the shadow will blur at the edges. A setting of 0 will have no blur. The last value is the shadows color value. This can be set to any RGB color value. Figure 4 shows examples of the box-shadow.

figure4
Figure 4

Border-color

	CSS 3.0 Spec
	Syntax: border-top-color: <color> <color> <color> <etc.>
	Syntax: border-bottom-color: <color> <color> <color> <etc.>
	Syntax: border-left-color: <color> <color> <color> <etc.>
	Syntax: border-right-color: <color> <color> <color> <etc.>
	Syntax: border-color: <color> <color> <color> <etc.>

	Firefox Implementation
	Syntax: -moz-border-top-colors: <color> <color> <color> <etc.>
	Syntax: -moz-border-bottom-colors: <color> <color> <color> <etc.>
	Syntax: -moz-border-left-colors: <color> <color> <color> <etc.>
	Syntax: -moz-border-right-colors: <color> <color> <color> <etc.>

This author knows you can specify border colors now is CSS and even have different colors for each side, but this is a different way to have multicolored borders. Basically, this allows you to set each pixel line a different color. You will notice in the syntax that there are multiple color values. The way this works is that each color value is for a pixel line. If you had a 10 pixel border, you can specify 10 different colors for each pixel line by using 10 color values. You can have an almost unlimited number of values, but you must have at least one value. Also, if you specify a 20 pixel border, but only use 10 values, the last value will fill the rest of the pixels.

figure5
Figure 5

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured