Blog

More than just static page styles: The power of CSS3

September 2nd, 2011

When you think of CSS, many people think of basic site styling and component attributes. The spacing in your forms. The color and size of your fonts. Background and border colors. Round corners on your HTML objects. But in the latest CSS3 library, far more interesting and powerful tools await, ready for you to bring extra flair to your site without additional assistance from scripts like Flash and Javascript. In this blog entry, we’ll be looking in particular at CSS3′s new transitional animation capabilities.

Strengths and Limitations of CSS3 transitions:

With Webkit browsers still only holding approximately 25% of the market share in total, the amount of people that will be able to appreciate or experience the added benefit of advanced CSS on your site may be somewhat small in comparison to your overall traffic. However, given the ever increasing popularity of the Google Chrome browser, and Mozilla and Microsoft’s continual efforts to update their own browsers in modern web capabilities, we are on the cusp of having these properties more widely accepted across platforms, with greater unity in syntax. Either way, using these new CSS tools can help you stand out as a web developer/designer, and help showcase your abilities in constructing intriguing and visually pleasing interfaces on the web.

One of the greatest strengths of CSS3 transitions and animations, in a practical sense, however, lies in its capabilities on mobile platforms. Due to the processor-intensive nature of Flash on Android, and lack of support for it on Apple’s iOS, and the extra load time required for additional scripts like Javascript and jQuery, using advanced CSS3 on your mobile site/application, can greatly improve your visitors user experience. This is mostly thanks to making use of the integrated support within the smartphone’s browsers (at least with most recent mobile OS releases), and not requiring external scripts to be loaded, which can not only slow site performance, but can be an issue if the site is being accessed on a device with less than optimal cellular reception.

Using a simple transition:

Note: In this example we will be using the ‘-webkit’ properties for our class syntax. While Opera and Mozilla have their own special prefixes for these properties ( ‘-o’ and ‘-moz’ respectively), Chrome and Safari have historically contained more complete libraries, in terms of advanced CSS support, so we’ll stick with them for this entry.

Let’s say you’re building a form, and for the sake of user friendliness and overall clarity, you’ve added a nice box-shadow focus effect to your text areas using CSS like so:


#myForm textarea {
-webkit-box-shadow:0px 0px 8px #666666, inset 0px 0px 3px #666666;
}

#myForm textarea:focus {
-webkit-box-shadow:0px 0px 15px #FFFFFF, inset 0px 0px 10px #FFFFFF;
}

While this will give you a nice soft glowing effect when the user goes to click the object, the transition into the new CSS state still winds up being very rigid and abrupt. Now, traditionally if you want to dress up the effect a bit, you can add some jQuery to replace the focus state with new class that can be eased into, giving a smooth animated effect. However, using CSS3, we can skip that entirely and get the same result with one simple line of CSS code, using the ‘-webkit-transition-duration:’ property, shown here:

#myForm textarea {
-webkit-box-shadow:0px 0px 8px #666666, inset 0px 0px 3px #666666;
-webkit-transition-duration:0.3s;
}
#myForm textarea:focus {
-webkit-box-shadow:0px 0px 15px #FFFFFF, inset 0px 0px 10px #FFFFFF;
}

Now, with this new property added, your browser will now transition to the new pseudo-class with a nicely eased animation, based on the values within your CSS declaration. With just this one added bit of code, you can dress up everything from :hover effects, :active objects states, and most other pseudo-classes. Impressive results, for so little code written.

Note: These transitional effects do not work on CSS-generated background gradients.

It’s exciting to see the ever-expanding capabilities of the web’s basic languages in terms of performance and control over content presentation and management. With the continuing efforts of browser and web developers everywhere, we can all look forward to a faster, more efficient and more enjoyable web experience.