Flydende former med CSS og javascript

Med smartphones- og iPad'ens gennembrud har webudviklingen oplevet en small screen terminal-revolution. Apple tog det første skridt, da de affyrede en bredside imod Adobe, ved ikke at understøtte Flash på deres mobile styresystem.

Over hele verden bevæger udviklere og designere sig derfor væk fra de fastlåste, ophavsretsbeskyttede formater. Samtidig er open source-tanken også nået ud til slutbrugerne som fravælger Internet Explorer og Safari til fordel for Chrome, Firefox og Opera.

Den bevægelse har virkelig fyret op under udviklingen af HTML5, CSS3 og SVG. Nu kan der laves imponerende design med få linjers kode. Jeg postede et link på forummet til Nikes satsning Better World. Oskar supplerede med Ben the Bodyguard, som også har sat nye standarder for interaktivt design uden Flash.

Inspireret af Nike og Ben the Bodyguard gik jeg i gang med at undersøge de nye muligheder i CSS-transitions og HTML5, understøttet af minimalt javascript. Det har været så spændende, at jeg gerne vil dele mine foreløbige opdagelser.

Jeg har sat malver.dk/skies.php op som et meget simpelt eksempel på mekanikken bag Nike og Ben-siderne. Jeg har kommenteret næsten hver linje af koden, så andre kan få en lettere introduktion til mulighederne :-)

Indtil videre er siden kodet til Firefox, Chrome og Safari (-moz og -webkit), fordi de tillader flere funktioner fra CSS 3 og HTML 5. Men det er bare et spørgsmål om tid, før IE også kommer med på vognen.