Archive for the 'Examples' Category

CSS3 Please! Instant results… Thank You

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

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