Retro-Homepage: Einmal 1998, bitte

vom 25.06.2019 von Oliver Misch

Das Spaßprojekt zum Abschluss: eine Homepage die aussieht als käme sie frisch vom Modem, gebaut mit den sauberen Techniken von heute. Also exakt das Rezept nach dem diese Website hier entstanden ist. Werfen wir einen Blick in die Trickkiste.

Zutat 1: Die Farbwelt

CSS: die 98er-Palette als Variablen

:root {
    --desktop: #008080;     /* Teal-Schreibtisch */
    --fenster: #C0C0C0;     /* Fenster-Grau */
    --titel: #000082;       /* Titelleisten-Blau */
}
body {
    background: var(--desktop);
    font-family: 'Times New Roman', serif;
}

Teal, Grau, Marineblau, Systemschriften: mehr braucht die Grundstimmung nicht. Als Variablen angelegt, lässt sich die Epoche später mit drei Handgriffen wechselnn.

Zutat 2: Das Fenster mit 3D-Kante

.fenster {
    background: var(--fenster);
    border: 2px solid;
    border-color: #FFFFFF #404040 #404040 #FFFFFF;
}
.titelleiste {
    background: linear-gradient(90deg, var(--titel), #1074C6);
    color: white;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 3px 6px;
}

Der ganze Plastik-Charme steckt in einem Trick: Die vier Rahmenseiten bekommen unterschiedliche Farben (oben und links hell, unten und rechts dunkel), fertig ist die erhabene 3D-Kante. Umgekehrt eingefärbt wirkt die Fläche eingedrückt, genau so funktionieren gedrückte Buttons. Kein Bild, keine Grafik, nur border-color.

Zutat 3: Blinken, aber mit Anstand

@keyframes blinken { 50% { opacity: 0; } }
.neu {
    background: red; color: white;
    font: bold 11px Arial;
    padding: 0 5px;
    animation: blinken 1.1s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .neu { animation: none; }
}

Das blink-Element ist tot, seine Seele lebt in fünf Zeilen keyframes weiter, diesmal mit dem Abschalter für alle die reduzierte Bewegung eingestellt haben. So blinkt man verantwortungsvolll.

Zutat 4: Die Deko-Klassiker

Besucherzähler: schwarzer Kasten, grüne Courier-Ziffern, und ganz wichtig: ehrlich als Deko beschriften wenn er nichts zählt. Nostalgie ja, Schwindel nein.
Trennlinien: das gute alte <hr>, gern großzügig verteilt.
Badges: kleine umrandete Kästchen ("HTML5 ✓", "NO FRAMES!") im Fuß, die Ahnengalerie dazu steht im Retro-Web.
Under Construction: ein gelb-schwarz gestreifter Rahmen per repeating-linear-gradient, Baustellenschild ohne GIF.

Die eiserne Regel

Alt aussehen, modern gebaut sein: semantisches HTML unter der Kulisse, responsive auf dem Handy (die Fenster stapeln sich dann einfach), Kontraste geprüft, Tastatur bedienbar. Das Konzept in voller Länge, inklusive der Frage warum das mehr ist als ein Gag, behandelt die Seite Eine Webseite wie 1998 bauen.

Weiter im Fahrplan: HTML-E-Mail · Zurück zur Tutorial-Übersicht