Archive for the 'Examples' Category
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 [...]
February 5th, 2010 | Posted in CSS, Examples, Front Page, Miscellaneous | Comments Off
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 [...]
January 29th, 2010 | Posted in Examples, Front Page, Google, JavaScript, Mapping, Miscellaneous, Yahoo!, analisys, api, geo, maps, placemaker, yql | Comments Off
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 [...]
December 31st, 2009 | Posted in CSS, Examples, Front Page, Fun, JavaScript, Miscellaneous | Comments Off
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 [...]
December 1st, 2009 | Posted in CSS, Examples, Front Page, Miscellaneous, Safari | Comments Off
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 [...]
November 26th, 2009 | Posted in CSS, Examples, Front Page, Miscellaneous, Section | Comments Off
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.
September 29th, 2009 | Posted in Examples, Front Page, Miscellaneous, cappuccino | Comments Off
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 [...]
July 28th, 2009 | Posted in Examples, Front Page, Miscellaneous, Presentation, Workshop, blogging, developer, evangelism, handbook, speaking, writing | Comments Off
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
[...]
July 3rd, 2009 | Posted in Examples, Front Page, Miscellaneous, Sound | Comments Off
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 + [...]
June 26th, 2009 | Posted in CSS, Examples, Front Page, Miscellaneous | Comments Off
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 [...]
June 11th, 2009 | Posted in Examples, Front Page, Miscellaneous | Comments Off