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!

This is it: The last day of 2010! Normally, the last post of the year on Marcofolio would be a "Best of the Best" round-up (see 2008 and 2009), but for this year, I wanted to look back at my own blog.

This was the year where I created only 32 article (the least I created in the past years), but I'm pretty sure all of them are true high quality articles (no imagedumps, list posts etc.). Most of them are web dev related, about jQuery, CSS3 or HTML5. I really hoped you liked reading the articles on Marcofolio.net for the last year!

I have nothing left to say except to wish you a safe and joyful new year's eve and I hope to see you back (with all your fingers) in 2011! Check out this Christmas/New years card from me and my girlfriend, wishing this to everybody in the world.

Now let's take a look back at Marcofolio over the past year.

Time for yet another jQuery quickie! These relatively simple jQuery tutorials will show you a simple, yet beautiful effect making use of jQuery. This way, you can learn and create something very cool at the same time.

A couple of days ago, I saw a commercial on TV showing some quotes from people displayed in boxes. I wanted to take that concept, and bring it to the web using my favorite JavaScript framework. Today, we'll learn how to create a smooth animated quote display for you to use!

Simply check out the demo to see what we're going to create. Download the source code to learn how it works, or read the tutorial for more explanation.

  

Sadly, fonts will render different in several browsers. I've tested this script (and made it working for) on Firefox, Chrome and Safari (even the iPhone displays it correct). Other browsers aren't tested, but the video below also shows how the animation should look like.

Ready to take a look at how this example works? Let's dive under the hood!

Not only Internet Explorer has it flaws when it comes to parsing/using the CSS file. Even though the Webkit engine is the best CSS engine out there (at the moment), I was still able to find a little bug while searching for a solution to a problem last week.

Although the bug is really small and you'll probably never need to use it in real life, I did want to give it a little attention (just in case you do want to solve this problem). I found this one since I wanted to create another Proof of Concept for an article here. Of course, I hope this problem could be solved in the next release of the engine.

In simple words, this bug occurs when combining the generic sibling selector (in CSS: ~) in combination with the hover event (in CSS: :hover). Dive into the example/source code to see how it looks like, and think about the effect you think it would produce.

  

Take note this is a webkit bug only: The example works just fine in Firefox, Opera (and yes - even in Internet Explorer!). It doesn't work in those browsers using webkit: Safari and Chrome. Now let's dive into the problem, and look at possible solutions for this bug.

It's pretty amazing at how fast people can learn certain technologies. A couple of months ago, I learned my friend and ex-classmate Sidney te Grotenhuis some (basic) jQuery. Last week, he contacted me to show off his latest creation: jPong. I was blown away.

By combining jQuery with a collision detection plugin, a line drawing plugin and some own scripting, he was able to create this game. Feel free to dig in the source code (comments were added) to see how it works. But for now, simply start the game and play.

As you might already see, this game is based on the popular Flash version called Curveball.

  

I want to thank Sidney a lot for sharing this great example with us. Take note this is just a simple proof of concept and not fully tested in any way. Now let's see if you can beat your browser at this neat little jQuery game! What highscore can you get?