Now that CSS3 is up and running, designers are taking advantage of its new features. CSS3 is already being used to style websites, although it is not yet fully standardized. CSS3 has been in the works for years, but was officially released in November of last year.

CSS1 was first released in 1996 after 2 years of tweaking. Back then it was referred to as CHSS (Cascading HTML Style Sheet). Creators, Hakon Wium Lie and Bert Bos, dropped the ‘H’ before its release since CSS can be used to style other different markup languages. Just two short years later, CSS2 was released. CSS2 was the standard until CSS2.1 was released in 2004, six years later. Right after its release, it was immediately in revision stages from 2005-2007. After CSS2.1 needed to be pulled and reworked, creators of CSS3 took the time to perfect their work.

Now that CSS3 is debugged and being used all over the worldwide web, work has already started on CSS4, the first drafts of which began in 2009. CSS3 has significantly simplified and quickened the process of designing websites. We used to rely on images for buttons and navigational bars, but now they can be written in plain text. This progression is not only easier to implement, but the markup is better seen by search engines, thus giving your site a higher rank when someone searches for you.

Some of the new features include: rounded corners (border-radius), drop shadows (box-shadow), and my personal favorite, gradient and transparent fills. Instead of RGB colors, CSS3 now has RGBA colors. Red, Green, Blue, and Alpha, meaning alpha-opacity. This now gives your element a true opacity without the use of an image.

CSS3 also has some great, new text effects. A designer is able to create and style their own fonts for the web. This is such a huge leap for the design of a site. You can now upload your own non-standard font and add a text-shadow or an emboss in no time!

The greatness of CSS3 continues to expand with its ability to position and resize in a more attractive way. CSS3 handles the styling of a web layout whether you are viewing a site on a large computer screen, a laptop, and even a mobile device without breaking. Awesome, right?

I am also a huge fan of the easy use of multiple backgrounds, border-images, and of course, transitions and transformations. A designer can now can simply and effectively animate an element without JavaScript. Amazing.

So, with all of these new and wonderful features… what’s the catch? Three words: cross browser compatibility. This is impossible when using the new properties of CSS3. Which browsers function with CSS3, you ask?

Firefox? Check.
Chrome? All good.
Safari? Locked and loaded.
Opera? Good to go.
IE? Wonk wonk…

The new styles in CSS3 will break in IE6/IE7. But that’s no excuse to disregard these amazing new features! So, have no fear! There is a solution: conditional comments. Just make sure you strategize and have alternative styles on elements that break in other browsers and your styles will be a success.

All in all, I am very excited to have the use of CSS3’s styles, and I am sure I am not alone when I say that I am already eagerly anticipating the arrival of new features in CSS4!

Super Cool Example

Talk about us!