Effects that You Can Make with Cascading Style Sheets - dummies

Effects that You Can Make with Cascading Style Sheets

By Lisa Lopuck

CSS3, the latest edition of Cascading Style Sheets, introduces advancements in design handling. Of these, some new capabilities that define color gradients, degrees of transparency, and even reflections are definitely worth checking out!

In the past, if you wanted a color gradient, you had to design bitmap images for the purpose. Now CSS allows you to fill containers with linear and radial gradients that make an even transition from one color to another, or from one color into several colors. You can also control how the gradient fills the container.

Most interesting is the fact that you can now use CSS gradients as image masks that incorporate alpha-channel transparency. By defining the image you’re using as a mask — and associating that image with an element or another image as part of the definition — you can make that element gradually fade out in appearance, revealing whatever background had been hidden underneath. This capability allows for some interesting layered effects in your website design.

To create a reflection (where the image appears to be mirrored off the surface below) using just CSS, you need to use a combination of transformation settings and containers, but the net effect is nonetheless a reflection effect. Essentially, you create two containers — one for the main image and one for the reflection. By applying transform effects to the reflection container that first turn the image upside down then squash its height and then add a transparency mask, you end up with a convincing reflection as shown in the following figure. The beauty is that, with this technique, you have one normal graphic with the option to include a reflection — a reflection that is dynamically configurable — all without the use of Photoshop.

[Credit: © Lopuck Watercolors]
Credit: © Lopuck Watercolors

CSS shadow effects

It’s now possible to use CSS to add drop shadows to elements — another very cool effect. Before CSS3, semi-transparent shadows were only possible with bitmap image, specifically using the PNG format that supports transparency.

Simply by adjusting the colors and the amount of offset and blur, you can create very different effects. Notice that in the case of the box-shadow (the third image in the following figure) it’s necessary to have two lines of code immediately following — one for WebKit and one for Moz. These are to support the Safari and Firefox browsers, respectively.

Using purely CSS, you can achieve various bitmap-like shadow effects on both text and box elements.
Using purely CSS, you can achieve various bitmap-like shadow effects on both text and box elements.

Rounded corners

The following figure shows an example of the new CSS3 border-radius property in action. By defining a value for this property — check out the last two lines of the CSS code, where the value is set to 10 pixels — you control how large the corner curve appears. Before the introduction of the border-radius property, rounded-corner effects were possible only through the use of bitmap graphics.

[Credit: © Zwartwit Media]
Credit: © Zwartwit Media

Animation effects

Using CSS3, now you can apply several cool 2D and 3D animation effects by using the transform property. This property contains a number of functions such as scale, rotate, skew, and perspective that you can define and combine to affect your animation in various ways. You can even define transition effects to control how the object transforms, and how long it lasts.

Transition effects can also be applied to normal links. For example, if normally you roll over a link to see a highlight, it highlights all at once. Using the properties called transition-property and transition-duration, you can make the highlight fade in slowly — and specify how many seconds it takes to do so.

As for 3D effects, if you’ve ever seen the iPhone Weather application that appears to “flip over” to allow you to configure your cities, you’re witnessing CSS3 effects in action. By using the perspective property and specifying values for different transform functions such as perspective, rotation, skew, and scale, you can get very creative with your user interface’s presentation.