CSS3-Liebe! Wer genug von Bildern für einfache und leicht komplexere Formen hat und nur für moderne Browser optimiert, kann sich schon jetzt an diesen CSS-Formen bedienen. Allesamt bestehend aus nur einem HTML-Element.

Adobe Labs:

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Flash liegt in den letzten Atemzügen und Adobe kümmert sich um ein neues Baby: Edge. Mit Edge soll es möglich sein relativ einfach Animationen mit HTML5, CSS3 und JavaScript zu basteln. Das klingt soweit erstmal gut. Schon in frühem Stadium, nicht mal beta, will Adobe Feedback und Anregungen zu Edge haben. Die Schritte gefallen mir äußerst gut. Das Einzige was mir nicht gefällt: Der Downloadserver ist gerade nicht erreichbar. Hmpf.

Auf tidenhub2011.de habe ich einen kleinen Effekt im Submitbutton eingebaut, in dessen Genuss allerdings nur Benutzer mit einem Webkit-Browser (Chrome, Safari) kommen. Es geht um eine kleine Animation der Hintergrundgrafik. Umgesetzt habe ich das rein mit CSS3 und -webkit-animation.

Einfache CSS Animationen kann man auch mit -webkit-transition oder -moz-transition bauen, sobald es aber etwas komplexer wird, reichen die Möglichkeiten nicht mehr aus. Daher also -webkit-animation. Ich hoffe sehr, dass auch Mozilla da noch nachrüstet im Firefox4.

Hier eine verkleinerte Version der Hintergrundgrafik zum Verstehen:

Und hier der fertige, funktionsfähige Button:

Jetzt aber zum Code:

@-webkit-keyframes welle {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -1120px 0px;
    }
}

Mit @-webkit-keyframes dein_animations_name legt man fest was man animiert und wie der Stand zu welchem Zeitpunkt der Animation ist. Man kann beliebig viele Schritte in Prozentwerten hinzufügen. Mir reicht in diesem Fall Anfang und Ende. Animiert wird ganz einfach die Position des Hintergrundbildes. Es läuft sozusagen einfach von links nach rechts durch. Dadurch sieht es so aus als würde sich die Welle bewegen.

INPUT.submitexample {
    margin-bottom: 15px;
    padding: 0px;
    width: 160px;
    height: 40px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #c5deed;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px 1px 1px #000;
    border-top: 1px solid #55a4d3;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 2px #041e2d;
    -moz-box-shadow: 0px 1px 2px #041e2d;
    box-shadow: 0px 1px 2px #041e2d;

    background: url(img/input_submit_bg.gif) no-repeat #214b80;
    background-position: 0px 0px;
    -webkit-animation-name: welle;
    -webkit-animation-play-state: paused;
    -webkit-animation-duration: 19s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
}

Der ganze Kram bis background interessiert für die Animation nicht. Ab da wird es dann aber (fast) interessant. Mit background legen wir erstmal das Hintergrundbild fest. Es kachelt nicht (no-repeat) und der Hintergrund ist blau (#214b80), falls das Bild nicht geladen will. Nennt man auch Fallback.

Als nächstes setzen wir mit background-position: 0px 0px; die Hintergrundgrafik auf ihre Ausgangsposition. In diesem Fall also oben links.

Richtig interessant wird es erst jetzt. Mit -webkit-animation-name: welle; rufen wir die Animation auf, die wir oben erstellt haben. Mit -webkit-animation-play-state: paused; halten wir die Animation an, bevor sie überhaupt anfangen kann, weil die Animation nur bei Hover über dem Button passieren soll. Standardwert ist hier „running“, was bedeutet, dass die Animation sofort beginnt.

-webkit-animation-duration: 19s; sollte selbsterklärend sein. 19s ist einfach die Dauer der Animation.

-webkit-animation-iteration-count: infinite; bedeutet, dass die Animation immer wieder abläuft. Wir erzeugen hier also einen Loop. Standardwert ist 1 und man kann jede beliebige Zahl eingeben.

-webkit-animation-direction: alternate; bedeutet, dass die Animation bei allen geraden Durchläufen vorwärts abgespielt wird und bei bei ungeraden Durchläufen rückwärts abgespielt wird. Das bedeutet, dass die Animation beim ersten Mal richtig rum und beim zweiten Mal rückwärts abgespielt wird. Das in Verbindung mit einer niemals stoppenden Animation führt dazu, dass die Welle immer wieder zurück läuft, als wäre sie auf eine Wand getroffen. Standardwert ist hier übrigens normal. Da würde die Animation einfach immer wieder am Anfang starten.

-webkit-animation-timing-function: linear; bedeutet, dass die Animation einfach linear abläuft. Standardwert ist ease. Es gibt noch ease-in, ease-out und ease-in-out, durch die eine Beschleunigung der Animation jeweils am Anfang, Ende oder an beiden Enden entsteht. Am Besten einfach mal testen.
Das war es eigentlich auch schon.

INPUT.submitexample:HOVER {
    -webkit-animation-play-state: running;
}

Bei Hover über den Button verändern wir jetzt nur noch webkit-animation-play-state auf running und schon läuft die Animation. Verlassen wir den Button mit der Maus wieder, trifft wieder die obige Situation (paused) zu und die Animation stoppt. Geht man wieder mit der Maus über den Button setzt sich die Animation genau an diesem Punkt fort.

Das war jetzt eine ganze Menge Text, ist aber eigentlich alles total simpel. Viel Spaß damit!

Ihr erinnert euch vielleicht noch an die Ignite letztes Jahr. Dieses Jahr gibt es etwas besseres. tidenhub 2011.

Der Unterschied zwischen den Gezeiten Ebbe und Flut. Jeder, der schon mal sein eigenes Projekt hatte, wird diese Differenz kennen. Die emotionale Achterbahnfahrt zwischen dem erniedrigenden Tief und dem absoluten Hoch. Das pushende High, das Flügel verleiht, aber auch den schmerzenden Punkt, an dem man am liebsten Alles hinschmeißen möchte.

Und wir wollen es hören von euch! In 6 Minuten und 40 Sekunden. 20 mal 20 Sekunden. Auf 20 Folien sollst du uns und den anderen Zuhörern dein Ding vorstellen! Insgesamt wird es 10 Vorträge geben, die inspirieren, zum Nachdenken anregen oder uns zum lachen bringen.

Datum: 10. März 2011, 19:30 Uhr · Ort: Lerchenstraße 16a, 22767 Hamburg

Also egal ob ihr etwas vortragen oder einfach nur lustige und interessante Vorträge hören möchtet, meldet euch an und seid dabei!

Das Design hat übrigens Marcel gemacht und ich habe es umgesetzt (mit kurzer Hilfe von Mathias.). HTML5-Anfänge und viel CSS3-Kram. <3
In webkit-Browsern sieht alles übrigens am schönsten aus und es gibt kleine Animationen oder Ähnliches zu entdecken. Aber auch in allen anderen Browsern funktioniert alles bestens.

Das war unser erstes komplettes, kleines Projekt bei den Elbdudlern.