Noupe

20+ Wicked Proof of Concepts for Better use of jQuery/CSS

The web is a perfect playground for lots of creative designers and developers. Static HTML is just boring and these days the user wants to see some more eye candy from/on the web. By using and/or combining awesome web techniques like JavaScript (and of course, jQuery), CSS(3) and Flash (or Adobe Flex) this kind of interaction can be achieved.

Since "the sky is the limit" with these techniques, the programmers can get really creative and innovative. Some really like to take it to the next level and want to show off their use of the technique, even if it doesn’t have any practical use. These Proof of Concepts are just created because they CAN. Most of them are just really for fun or just beautiful to watch.

These PoC’s (or experiments) show off some serious power and potential, but don’t have any real practical use (yet). They’re insanely cool to watch, but really seek some better use.

Blurry Background Effect

Although not a real experiment, Chris Coyier shows the use of one often forgotten CSS trick using background-attachment. When checking the demo and resizing the browser, a blurry effect is added by using two images. Simple, yet effective and this one could actually be implemented more. Sadly, I haven’t seen it anywhere (yet).

3d Monster

No: It’s not a 3d render created with fancy software that you see below. It is an actual JavaScript "monster". This wicked Javascript experiment really shows some potential of a functional 3d engine. Simply check out the demo and be amazed. The monster is growing, rotating, resizing en you have the power to have influence on it.

BallDroppings

BallDroppings is an addicting and noisy play-toy. It can also be seen as an emergence game. I first met this program while browsing some cool Mac Apps, but the JavaScript version works just as well. Balls fall from the top of the screen and bounce off the lines you are drawing with the mouse. They play a melodic sound when they bounce of the lines. Useless, yet very addictive and fun.

BoingPic

You got to love these useless JavaScript experiments. This one, from Kelvin Luck, allows you to load an image and split it to pieces. The pieces move away when hovering with your mouse, as if they are afraid. Yet another fun experiment.

BrowserBall

This JavaScript experiment has the tagline Possible More Cool Than You Think It Will Be. When I first stumbled on that page, I really didn’t know what to expect. After launching the project and creating child windows, I was absolutely stunned. This experiment allows the user to throw a ball across several windows! I’m not sure if this will ever become useful in the future, but it sure is an awesome demonstration of some JavaScript power.

BrowserTalk

Just like BrowserBall, this JavaScript experiment manipulates the windows of your webbrowser. This proof of concept is really cool, since it is a bit more interactive. First, you’ll need to enable your microphone and grant access to the app. Launch the app, speak and (or let others) be amazed.

Clock with CSS3 and jQuery

Toby Pitman saw a real good experimental use of the CSS3 rotate property. By combining this CSS3 property with some great jQuery, he managed to create a fully working old school clock in your webbrowser. Now that’s something really creative.

CSS Puzzle

It’s amazing wot CSS can do. This example of a CSS Puzzle really shows that. Walk through the maze with your mouse and be amazed. Not by how difficult the maze is, but just by keeping in mind this example is fully written with CSS without a single line of JavaScript.

DragCaptcha

This example is actually more than a regular proof of concept. This jQuery plugin could really be used. DragCaptcha is created to drag a specified icon on a certain spot to determine if the visitor is an actual human. This fun experiment is not really userfriendly (when does CAPTCHA ever become userfriendly?), but it still shows an amazing technique.

CSS Decorative Gallery

Yet another CSS Proof of Concept that really could be used in the wild. Nick La shows a simple, yet effective technique to decorate an image gallery. This trick, using only CSS and some images, could make any image gallery outstanding.

jQuery Gestures

With the coming of the iPhone and the rise of Mac OS, gestures have really become part of our lives. This example shows an image gallery that fully works on the gestures that you make with your mouse. You can even download this experiment and implement it on your own website! Sadly, this experiment isn’t that useful, still it does demonstrates an awesome technique.

CSS Gradient Text Effect

Check out this sweet little CSS trick from WebDesignerWall. Creating images from your text, just to achieve a nice gradient, isn’t very search friendly. Also, the user isn’t able to select the text. This simple proof of concept shows a way how you can change your normal headings into some fancy gradient headings. If you don’t like gradients, there also is a Grunge effect of this technique.

Simulate Gravity with jQuery

With the use of the jQuery easing methods, Gaya Kessler created a sweet Proof of Concept to simulate some actualy gravity in your webbrowser. Cut the strings and see the blocks fall down, bouncing up and down untill they stop. As you could have expect, this has no practical use (yet?), but it really adds some fun to your website.

CSS3 Hidden Messages

Craig Wilson shows an amazingly simple technique using the CSS3 selection property to hide messages on your webpage. Just read the article, check out the demo and select some text. You’ll clearly be able to see the hidden message; A great way to add sumliminal messages to your site.

CSS Image Text Wrap

This is one technique that I actually don’t really like. Not because of the crazy code you would have to write to achieve it, but just because it doesn’t look that fancy. With CSS Image Text Wrap, you can wrap your text around an image, giving the user the feeling that it’s created outside the box model. To wrap your text around an image, simply think outside the box!

jParallax

I absolutely love the parallax effect, it just gives the browser a whole new dimension. jParallax, a jQuery plugin, allows you to create this effect and act on mousemovement. Althouh some websites make use of this technique, it could be used in more ways. If you’re a MooTools lover, there also is a Mootools version: mParallax.

The Leopard Desktop

What? Placing an OS inside your webbrowser? What’s the use of that? None (just like creating the iPhone for your browser is useless fun)! It just shows the power of jQuery and brings some beauty of the OS to your browser. Harley did a great job converting a big part of the Leopard Desktop to a webpage, just to show that he can. Some parts might be useful, most parts of the tutorial are just for fun.

CSS3 3d Cubes

Did you ever thought you could create an actual 3D cube using only CSS? Paul Hayes managed to create this effect using the CSS3 transform properties. Combined with the transition property, these cubes can move too: All without the help of any JavaScript. These kind of experiments could give the web a whole new dimension.

Illusion using the Parallax effect

A great example using the CSS parallax effect to create an awesome illusion. You would simply have to check out the demo and be amazed. You can also learn how to create such an effect of your own to use in any of your future projects. There are no real practical uses that I can think of, still it’s pretty cool to see.

CSS3 Polaroid Photo Viewer

Another creative CSS3 and jQuery experiment. Although pretty cool to use when the CSS3 options aren’t enabled, the real fun of this application is the rotation of the polaroids. It simply gives you more feel, as if you’re really tossing those pictures around. Combined with a neat look, this example could be used when CSS3 will be more of a standard. For now, this is a real cool proof of concept.

Animated Cartoon Robot

The article from Anthony Calzadilla starts with Why?. Like I said in the start of this article, the answer is: Just because it can! Check out this cute little robot moving and bouncing on your script, mainly using jQuery. His detailed tutorial even explains how he created the little fella.

CSS Secret Message by scrolling

Chris Coyier once again makes the name of his website – CSS-Tricks – proud. Another kind of Secret Message, but now the user only sees the message when scrolling down. Very easy to implement and use, but not really userfriendly. Still once again showing some unique uses of CSS.

BONUS: Facebook Lens Flare

I learned this little trick from Jacob Cass. Click on the background of the Facebook website and press the following: Up, Up, Down, Down, Left, Right, Left, Right, b, a, enter, click. Check it out: An awesome lens flare! The combination of pressing the keys is the Konami Code. Useless? Kinda. Fun? Absolutely.

Do you know any proof of concepts out there that are really awesome, but aren’t on the list? Please share it with us!

Author: Marco Kuiper

Marco Kuiper is just another creative design geek that loves PHP, CSS and jQuery and is always looking for innovative things. He’s also the founder of Marcofolio.net: His blog and personal playground where he shares all kinds of stuff. If you’d like to connect with him, you can follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

Tags: CSS, CSS3, jQuery

This entry was posted on Tuesday, May 12th, 2009 at 8:18 am and is filed under CSS.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.