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.

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.

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.

Mit „keyframes“ lassen sich tolle Sachen machen. Die Funktionsweise sowie einige Beispiele habe ich in diesem Artikel demonstriert. So habt ihr unter anderem die Möglichkeit den Hintergrund in einer bestimmten Zeitspanne in festgelegten Schritten zu verschieben. Und so kam mir die Idee einen Timer zu erstellen und mit „keyframes“ zu animieren.

Der fertige Timer, der die Sekunden bis zu einer Minute hochzählt, sieht dann so aus

Interessiert?

Hier kommt etwas für die Animationsfreunde unter euch. Mit dem CSS3-Befehl „keyframes“ steht euch ein mächtiges Werkzeug zur Seite, mit dem ihr anspruchsvolle und umfangreiche Animationen erstellen könnt. Aber gleich der Tritt auf die Spaßbremse: funktioniert aktuell nur mit Webkit-Browsern ala Google Chrome oder Apple Safari.

In diesem Artikel habe ich die CSS3-Eigenschaft „transition“ vorgestellt, mit der HTML-Elemente animiert werden können. Das funktioniert jedoch nur im Zusammenspiel mit Pseudo-Elementen, wie beispielsweise :hover oder :active, und die Möglichkeiten sind doch sehr begrenzt. Mit „keyframes“ erstellt ihr selbstablaufende Animationen mit fast unzähligen Möglichkeiten.

Auf der Suche nach einer Bildergalerie für deine Webseite? Dann hab ich hier vielleicht das was du suchst. Ich zeige hier Schritt für Schritt, wie ihr eine ansprechende Bildergalerie mit jeder Menge CSS3-Schnickschnack erstellen könnt. So werden wir folgende CSS3-Eigenschaften nutzen:

• transitions
• transform
• border-radius
• box-shadow
• Pseudoklassen

Habt ihr Lust?

Wie der Name schon vermuten lässt, versieht die Eigenschaft „text-shadow“ Text mit einem Schlagschatten, „box-shadow“ dagegen, stellt Blockelemente mit einem Schlagschatten dar. Mit diesen neuen CSS3-Eigenschaften lassen sich viele lustige Dinge darstellen. Aber seht selbst…

Wollte man bisher Block-Elemente abrunden, musste man entweder zu Javascript greifen oder per background-Eigenschaft eine Bilddatei einbinden. Mit CSS3 kann man sich dieses Gewurschtel sparen und auf die Eigenschaft „border-radius“ zurückgreifen. Die Möglichkeiten sind vielfältig, sogar Kreise sind mit entsprechendem Code darstellbar. Aber dazu später mehr.

Ich persönliche mag abgerundete Ecken. Es sieht einfach modern und „rund“ aus. Ha ha! Wortwitz verstanden?