Archive for the 'Examples' Category
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 done. Hope to see some other examples out [...]
March 10th, 2010 | Posted in CSS, Examples, Front Page, Miscellaneous | Comments Off
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