CSS3: Too Early or Just In Time?

by Shanon Suetos

When it comes to web development, upgrades in code don’t come around often. It has been nearly 10 years since HTML got a revamp, and now HTML5 is finally making headway. With HTML comes style sheets, and now CSS3 is getting as much hype as HTML5 itself. But don’t be fooled, CSS3 is not HTML5.

A quick history in CSS will tell you that CSS compliments what HTML already does—and with two new upgrades it keeps getting better and better. Like with most industries, the web design community is always trying to streamline processes along with making things a step ahead of the rest. CSS3 seems to do this, and can actually cut out a lot of if not all Flash—which can be time consuming to build.

Browser Compatibility

CSS3 is a double edge sword at the moment. It offers new and exciting features, but it also isn’t compatible on all browsers. Because it is in a “last call” phase, not all browsers are compatible. For now only webkit browsers (Safari and Chrome) along with FireFox and Opera are compatible.

Photo Galleries

Transitions are getting upgrades with CSS3 and there are numerous ways to make your photo galleries stand out. One popular way is to turn your photos into Polaroids. If you click here, you will see a great example, and also get a tutorial on how to implement this into your website.

If Polaroid images aren’t your style, you can create a pop up effect for your images using HTML5 and CSS3—eliminating both javascript and Flash. A demo of how this works is located here, although again it works best in Chrome and Safari.

Buttons

Web designers are going to be grateful for the ease of making buttons with CSS3. Before, if you wanted to have your buttons to have rounded corners for instance, you would have to create the image or use javascript. Instead, CSS3 allows you to create nice looking buttons with just two more lines of code in the style sheets.

If you aren’t an expert on CSS there are many generators out there to help you—even with CSS3. “This Button Maker shows you a live working version of the button you create, complete with :hover and :active states. It is done without attaching any JavaScript events to the button itself. So how is it done? I did it with a technique I ripped off from Doug Neiner who presented it (as small part of a totally different application) at jQConf.”

Animation

You can now use CSS3 to animate—again without using flash. One popular demo of this is located here, and if you are in a webkit browser you will see the demo best. Flash isn’t going anywhere for now, but it is nice to know web designers will be able to animate and do other great effects using another medium.

These are just a few of the MANY things CSS3 is capable of. It may be a bit too soon to start implementing them in your website with the limited browser coverage, but practice makes perfect. It is never too soon to at least getting familiar with the code.

Shannon Suetos is an expert writer time clock software on based in San Diego, California. She writes extensively for an online resource that provides expert advice on purchasing and outsourcing decisions for small business owners and entrepreneurs such as time card software at Resource Nation.