Although I didn't like CSS animations at first, the more I work with it, the more I do like the way it's implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons have a low opacity.

I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.

The example works with all -webkit based browsers (Safari and Chrome), but also in Firefox 4. I've included a jQuery version as well, to be used as a form of "backward compatibility". You can also see how the same effect can be achieved using CSS and jQuery.

  

Although the code and effect is very minimal, it'll give your website a very professional look. Let's dive into the code to see how you can implement something like this on your own website. Take not this effect can be applied to more buttons as well, not only social media icons.

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I'm proud to release the animated wicked CSS3 3d bar chart.

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don't create a "stacked" one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

One of the neatest things of this example (in my opinion), is that it uses the exact same HTML (except for the title) as the original article (wicked CSS3 3d bar chart). It's a great example to show what you can do with flexible CSS; You can create a totally different page with the same HTML and using only a different style sheet file.

  

Take note that this example only works in -webkit based browsers (Safari and Chrome), because those are the browsers that currently only support CSS3 animation (The next version of Firefox will support animations too). So, once again, this example is just a sneak peak into some awesome stuff CSS3 can do for us.

More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it's pretty cool to get a sneak peak on what the future will hold for us.

While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.

The only images that are used in this example, were taken from the Superpack icon pack and only show the Apple icons. Everything else you see in this demo, is created using pure CSS3.

  

This example only works in the latest versions of Firefox, Chrome, Safari and Opera. Since Internet Explorer still doesn't fully support CSS3, this example looks a bit weird in IE. So, for now, this is just another sneak peak into the future. Let's check out how you can create this!

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?

At that point, I started digging through the Safari Reference Library, where I eventually found the Safari CSS Visual Effects Guide: Transforms page. This page describes a CSS property I've never seen before: -webkit-perspective.

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

Simply open up the demo page and hover the movie poster elements and be amazed. As you could have expect, this technique will only work on -webkit based browsers (Latest version of Safari and probably Chrome too). Even Safari on the iPhone displays the 3d effect, but not the animations.

  

For those who don't have a webkit browser, I've added a small video to this post to see the demo in action. This really opens up the possibilities and shows the strength of CSS3!

A couple of days ago, Mozilla released their newest version of their ever popular browser: Firefox. It was in beta before, but now version 3.6 can be officially downloaded. This version of the browser brings us a couple of improvements on several aspects, like using Personas (themes), improved (JavaScript) performance and an extended version of the CSS engine compared to the 3.5 release. Today, we're going to look at a couple of the new CSS3 properties that are added to Firefox 3.6.

In this article, we'll be looking at the following properties that are now supported by Firefox 3.6: pointer-events, Using gradients and Multiple backgrounds.

  

Please note that this article only aims at Firefox 3.6, using the -moz CSS prefix. Therefore, not all techniques will be visible when using any other browser (or older versions of Firefox). So let's see what the latest version of this browser has added to his CSS arsenal.