20+ Wicked Proof of Concepts for Better use of jQuery/CSS
Blurry Background EffectAlthough 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).
Clock with CSS3 and jQueryToby Pitman saw a real good experimental use of the CSS3
rotateproperty. 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.
DragCaptchaThis 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 GalleryYet 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 GesturesWith 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 EffectCheck 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 jQueryWith 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 MessagesCraig Wilson shows an amazingly simple technique using the CSS3
selectionproperty 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 WrapThis 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!
jParallaxI 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 DesktopWhat? 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 CubesDid you ever thought you could create an actual 3D cube using only CSS? Paul Hayes managed to create this effect using the CSS3
transformproperties. Combined with the
And here is how you can use the lens flare effect of facebook on your website.
weeewwww… great post!
Once again a big “Thanks” Noura, for allowing me to write this guest article on Noupe. I hope some real great practical uses of these Proof of Concepts come forward :) .
Thanks to you Marco for taking time to write such a nice post, we are happy to have you on our team :)
Nice roundup, Marco!
good list but those glasses make you look like king of the d-bags, d-bag.
Hahaha, “thanks” I guess :P .
Still need a good picture that I don’t mind placed online.
I’m focus on wordpress theme design. This is a great article to the web design! I tell me a lot. Thanks!!
3D Monster, though cool, doesn’t really have anything to do with jQuery or CSS.
Great roundup, and nice to see another Zotero user!
just like Janko said: Nice roundup
thanks for sharing
That facebook trick is really the bomb. Great list Marco!
These are some awesome techniques. Browser Talk is my fav by far. It app made me laugh. I wish there was a tutorial.
These have given me some great ideas, thanks
this post is awesome … this is the power of jQuery … and ofcourse CSS :) … keep rocking …
very nice!! very very useful!!
hehe awesome, I was messing with this stuff a couple of weeks back. Great creativity!
Thanks for the include guys. :)
Great list! jQuery has definitely changed the scene in terms of what we can easily accomplish on our websites
Wonderful list thank for sharing.
BTW there is a couple of sites have the same facebook trick ;)
Great post.. bookmarked for sure! That facebook thing is weird, huh? Reminds me of the old mortal kombat video game combo moves.. “Finish Him!” >
“Static HTML is just boring and these days the user wants to see some more eye candy from/on the web.”
Really? Which users want to see that? Most users I talk to don’t actually care, they just want sites that are quick, functional, useful and intuitive. Loading them up with visual trickery generally makes them harder to use. Less is more and all that…
There are some interesting and clever effects here but I’m not sure how many of them are actually practical or useful.
There’s a forbidden on web designer wall (The one with the CSS-Decorative-Gallery) :(
Nice roundup – thanks for the time to put that all together. If you’re after more then one I’d take a look at is http://www.netzgesta.de/glossy/ for some interesting effects.
All the best…
Great examples, Really awesome… Never seen such….. Bookmarked this article.
You should definately write more about this! Please!
thanks dude, i’ll be back
Nice collection. The jquery apps are evolving and will soon overtake the big fat flash builds :)
Really good finds, much better than you’re regular “top 10” lists.
Thanks for sharing.
The Facebook thing didn’t work for me.
Have played with BoingPic and find J-query fascinating as to what it can do.
Keep them coming