Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Ofcourse, this is a great thing, since Firefox has a rock solid place as 2nd most popular web browser. More people will actually be able to see all the nifty stuff you'll create using CSS.

I recently came accross a CSS selector that was included in Firefox 4 (and is added to Webkit (nightly) as well), called the :any() selector. We'll take a look at what this selector does, and why you would want to use it.

Be aware that the :any() is not part of the CSS3 specification (yet), but since Webkit already implemented it, I'm pretty sure others will follow as well. Also, to make it work in Firefox, use the -moz- vendor prefix, resulting in :-moz-any (-webkit- vendor prefix for Webkit). So let's see what this :any() selector can do for you.

Today, we're going to give away three member accounts on UltimateDesignerToolkit. As you might have guessed by the name of the site, they have a huge collection of all kind of designer items in one place. Examples of these items are Photoshop brushes, vector files, PSD layouts, Photoshop actions and other design resources that may come in useful in your project.

Read the contest rules below to find out more about UltimateDesignerToolkit, and how you can enter this contest. Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.

Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.

With the help of some small HTML, nifty CSS and loads of jQuery, we're able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it's built.

You can easily change the script by changing some variables. It also features image preloading and keyboard navigation (try pressing the numeric keys). The background images have a width of 2000px, just to cover most of the currently used screen resolutions. Check out the demo what we're going to create!

  

The script uses the Templates and Easing jQuery plugins. Tested and working on Firefox, Safari and Chrome. I've added a reference video below to show how the page should look like. As always, comments are left on the source code to explain what it does.

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That's why I wanted to take it just a little step further and let the billboard show three images.

Take note this demo only works in Safari (tested on a Mac) and Safari for iOS (tested on a iPhone). I've made a reference video that you can see below in case you don't have those browsers.

  

I know the animation isn't fully perfect, and I'm not really sure if it's my piece of code, or the Webkit engine doesn't properly animate I expect it to. Anyhow, let's take a look under the hood and see how it works!

One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.

Shortly after I placed my article online, Chris Spooner wrote a very cool article called Super Cool CSS Flip Effect with Webkit Animation. It showed me some great other 3d techniques that can be achieved using pure CSS3.

Those two articles inspired me to create yet another very cool 3d CSS demo, that I like to call an Animated CSS3 helix using 3d transforms.

Simply go to the demo page and be amazed! I'm pretty sure you never thought something like that would be possible using pure CSS. Take note this demo only works in Safari (latest version). For those viewers that don't have that browser, I've added a video below.

  

For those of you who start digging in the source code directly, I'm warning you: You'll probably find one of the strangest HTML/CSS you've seen. This is purely created, just to achieve the desired effect. Now let's take a look under the hood and see how it works!