Three New Tricks in CSS3

CSS3 is still in the works, but several working drafts have been released to get a feel of how this will change the way we now view CSS. Shown below is a list of CSS3 properties that will surely be used to enhance website looks.

Multiple Background Images

Since everyone has renegaded tables from modern-day design, multiple background images have been hard to replicate. To work around this inconvenience, web-designers have long been using a trick called “tag-backing” to simulate this feature.

Let's say that you have a background that can't be made up of just one image put in the body tag as the main background. You have a high-resolution photo, a gradient underneath it and a plain color for the rest of the website (if it would need to scroll down).

Usually, using tag-backing, you would put the color as the background for the HTML tag, the gradient in the body tag, and, finally, the high-resolution photo as a background for a div tag. Well, no more of this.

Using the new, improved “background-image” property in CSS3, background images can be simply lain on top of each other inside a simple CSS line. Every image is declared as in CSS2, separated by comma, the first image being on top of the next.



Text Shadowing

Old-school designers, back in the day when Flash and JavaScript were just simple drafts and sIFR was something in the domain of science-fiction, remember pioneering a technique where a text with special effects would have been rendered in image-editing software and then exported to an image format like PNG, GIF or JPEG.

The resulted image was included in the website using an img tag. This practice is still in usage today in many places where font styling is needed.

The “text-shadow” property will add a blurred shadow effect to any text. Its usage is a bit complicated for an untrained eye. Its syntax is the following:



The first two values control the direction the shadow drops. The 1px value says that the shadow will drop 1 pixel to the right and controls the horizontal plane. For negative values, the shadow will drop to the left.

The second value controls the vertical plane and, for positive values, will drop the shadow down, for negative values, the shadow will go up.

The third value (ex. 3px) will control the blur effect. This example will have a 3-pixel blur.

The last value is, as expected, the color of the shadow. No science in this one.

Non-Standard Web Fonts

First implemented in Internet Explorer 5, the @font-face rule will be a standard in the new CSS3. The syntax is as follows.



This will make the user's browser access the given URL and download the given font to be employed inside that page. Currently, the CSS3 standard will support the OTF, TTF and EOT font types.

If a weighted or italic version of the font is needed, that form of the font-family must be included in the rule, as well as in a separate declaration, as follows:



Whenever the font is needed, it can be called as normal, using the declared font-family name.