Examples

Francois Laberge has a fun demonstration of creating 3d looking effects via lighting and normal mapping on 2d photos. The demos progressively add features, from left to right lighting, to glow effects, to a multiple colored lighting extravaganza! Very nice work Francois!

I can’t believe none of us knew DOM2 This is how a tweet from @SubtleGradient, re-tweeted by @jdalton, has been able to steal my rest tonight … and this post is the consequence … What’s new in a nutshell There is a W3C Recommendation about addEventListener behavior, which clearly specify the second argument as an Read the rest…

Jack Prosser has fun proof of concept CSS magnifying glass. He told us a little about it: The main concept works on using CSS3 for the radius, making a round circle view point. This contains an iframe which is the exact same content. Using CSS3 again I scale the content in the iframe so that Read the rest…

We have posted about ray tracing before, and now we have another example by Jonas Wagner: The environment is mapped using cube mapping. I store all the values of the cubemap as floats. I increase the definition range by multiplying all values bigger than 0.95 with 2. This makes sure that the bright parts of Read the rest…

Greg Murray has an early beta of a fun sample app: HTML5 Fish Tank. The app lets you build out your fishes, and then place them in the tank. It puts the low level Canvas and CSS3 transitions/transforms to work. E.g. HTML4 < view plain text > <div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: Read the rest…

Jacob Waller created an addictive word came in Golingo. What sets it apart? Not a single line of Objective-C written, courtesy of Titanium Mobile Only one (!) image ingame – the rest is CSS3 magic Fluid gameplay thanks to CSS Transitions and Animations All logic using pure, beautiful JavaScript Multitouch draggables using iPhone Touch API Read the rest…

“Guess who’s back? Back again…..” The JavaScript slim shady himself…. Dustin Diaz (formerly of YUI – Google, now of Twitter) has taken some time out for his busy coding at Twitter, and photography awesomeness to get back to some JS blogging. Dustin has written up a pattern that he used in Twitter @anywhere, the asynchronous Read the rest…

Raphael is pure goodness. Dmitry gave a fantastic talk at JSConf, and his library never fails to impress. There have been a few interesting posts recently. Trotter Cashion kicks things into gear as he declares his love and then goes on to show how you can unit test Raphael with some mocks. Then we learn Read the rest…

This is a guest post from the folks at Nextpoint. We’ve previously mentioned their pioneering use of Ajax in the legal industry and open sourcing of Growl4Rails. Here they bring us some details on their scrollable-document interface — make sure to make it to the end of the post for a link to the sample Read the rest…

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect. As the video runs, a snapshot is sent over to JavaScript land where colors are worked out: javascript < view plain text > function getMidColors(side) { var w = buffer.width, Read the rest…

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly. CSS3, Please! lets you play with fancy new rules such as: border-radius box shadow gradients rgba support in backgrounds transforms font-face Really nice way to make tweaks inline in the page….. nicely Read the rest…

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS. He goes over the different areas and how he uses animation and transforms. For example, the head of the beast: css < view plain text > @-webkit-keyframes rotate-head{ 0% {-webkit-transform:rotate(0deg) translate(0px,0px);} Read the rest…

As part of an upcoming article on geo location I am putting together a few Geo Toys for myself and here is the first one. Addmap.js is a JavaScript that analyses an elements text content, finds geographical locations and links them to Google Maps. It also adds a map preview and a list of the Read the rest…

When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari. And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I Read the rest…

There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away“, compared with my simple CSS gallery. Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS: Unfortunately, the Read the rest…