Hey everyone, I already told you about the new Editor by GitHub: Atom. It’s an invite only beta at the moment, but I got two more invites to give away. It’s currently Mac only, keep that in mind. So if you want one of the invites, just write a comment. First come, first serve. And now: Happy reading.

• CSS Shake
  Not that I think this is very useful, but it’s definitely funny. (via)

• New UI in Firefox Aurora
  Firefox Aurora came out in Version 29 and it sports a new UI, which I really like. (Aurora is even more beta than Firefox beta, but you can get an idea what is coming down the pipe.)

• CodeKit 2 Release
  CodeKit 2 is here. If you are not a fan of the command line and thus don’t use things like Grunt.js, this is THE app for you.

• MAMP 3
  And another update to a very useful and already great, if not very good looking, app. Haven’t tried the new version, but it sure looks like it’s a worthy update.

• Just Do One Thing
  Good advice. Make small steps. Achieve small goals. Feel good and keep going. It’ll add up.

• Improving the CSS performance of fixed position elements
  Handy trick to stop fixed positioned elements from repainting on scroll.

• Ridiculously Responsive Social Sharing Buttons
  Social Sharing Buttons are always a pain to implement responsively and responsibly. rrssb is here to help.

Das sieht alles ziemlich gut aus. Ich möchte zwar nicht wissen wie der Code der Ausgabe-HTML-Datei aussieht, aber generell ist Adobe mit Edge sicher auf dem richtigen Weg. Es scheint viele Ähnlichkeiten zu Flash in der Bedienung der App zu geben, was den Umstieg sicher vereinfacht. Ich habe nur rudimentäre Sachen in Flash gemacht und habe es gehasst. Die Möglichkeit einfache Animationen in Edge zu erstellen, Javascript zu nutzen und alles sogar auch außerhalb der App bearbeiten zu können, sagt mir aber zu. Ein wirklicher Freund von Animations-Timeline-Apps werde ich aber wohl in naher Zukunft trotzdem nicht werden.

Adobe Edge Preview gibt’s hier zum Download. Ich werde mir das demnächst auch mal genauer anschauen und etwas damit experimentieren.

Klar, ich weiß im Grunde auch wie das geht. Aber die Zeit und Planung die für so was benötigt wird, ist enorm. Ich bin jedes mal wieder beeindruckt. Dieses mal sind es die sich bewegenden Innenteile einer Uhr. (via)

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!