pa href=”http://feedads.g.doubleclick.net/~a/Zn4-SgTKhujQI4zLWz8zG1s0DNA/0/da”img src=”http://feedads.g.doubleclick.net/~a/Zn4-SgTKhujQI4zLWz8zG1s0DNA/0/di” border=”0″ ismap=”true”/img/abr/
a href=”http://feedads.g.doubleclick.net/~a/Zn4-SgTKhujQI4zLWz8zG1s0DNA/1/da”img src=”http://feedads.g.doubleclick.net/~a/Zn4-SgTKhujQI4zLWz8zG1s0DNA/1/di” border=”0″ ismap=”true”/img/a/ppThe 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, a href=”http://jquery.com/” target=”_blank”jQuery/a), CSS(3) and Flash (or a href=”http://www.adobe.com/products/flex/” title=”Adobe Flex”Adobe Flex/a) this kind of interaction can be achieved./p
pSince quot;the sky is the limitquot; 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#8217;t have any practical use. These emProof of Concepts/em are just created strongbecause they CAN/strong. Most of them are just really for fun or just beautiful to watch./p
pThese PoC#8217;s (or experiments) show off some serious power and strongpotential/strong, but don#8217;t have any real practical use (yet). They#8217;re insanely cool to watch, but really seek some better use./p
pspan id=”more-12003″/span/p
h3 class=”title”a href=”http://css-tricks.com/blurry-background-effect/”Blurry Background Effect/a/h3
pAlthough not a real experiment, Chris Coyier shows the use of one often forgotten CSS trick using codebackground-attachment/code. 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#8217;t seen it anywhere (yet)./p
p class=”img”a href=”http://css-tricks.com/blurry-background-effect/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_blurry.png” alt=”" //a/p
h3 class=”title”a href=”http://deanm.github.com/pre3d/monster.html”3d Monster/a/h3
pNo: It#8217;s not a 3d render created with fancy software that you see below. It is an actual JavaScript quot;monsterquot;. 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./p
p class=”img”a href=”http://deanm.github.com/pre3d/monster.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_3dmonster.png” alt=”" //a/p
h3 class=”title”a href=”http://balldroppings.com/js/”BallDroppings/a/h3
pBallDroppings 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./p
p class=”img”a href=”http://balldroppings.com/js/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_balldroppings.png” alt=”" //a/p
h3 class=”title”a href=”http://www.kelvinluck.com/assets/jquery/boingPic/index.html”BoingPic/a/h3
pYou got to love these useless JavaScript experiments. This one, from a href=”http://www.kelvinluck.com/2009/03/not-my-mothers-javascript/”Kelvin Luck/a, 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./p
p class=”img”a href=”http://www.kelvinluck.com/assets/jquery/boingPic/index.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_boingpic.png” alt=”" //a/p
h3 class=”title”a href=”http://experiments.instrum3nt.com/markmahoney/ball/”BrowserBall/a/h3
pThis JavaScript experiment has the tagline emPossible More Cool Than You Think It Will Be/em. When I first stumbled on that page, I really didn#8217;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#8217;m not sure if this will ever become useful in the future, but it sure is an awesome demonstration of some JavaScript power./p
p class=”img”a href=”http://experiments.instrum3nt.com/markmahoney/ball/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_browserball.png” alt=”" //a/p
h3 class=”title”a href=”http://jsexperiments.appspot.com/files/mouth.html”BrowserTalk/a/h3
pJust 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#8217;ll need to enable your microphone and grant access to the app. Launch the app, speak and (or let others) be amazed./p
p class=”img”a href=”http://jsexperiments.appspot.com/files/mouth.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_browsertalk.png” alt=”" //a/p
h3 class=”title”a href=”http://css-tricks.com/css3-clock/”Clock with CSS3 and jQuery/a/h3
pToby Pitman saw a real good experimental use of the CSS3 coderotate/code 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#8217;s something really creative./p
p class=”img”a href=”http://css-tricks.com/css3-clock/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_clock.png” alt=”" //a/p
h3 class=”title”a href=”http://www.cssplay.co.uk/menu/amazing.html”CSS Puzzle/a/h3
pemIt#8217;s amazing wot CSS can do/em. 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./p
p class=”img”a href=”http://www.cssplay.co.uk/menu/amazing.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_csspuzzle.png” alt=”" //a/p
h3 class=”title”a href=”http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin”DragCaptcha/a/h3
pThis 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./p
p class=”img”a href=”http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_dragcaptcha.png” alt=”" //a/p
h3 class=”title”a href=”http://www.webdesignerwall.com/tutorials/css-decorative-gallery/”CSS Decorative Gallery/a/h3
pYet 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./p
p class=”img”a href=”http://www.webdesignerwall.com/tutorials/css-decorative-gallery/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_gallery.png” alt=”" //a/p
h3 class=”title”a href=”http://friggeri.net/blog/2008/12/21/jquery-gestures”jQuery Gestures/a/h3
pWith 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#8217;t that useful, still it does demonstrates an awesome technique./p
p class=”img”a href=”http://friggeri.net/blog/2008/12/21/jquery-gestures” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_gestures.png” alt=”" //a/p
h3 class=”title”a href=”http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/”CSS Gradient Text Effect/a/h3
pCheck out this sweet little CSS trick from WebDesignerWall. Creating images from your text, just to achieve a nice gradient, isn#8217;t very search friendly. Also, the user isn#8217;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#8217;t like gradients, there also is a a href=”http://www.jankoatwarpspeed.com/post/2008/08/09/Add-grunge-effect-to-text-using-simple-CSS.aspx”Grunge effect/a of this technique./p
p class=”img”a href=”http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_gradient.png” alt=”" //a/p
h3 class=”title”a href=”http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/”Simulate Gravity with jQuery/a/h3
pWith 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./p
p class=”img”a href=”http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_gravity.png” alt=”" //a/p
h3 class=”title”a href=”http://blog.ph-creative.com/post/CSS-Trick-Hidden-Messages.aspx”CSS3 Hidden Messages/a/h3
pCraig Wilson shows an amazingly simple technique using the CSS3 codeselection/code property to hide messages on your webpage. Just read the article, check out the demo and select some text. You#8217;ll clearly be able to see the hidden message; A great way to add a href=”http://en.wikipedia.org/wiki/Subliminal_message”sumliminal messages/a to your site./p
p class=”img”a href=”http://blog.ph-creative.com/post/CSS-Trick-Hidden-Messages.aspx” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_hiddenmessage.png” alt=”" //a/p
h3 class=”title”a href=”http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm”CSS Image Text Wrap/a/h3
pThis is one technique that I actually don#8217;t really like. Not because of the crazy code you would have to write to achieve it, but just because it doesn#8217;t look that fancy. With CSS Image Text Wrap, you can wrap your text around an image, giving the user the feeling that it#8217;s created outside the box model. To wrap your text around an image, simply think outside the box!/p
p class=”img”a href=”http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_imagewrap.png” alt=”" //a/p
h3 class=”title”a href=”http://webdev.stephband.info/parallax.html”jParallax/a/h3
pI 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 a href=”http://www.vektordesign.com/”some websites/a a href=”http://stephband.info/”make use/a of this technique, it could be used in more ways. If you#8217;re a MooTools lover, there also is a Mootools version: a href=”http://www.piksite.com/mParallax/”mParallax/a./p
p class=”img”a href=”http://webdev.stephband.info/parallax.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_jparallax.png” alt=”" //a/p
h3 class=”title”a href=”http://net.tutsplus.com/tutorials/javascript-ajax/leopard-desktop-in-jquery-using-jqdock/”The Leopard Desktop/a/h3
pWhat? Placing an OS inside your webbrowser? What#8217;s the use of that? None (just like a href=”http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html”creating the iPhone for your browser/a 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./p
p class=”img”a href=”http://net.tutsplus.com/tutorials/javascript-ajax/leopard-desktop-in-jquery-using-jqdock/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_leopard.png” alt=”" //a/p
h3 class=”title”a href=”http://www.fofronline.com/experiments/cube/multiCubes.html”CSS3 3d Cubes/a/h3
pDid you ever thought you could create an actual 3D cube using only CSS? Paul Hayes managed to create this effect using the CSS3 codetransform/code properties. Combined with the codetransition/code 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./p
p class=”img”a href=”http://www.fofronline.com/experiments/cube/multiCubes.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_multicubes.png” alt=”" //a/p
h3 class=”title”a href=”http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html”Illusion using the Parallax effect/a/h3
pA 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 a href=”http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html”learn how to create such an effect/a of your own to use in any of your future projects. There are no real practical uses that I can think of, still it#8217;s pretty cool to see./p
p class=”img”a href=”http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_parallax.png” alt=”" //a/p
h3 class=”title”a href=”http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html”CSS3 Polaroid Photo Viewer/a/h3
pAnother creative CSS3 and jQuery experiment. Although pretty cool to use when the CSS3 options aren#8217;t enabled, the real fun of this application is the rotation of the polaroids. It simply gives you more feel, as if you#8217;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./p
p class=”img”a href=”http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_polaroids.png” alt=”" //a/p
h3 class=”title”a href=”http://css-tricks.com/jquery-robot/”Animated Cartoon Robot/a/h3
pThe article from Anthony Calzadilla starts with emWhy?/em. Like I said in the start of this article, the answer is: strongJust because it can!/strong 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./p
p class=”img”a href=”http://css-tricks.com/jquery-robot/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_robot.png” alt=”" //a/p
h3 class=”title”a href=”http://css-tricks.com/make-a-secret-message-with-css-positioning-and-transparency/”CSS Secret Message by scrolling/a/h3
pChris 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./p
p class=”img”a href=”http://css-tricks.com/make-a-secret-message-with-css-positioning-and-transparency/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_secretmessage.png” alt=”" //a/p
h3 class=”title”a href=”http://www.facebook.com/”BONUS: Facebook Lens Flare/a/h3
pI learned this little trick from a href=”http://twitter.com/justcreative/status/1736236048″Jacob Cass/a. Click on the background of the Facebook website and press the following: strongUp, Up, Down, Down, Left, Right, Left, Right, b, a, enter, click./strong Check it out: An awesome lens flare! The combination of pressing the keys is the a href=”http://en.wikipedia.org/wiki/Konami_Code”Konami Code/a. Useless? Kinda. Fun? Absolutely./p
p class=”img”a href=”http://www.facebook.com/” target=”blank”img src=”http://noupe.com/img/proof_concept/poc_lens.png” alt=”" //a/p
pDo you know any proof of concepts out there that are really awesome, but aren#8217;t on the list? Please share it with us!/p
div class=”author-box”
div class=”author-text”
img height=”80″ width=”80″ class=”author-photo” src=”http://www.noupe.com/img/authors/marco.png” alt=”"/ /p
h4strongAuthor/strong: a href=”http://www.marcofolio.net/” title=”Visit Marco Kuiper’s Website”Marco Kuiper/a/h4
pMarco Kuiper is just another creative design geek that loves PHP, CSS and jQuery and is always looking for innovative things. He#8217;s also the founder of a href=”http://www.marcofolio.net/” title=”Visit Marcofolio.net”Marcofolio.net/a: His blog and personal playground where he shares all kinds of stuff. If you#8217;d like to connect with him, you can follow him on a href=”http://twitter.com/marcofolio” title=”Follow Marco Kuiper on Twitter”Twitter/a./p
/p/div
div class=”write-for-us”strong class=”red”Write for Us!/strong We are looking for exciting and creative articles, if you want to contribute, just send us an a href=”mailto:info@noupe.com”email/a./div
/p/div
div class=”feedflare”
a href=”http://feeds2.feedburner.com/~ff/Noupe?a=01XrmL8WArs:_xxkrwPYH8w:V_sGLiPBpWU”img src=”http://feeds2.feedburner.com/~ff/Noupe?i=01XrmL8WArs:_xxkrwPYH8w:V_sGLiPBpWU” border=”0″/img/a a href=”http://feeds2.feedburner.com/~ff/Noupe?a=01XrmL8WArs:_xxkrwPYH8w:F7zBnMyn0Lo”img src=”http://feeds2.feedburner.com/~ff/Noupe?i=01XrmL8WArs:_xxkrwPYH8w:F7zBnMyn0Lo” border=”0″/img/a a href=”http://feeds2.feedburner.com/~ff/Noupe?a=01XrmL8WArs:_xxkrwPYH8w:gIN9vFwOqvQ”img src=”http://feeds2.feedburner.com/~ff/Noupe?i=01XrmL8WArs:_xxkrwPYH8w:gIN9vFwOqvQ” border=”0″/img/a a href=”http://feeds2.feedburner.com/~ff/Noupe?a=01XrmL8WArs:_xxkrwPYH8w:7Q72WNTAKBA”img src=”http://feeds2.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA” border=”0″/img/a
/divimg src=”http://feeds2.feedburner.com/~r/Noupe/~4/01XrmL8WArs” height=”1″ width=”1″/
{ 0 comments… add one now }