20+ Wicked Proof of Concepts for Better use of jQuery/CSS
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.
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).
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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
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.
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.
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.
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.
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!