Archive for the 'Examples' Category

AT AT Walking with CSS

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:
PLAIN TEXT
CSS:

 

@-webkit-keyframes rotate-head{

  0% {-webkit-transform:rotate(0deg) translate(0px,0px);}

  40% {-webkit-transform:rotate(10deg) translate(15px,5px);}

  80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}

  100% {-webkit-transform:rotate(0deg) translate(0px,0px);}

}

#atat #head [...]

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

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 [...]

Web 2.Snow

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 have [...]

Star Wars HTML and CSS: A NEW HOPE

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 live experiment [...]

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles.
I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment.
The post is complete with examples and explanation over PHP, CSS, jQuery, and finally jQuery [...]

Cappuccino is a Push over

Elias Klughammer has implemented the Juggernaut push server in a Cappuccino app.
Always nice to have an open source bare bones sample app for a marriage like this. Nothing beats looking at the source.

Developer evangelism handbook released

As developers, it can be hard to get your voice heard in a company. Whilst our products depend on developers building them the right way, other people seem to call the shots about where they are going.
This becomes disastrous when a company tries to reach developers with their product. Normal marketing and PR stunts [...]

It’s Friday. Play some drums…. HTML5 style

Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.
PLAIN TEXT
JAVASCRIPT:

 

function playBeat() {

        if (isPlaying) {

                var nextBeat = 60000 / curTempo / 4;

                // Turn off all lights on the tracker’s row

        [...]

Fun with text-shadow

Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:
PLAIN TEXT
JAVASCRIPT:

 

document.getElementById(’text-shadow-box’).onmousemove = function(e) {

    var xm = e.clientX - 300;

    var ym = e.clientY - 175;

    var d = Math.sqrt(xm*xm + ym*ym);

    text.style.textShadow = -xm + ‘px ‘ + -ym + [...]

Animating SVG with Canvas and Burst

Christopher Blizzard and his team are doing great write-ups on hacks.mozilla.org as they celebrate 35 days of Open Web goodness.
They just posted on the work of Alistair MacDonald who used his Burst engine to demonstrate taking SVG and having Burst load it and convert it all to JavaScript objects that are rendered inside of a [...]