Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.

There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We'll simply change some colours for the user!

Make sure to check out the demo to view what we're trying to accomplish.

  

The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Now, let's take a look at how you can create something like this yourself!

Don't you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we're trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQuery

This technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we can really make it look like the movies.

  

I'll leave out the CSS in this tutorial, since not much really important stuff is going on there. This example works best in Firefox - Although it works in Safari and Opera too, the letter-spacing CSS property gets rounded up (or down) and you won't be able to see the full effect. Also, you'll need to imagine the sound effects yourself.

The readers (or regular visitors) of Marcofolio.net, must already know that I'm a true programmer. Although this is a fact, I do love to kick up Photoshop some times and create something outstanding. For that reason, I'm also subscribed to the Dutch version of Advanced Photoshop - a great Photoshop magazine. The magazine shares some great Photoshop techniques, as wel as good written tutorials and inspirational articles.

Last year, I placed an article online called "Advanced Photoshop Covers (NL #01 - #10)". As you could have expect, this is part 2 of the Dutch Advanced Photoshop Covers that are so inspirational, that you'll surely get your design fluids flowing.

The pictures are taken by me and I apologize for any "reflections" on the magazine. If you like one, I recommend you to check out the portfolio website from the artist. Be ready to get inspired!

Last week, I had the privilege to have a chat with Chris Coyier (nice alliteration). If you've never heard from this guy living in Chicago (Illinois), I'm pretty sure you've seen his website one ore more times: CSS-Tricks. On his site, he shares great information about CSS, jQuery and more webdevelopment techniques.

During this conversation, Chris shared some great information that could be interested for everybody that's working in the webdesign field. You can read the whole chat here.

Now, lets sit down, take a drink and chat with this creative man behind the scenes of CSS-Tricks.

There is a problem on the web. Displaying actual programming code takes away a lot of space of the webpage (especially the longer ones). You can split up the code in several parts, but that's really hard to read for programmers. You can leave it "as it is" and users would have to scroll a lot if they're not interested in the code itself. And scrollbars in code-examples - that's just horrible (and yes - that's what I have on this website).

I created a solution for this problem and call it the jQuery Code Expander. It does exactly what you think it does - Expand any code you want to place online using jQuery.

But, before you can expand anything, it has to be cropped. That's where the CSS kicks in. It's like a combination of using scrollbars and fully showing the code!

  

This script only changes those elements that needs to be expanded and doesn't touch those who don't. An additional overlay image is added, just to show the user that it can expand the code example. Check out the demo and read below what the secret of this technique is.