Meistkommentierte Artikel
[CSS3] Eine animierte HTTP-Fehler-404 Seite
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.
Dateien erstellen und Elemente definieren
Beginnen wir mit dem anlegen der HTML- und CSS-Datei. Legt mit eurem Editor die entsprechenden Dateien an und benennt sie am besten 404.html und 404.css. Nun bindet ihr das Stylesheet in das HTML Dokument in den Head-Bereich ein
<link rel="stylesheet" href="404.css" type="text/css" media="screen" />
Der Google Web Font „VT323“ wird ebenfalls durch einen Eintrag in den Head-Bereich geladen
<link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
Und wo wir gerade im HTML Dokument sind, legen wir auch gleich die Struktur an. Wir benötigen zwei Div-Container, die wir später mit Inhalt füllen werden:
<body> <div id="bg_text"> </div> <div id="text"> </div> </body>
Wechseln wir nun zum Stylesheet. Hier wollen wir erst einmal den radialen Hintergrundfarbverlauf definieren. Kleiner Tipp: Microsoft hat eine IE 10 Test-Seite eingerichtet, die unter anderem die Möglichkeit bietet radiale Farbverläufe in Echtzeit zu erstellen. Der für alle gängigen Browser ausgegebene Code kann dann ganz einfach kopiert und weitergenutzt werden. Hier geht’s lang.
Ich habe einen radialen Farbverlauf von rot zu gelb gewählt.
background-image: #FFEF0D; background-image: -ms-radial-gradient(center, circle cover, #FFEF0D 0%, #FF0000 100%); background-image: -moz-radial-gradient(center, circle cover, #FFEF0D 0%, #FF0000 100%); background-image: -o-radial-gradient(center, circle cover, #FFEF0D 0%, #FF0000 100%); background-image: -webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #FFEF0D), color-stop(1, #FF0000)); background-image: -webkit-radial-gradient(center, circle cover, #FFEF0D 0%, #FF0000 100%); background-image: radial-gradient(center, circle cover, #FFEF0D 0%, #FF0000 100%);
Den Hintergrund fixieren wir:
background-attachment: fixed !important;
und binden unseren Google Web Font als Standardschriftart ein:
font-family: 'VT323', cursive; font-size: 24px;
Nun legen wir die beiden Div-IDs an. Beide sollen sowohl horizontal wie auch vertikal auf der Seite zentriert sein. Das erreichen wir, indem wir für beide Container eine feste Breite (width) und Höhe (height) definieren, die Position auf 50% oben (top) und 50% links (left) setzen sowie die Außenabstände jeweils um die Hälfte der Breite (margin-left) und Höhe (margin-top) reduzieren.
#bg_text {
position: absolute;
z-index: -1;
width: 500px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -250px;
text-align: center;
font-size: 120px;
font-weight: bold;
color: yellow;
text-transform: uppercase;
text-shadow: 3px 3px 10px #333;
}
#text {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
text-align: center;
line-height: 0.8;
}
Den Schriftzug „Fehler 404“ setzen wir per z-index in den Hintergrund und formatieren ihn mit Großbuchstaben (text-transform) und der Farbe gelb (color). Außerdem fügen wir noch einen Text-Schatten (text-shadow) hinzu. Da der Web-Font relativ große Außenabstände hat, definieren wir eine Zeilenhöhe (line-height) von 0.8, um den Text enger zusammenzuhalten.
Für den Fehler-Schriftzug fügen wir, exklusiv für Webkit-Browser, eine Spiegelung mit Hintergrundfarbverlauf in die Transparenz hinzu:
#bg_text {
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0,0,0,0) 45%,rgba(255,255,255,1) 100%);
}
Den eigentlichen Text der Fehler-Seite werden wir in mehreren Absätzen einfügen. Als Grundeinstellung für alle Absätze legen wir folgendes fest:
#text p {
position: relative;
margin: 0 auto;
padding: 0;
}
Der Text auf unserer 404-Seite wird aus insgesamt fünf Absätzen bestehen. Damit wir jeden Absatz einzeln formatieren und animieren können, müssen wir jeweils eine eigene Klasse dafür definieren.
#text .herzlichen {
font-size: 60px;
text-transform: uppercase;
}
#text .versteckt {
font-size: 40px;
font-weight: bold;
}
#text .info {
margin-top: 10px;
}
#text .zurueck {
margin-top: 10px;
}
#text .link {
margin-top: 20px;
font-size: 20px;
}
Nun wieder zum HTML-Dokument, in das wir die Absätze mit entsprechendem Inhalt einbinden:
<body> <div id="bg_text">Fehler 404</div> <div id="text"> <p class="herzlichen">Herzlichen Glückwunsch</p> <p class="versteckt">Du hast eine versteckte Seite gefunden.</p> <p class="info">Kennst du den HTTP-Fehler 404? Das ist einer. Die von dir aufgerufene Seite existiert nicht mehr. Wahrscheinlich habe ich mal wieder vergessen einen Link anzupassen.</p> <p class="zurueck">Zurück geht's über folgenden Link:</p> <p class="link"><a href="http://www.olivergast.de">zurück zu olivergast.de</a></p> </div> </body>
Animationen hinzufügen
Wie erwähnt, wollen wir für jeden Absatz eine eigene Animation erstellen. Fangen wir mit dem Hintergrundschriftzug an, welcher dauerhaft pulsieren soll. Das erreichen wir, indem wir die Sichtbarkeit mit opacity von 20 auf 100% verändern.
@-webkit-keyframes bg_text {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
@-moz-keyframes bg_text {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
@keyframes bg_text {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
Die einzelnen Text-Absätze sollen in das Bild „fahren“. Dazu positionieren wir die Absätze zunächst außerhalb des eigentlichen Divs und verschieben sie dann auf ihre Endposition
@-webkit-keyframes herzlichen {
from { top: -120px; }
to { top: 0; }
}
@-moz-keyframes herzlichen {
from { top: -120px; }
to { top: 0; }
}
@keyframes herzlichen {
from { top: -120px; }
to { top: 0; }
}
Diese Animation, ich habe sie „herzlichen“ genannt, gilt für den obersten Absatz welcher zu Beginn der Animation um 120 Pixel nach oben, außerhalb des Div, positioniert ist. Zum Ende der Animation wird dieser dann auf seine Standardposition verschoben.
Das gleiche richten wir für die weiteren Absätze ein:
@-webkit-keyframes versteckt {
from { left: 600px; }
to { left: 0; }
}
@-moz-keyframes versteckt {
from { left: 600px; }
to { left: 0; }
}
@keyframes versteckt {
from { left: 600px; }
to { left: 0; }
}
@-webkit-keyframes zurueck {
from { left: -800px; }
to { left: 0; }
}
@-moz-keyframes zurueck {
from { left: -800px; }
to { left: 0; }
}
@keyframes zurueck {
from { left: -800px; }
to { left: 0; }
}
Diese beiden Absätze werden von der Seite in das Div verschoben.
Damit die zu Beginn nach außerhalb des Divs verschobenen Texte nicht zu sehen sind, müssen wir für #text noch folgendes hinzufügen:
#text {
overflow: hidden
}
Ansonsten würde der Text außerhalb des Divs angezeigt werden, und nicht erst dann, wenn er in das Div verschoben wird. Das würde natürlich den gesamten Effekt hinfällig machen.
Der „zurück“-Link soll erst dann eingeblendet werden, wenn die Text-Absätze endgültig positioniert sind. Da kommt wieder opacity zum Einsatz:
@-webkit-keyframes link {
0% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes link {
0% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes link {
0% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
Wie ihr seht beginnt die Animation erst bei 90% der Animationszeit. Diese werden wir gleich mit 6 Sekunden definieren. Das bedeutet, dass der Link 5,4 Sekunden nicht zu sehen ist und erst dann innerhalb von 0,6 Sekunden eingeblendet wird.
Die angelegten Animationen müssen wir nun noch bei den entsprechenden Elementen einbinden:
#bg_text {
-webkit-animation: bg_text 2s linear infinite;
-moz-animation: bg_text 2s linear infinite;
animation: bg_text 2s linear inifinite;
}
#text .herzlichen {
-webkit-animation: herzlichen 2s linear;
-moz-animation: herzlichen 2s linear;
animation: herzlichen 2s linear;
}
#text .versteckt {
-webkit-animation: versteckt 3s linear;
-moz-animation: versteckt 3s linear;
animation: versteckt 3s linear;
}
#text .info, .zurueck {
-webkit-animation: zurueck 4s linear;
-moz-animation: zurueck 4s linear;
animation: zurueck 4s linear;
}
#text .link {
-webkit-animation: link 6s linear;
-moz-animation: link 6s linear;
animation: link 6s linear;
}
Alle Animationen werden einmalig ausgeführt, lediglich der pulsierende Fehler-404-Schriftzug wird unendlich wiederholt (infinite).
WordPress 404-Fehlerseite umgehen
WordPress hält für 404-Fehler ein eigenes Template bereit. Schaut mal in euer Theme-Verzeichnis nach einer Datei mit dem Namen 404.php. Wer statt der WordPress-Fehlerseite eine eigene HTML-Datei nutzen möchte, muss in seinem Theme eine kleine Änderung vornehmen.
Die Anleitung dazu ist nicht mein geistiges Eigentum, sondern ich habe dies hier gefunden (vielen Dank dafür an die Autorin):
Tragt folgenden Code-Schnippsel in die header.php eures WordPress-Themes, ganz oben als erste Zeile (oberhalb von “DOCTYPE…”) ein:
<?php if( is_404( )) { header("/404.html: /",TRUE,301); } ?>
Den Pfad zu eurer 404.html müsst ihr natürlich noch anpassen. Die Angabe geht dabei vom Stamm-Verzeichnis aus.
So, das war’s auch schon. Damit ist unsere animierte HTTP-Fehler-404 Seite fertig und WordPress wird entsprechende Fehler nun auf diese Datei umleiten.
Wer keine Lust auf nachbauen hat, kann sich die Dateien auch hier herunterladen:
Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:
