SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] Eine animierte HTTP-Fehler-404 Seite

    1. September 2011 0 Webdesign css | demo | html | internet | tutorial

    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:

    Download starten

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast