Examples


Saturday, October 9th, 2010

Normal Mapped Lighting for Photos using Canvas

Category: Canvas, 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!

Posted by Dion Almaer at 10:19 am
9 Comments

++---
2.9 rating from 14 votes

Tuesday, July 13th, 2010

An alternative way to addEventListener

Category: Examples, JavaScript, Standards, W3C

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…

Posted by webreflection at 8:00 am
11 Comments

+++--
3.9 rating from 9 votes

Wednesday, June 9th, 2010

MagnifyMa: A CSS magnifying glass

Category: CSS, Examples

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…

Posted by Dion Almaer at 5:51 am
3 Comments

++++-
4 rating from 5 votes

Thursday, June 3rd, 2010

Realtime ray tracing^H^H^H^H^H^H texture mapping with JavaScript

Category: Examples

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…

Posted by Dion Almaer at 6:47 am
4 Comments

++---
2.8 rating from 5 votes

Wednesday, June 2nd, 2010

Build a Fish Tank with Canvas and CSS3

Category: Examples

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…

Posted by Dion Almaer at 6:27 am
3 Comments

+++--
3.6 rating from 5 votes

Wednesday, May 19th, 2010

Golingo: a great Titanium mobile Web game, open sourced for you

Category: Appcelerator, Examples, Games

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…

Posted by Dion Almaer at 12:01 am
Comment here

+++--
3.9 rating from 8 votes

Friday, May 7th, 2010

Spiderman Intro in CSS

Category: CSS, Examples

It’s Friday. How about some Spiderman. In CSS using animation.

Posted by Dion Almaer at 5:00 am
6 Comments

++++-
4.7 rating from 3 votes

Thursday, May 6th, 2010

JavaScript asynchronous method queue chaining

Category: Examples, JavaScript

“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…

Posted by Dion Almaer at 4:41 pm
13 Comments

++++-
4.5 rating from 4 votes

Tuesday, May 4th, 2010

Raphael++

Category: Examples, UI

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…

Posted by Dion Almaer at 7:06 am
3 Comments

+++--
3.7 rating from 3 votes

Monday, April 26th, 2010

Scrollin’ Scrollin’ Scrollin’ to the NextPoint

Category: Examples, JavaScript

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…

Posted by Dion Almaer at 6:56 am
3 Comments

++++-
4.5 rating from 2 votes

Friday, March 12th, 2010

Ambilight Sample; video and canvas

Category: Canvas, Examples, Video

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…

Posted by Dion Almaer at 6:30 am
7 Comments

++++-
4.5 rating from 48 votes

Wednesday, March 10th, 2010

CSS3 Please! Instant results… Thank You

Category: CSS, Examples

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…

Posted by Dion Almaer at 8:39 am
5 Comments

+++--
3.5 rating from 37 votes

Friday, February 5th, 2010

AT AT Walking with CSS

Category: CSS, Examples

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…

Posted by Dion Almaer at 6:17 am
12 Comments

+++--
3.3 rating from 27 votes

Friday, January 29th, 2010

Addmap.js – automatically analyse a text for geo locations and add a map

Category: Examples, Geo, Google, JavaScript, Mapping, Yahoo!

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…

Posted by Chris Heilmann at 10:17 am
1 Comment

+++--
3.1 rating from 19 votes

Thursday, December 31st, 2009

Web 2.Snow

Category: CSS, Examples, Fun, JavaScript

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…

Posted by webreflection at 8:13 am
8 Comments

+++--
3.2 rating from 30 votes

Tuesday, December 1st, 2009

Star Wars HTML and CSS: A NEW HOPE

Category: CSS, Examples, WebKit

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…

Posted by webreflection at 7:00 am
12 Comments

+++--
3.9 rating from 67 votes