Transformieren mittels “transform” geht weiter. Im ersten Teil habe ich gezeigt, wie Objekte skaliert (“scale”) und gedreht (“rotate”) werden können. “Transform” bietet aber noch mehr. Zeit für Teil 2 mit den Hauptdarstellern “translate” (verschieben von Objekten) und “skew” (verzerren von Objekten).

Weiterlesen →

Habt ihr schon meine HTTP-Fehler-404 Seite gesehen? Ich hoffe nicht… Bisher habe ich eine WordPress 404-Fehlerseite genutzt, um die Besucher über einen nicht mehr funktionierenden Link zu informieren. Nun habe ich dafür eine separate HTML-Seite, losgelöst vom WordPress-Theme, angelegt. Und da kam mir der Gedanke, dass sich daraus doch ein schönes Tutorial zaubern lässt. Gesagt, getan: ich zeige hier Schritt für Schritt den Aufbau und die Einrichtung meiner animierten HTTP-Fehler-404 Seite.

Wer vorab schon mal einen Blick auf meine 404-Seite wagen möchte, klickt hier. Die Seite ist per “keyframes” animiert und verwendet eine Retro-Schriftart.

Es sei allerdings gleich erwähnt, dass die Animationen nur zu sehen bekommt, wer entweder den Firefox ab Version 5 oder einen Webkit-Browser verwendet.

Weiterlesen →

In diesem Artikel habe ich gezeigt, wie mittels des Grafikallrounders Gimp Bilder und Texte gespiegelt werden können. Wer gespiegelte Bilder im Webdesign oder als Webinhalt einsetzen möchte, kann sich diesen Umweg zukünftig sparen, denn Webkit-Browser können mittels “box-reflect” ebenfalls Bilder spiegeln. Wir wollen uns den Befehl etwas genauer anschauen.

Weiterlesen →

Ich persönlich mag Animationen auf Internetseiten, wie ihr sicher an meiner Webseite schon bemerkt habt. Sie bringen Schwung und Bewegung in die sonst leblosen Inhalte. Aber wie erstellt man Animationen? Schon von “keyframes” gehört?

Immer mehr Browser unterstützen die Möglichkeit mit CSS-Code Animationen zu erstellen. Aktuell bieten Google Chrome ab Version 11, Apple Safari ab Version 4 und Mozilla Firefox ab Version 5 Unterstützung für “keyframes”, jedoch nur mit browserspezifischen Präfixen: Chrome und Safari -webkit- und Firefox -moz-.

In diesem Artikel habe ich “keyframes” bereits vorgestellt und einige Beispiele gezeigt. Nachdem ich über diesen Artikel gestolpert bin, wollte ich etwas ähnliches nachbauen. Und da ich riesiger Filmfan bin, kam mir die Idee ein animiertes Bluray-Logo zu erstellen. Interessiert?

Okay. Dann mal los.

Weiterlesen →