CSS3 (combined with the power of HTML5) is rapidly being supported by all the major browsers (read - anything except Internet Explorer), so I thought now would be a good time to see some of the cool CSS effects we can achieve using the power of your the browser and a little CSS code. You should be able to see all the effects demonstrated in this article if you're using the latest Chrome, Safari or Firefox browser.

First - What Is CSS?

If you're reading this article because you're intrigued but have no idea what CSS means, let's me explain quickly. CSS is the coding language used to decorate webpages. It stands for Cascading Style Sheet, and basically just adds style and flair to a site. Websites are certainly readable without their CSS, but they are hideous just like all websites were back in 1995. While HTML files describe the structure and textual content of a page, the CSS makes them display in the way the designer intended, and determine everything from page layout, text size and colours, and now a number of fancy effects with the introduction of CSS3.

In the past, achieving the same kind of effects as the ones described in this article would have meant downloading bulky CSS or even bigger graphics. Now, CSS can just describe to your browser how it would like the page to look, and the browser will handle the processing. It like me handing you the plans to build your own house instead of selling you the whole house - it's significantly cheaper!

Rounded Corners

The Internet has gradually been getting 'roundier', but now this is solidified in CSS3. Take a look at the box surrounding this paragraph. It isn't an image - try right clicking on it to see. Pure CSS!

The code for rounded corners is really easy:

.box_round {

-moz-border-radius: 20px; /* FF1+ */

-webkit-border-radius: 20px; /* Saf3-4, iOS 1+, Android 1.5+ */

border-radius: 20px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

}

 

Text Shadow

Text can sometimes look really harsh on its own, but a simple little shadow really helps things. Check out the shadow I've applied to this paragraph.

Here's the code for some text shadows:

.box_textshadow {

text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */

}

Gradients

No more flat colors or background gradient images, now you can create a cool gradient using CSS only. Unfortunately, you do need a few lines due to current incompatibility issues between browsers, but you can use the tool that I will describe later to generate these automatically.

Here's the code for CSS gradients:

.box_gradient {

background-color: #3f9fe3;

background-image: -moz-linear-gradient(top, #3f9fe3, #white); /* FF3.6 */

background:-moz-linear-gradient(top, #1E5799 0%, #207cca 26%, #2989D8 39%, #FFFFFF 100%); /* firefox */

background-image: -ms-linear-gradient(top, #3f9fe3, #white); /* IE10 */

background-image: -o-linear-gradient(top, #3f9fe3, #white); /* Opera 11.10+ */

background-image: -webkit-gradient(linear, left top, left bottom, from(#3f9fe3), to(#white)); /* Saf4+, Chrome */

background-image: -webkit-linear-gradient(top, #3f9fe3, #white); /* Chrome 10+, Saf5.1+ */

background-image: linear-gradient(top, #3f9fe3, #white);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3f9fe3', EndColorStr='#white'); /* IE6–IE9 */

}

Rotation

It's difficult to imagine a use for this in terms of text, but it can add some nice design elements when using pictures, for example. Again, notice that even though this paragraph has been rotated, you can still select and interact with it as it remains regular text.

Here the code to rotate something:

.box_rotate {

-moz-transform: rotate(7.5deg); /* FF3.5+ */

-o-transform: rotate(7.5deg); /* Opera 10.5 */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

-ms-transform: rotate(7.5deg); /* IE9 */

transform: rotate(7.5deg);

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */

M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');

zoom: 1;

}

#hoverchange {
-moz-transition: all 2s ease-out; /* FF4+ */
-o-transition: all 2s ease-out ; /* Opera 10.5+ */
-webkit-transition: all 2s ease-out ; /* Saf3.2+, Chrome */
-ms-transition: all 2s ease-out ; /* IE10? */
transition: all 2s ease-out ;
}
#hoverchange :hover { background-color:#3f9fe3;
-webkit-transform: rotate(7.5deg);
-moz-transition: all 2s ease-out; /* FF4+ */
-o-transition: all 2s ease-out; /* Opera 10.5+ */
-webkit-transition: all 2s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 2s ease-out; /* IE10? */
transition: all 2s ease-out; }

Animation

Oh yes, I saved the best 'till last. CSS3 introduces various forms of animation for any number of the cool CSS effects described. On this paragraph, I've defined the transition property as listed below, as well as a simple background color and rotation when you hover over it. If you aren't already, hover over this paragraph of text now to see the effect in action. You can animate pretty much anything!

You'll need the transition code like this to any element you want to change. You'll also need to use some pseudo CSS classes (such as :hover to change any properties that you want animating, such as color, size or rotation)

.box_transition {

-moz-transition: all 0.5s ease-out; /* FF4+ */

-o-transition: all 0.5s ease-out; /* Opera 10.5+ */

-webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome */

-ms-transition: all 0.5s ease-out; /* IE10? */

transition: all 0.5s ease-out;

}

Cross Browser Incompatibilities

Though most modern browsers do support all of CSS3 in some ways, some still require some slightly different code or hacks to make it work with their particular implementation of the standard. In the code above for instance, you'll see many instances of -moz- or -webkit- preceeding some of the CSS properties, which relate to either Mozilla based or Webkit based browsers. Writing these extra lines can be a pain though, so check out the css3 generator to write them for you.

Conclusion

The web is going to get a whole lot more exciting with the new CSS3 and HTML5 extensions. Granted, we are going to see another spurt of flashing text and a high ratio of whizz-bang to real content (just as we did when animated GIFs were first "discovered") but in the long run we will learn how to use the tools of CSS3 to make more interesting web interfaces. And hey, you can always turn it all off!

If you're a designer or web developer yourself, just remember that CSS3 should never be the only option. If your site won't function without CSS3, you haven't used it correctly. CSS should be used to enhance the experience, not program functionality.