As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.

  

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the -webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.

With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.

Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

This tutorial takes on the following CSS(3) properties:

• rgba
• opacity
• text-shadow
• pseudo selectors
• rounded corners
• gradients
• box-shadow

  

As you could expect, this demo only works in browsers that support the new CSS3 features. This code fully works in Safari / Firefox 3.6, but hasn't been tested in other browsers. Now let's see how you can create this kind of sweet menu yourself!

The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).

As a reminder, here's how a default ordered list and a unordered list look like:

And check out the demo to see what we're going to create with it.

  

Looks much better, doesn't it? And you get all that, just by adding a couple of sweet CSS stuff. Want to know how? Here we go!

Today, I'll be showing you a neat little CSS trick to Debug your HTML and CSS. Take note that this will not be actual debugging, but it can help you find the element depth on a web page. Also, when you didn't properly close a tag, this piece of code will expose it for you.

Simply check out the demo to view what we're going to create! At first, the demo looks like a regular web page. But when you start hovering the elements, you'll be able to see the HTML structure (in depth) of the HTML page.

  

There are just a couple of lines of CSS to get this effect! Check out how (or view the source) you can create this yourself.

Links (or anchor tags) are really important in webdesign/development. With all default settings (Both in CSS and the webbrowser), a link does look pretty ugly: A blue, underlined text (and purple when you visited that website). I'm sure you've seen these colours before.

Luckily, CSS helps a lot. By changing the color, :hover and :visited you can easily make your links a little bit more fancy. Janko has written an excellent post how you can improve your links even more.

Here's a simple little CSS technique that could be really useful in your next webdesign/webdevelopment process when adding links to a HTML page. Too many links on a page can be really confusing. Some links are just more important than others: They're the one that really need the desired attention. Other links (that are more common, like links to your Twitter page or RSS feed) should not be so "special".

That's exactly what we're going to do today: Hide those unimportant links and unhide (show) them while hovering its parent. We'll achieve this using CSS.

Achieving this technique isn't really hard and is more like a "small trick". That doesn't mean that it isn't useful: With this small piece of CSS, you can add a lot more rest to your website, since not so many links get loads of attention: Only when hovering the parent tag.

  

Internet Explorer 6 is a real game stopper when it comes to CSS. I'm also giving a neat little jQuery solution to make this nice technique cross-browser compatible.