Eine moderne Timeline mit CSS erstellen – Tutorial

Vor einiger Zeit ist unser Magazin ein Jahr alt geworden. Im Zuge eines kleinen Gewinnspiels und der damit zusammenhängenden Social-Media-Kampagne habe ich eine Landingpage gebaut, die ein paar Infos über das erste Jahr mit clikr gegeben hat. Dafür habe ich auch eine kleine Timeline nur mit HTML und CSS erstellt.

Meine Ansprüche an die Timeline:

  • die wichtigsten Ereignisse sollen möglichst übersichtlich und automatisch in einer Zeitleiste sortiert werden
  • die Zeitleiste soll vertikal verlaufen und die Ereignisse abwechselnd rechts und links darstellen (auf mobilen Geräten soll sich alles untereinander anordnen)
  • ich wollte möglichst wenig CSS schreiben
Die fertige Timeline auf der Landingpage "Ein Jahr clikr.de"
Die fertige Timeline auf der Landingpage „Ein Jahr clikr.de“

1. Das HTML-Markup

Die Ereignisse sind immer gleich aufgebaut. Es gibt einen Ereignisnamen, das passende Datum und eine kurze Beschreibung dazu. Prinzipiell könntest du jetzt also für jedes Ereignis einen Container bauen, die einzelnen Daten dort hineinschreiben und fertig! Naja… nicht ganz. Wie oben zu sehen, sollen die Ereignisse ja rechts und dann wieder links von der Zeitleiste ausgespuckt werden. Die Lösung: Pseudoklassen! Doch um diese nutzen zu können musst du dein HTML erst einmal vorbereiten. Wir benötigen ein Eltern-Element (die Timeline) und dann die “Kinder” von unserer Zeitleiste (die Ereignisse). Ich habe mich in diesem Fall für eine Liste und die Listenpunkte als Kinderelemente entschieden. Mit ein wenig Zauberei drumherum sieht das Ganze dann so aus:

See the Pen by Richard Karsten (@richard_karsten) on CodePen.24053

Die Ereignisse besitzen jeweils ein Icon als eine Art “Anker” in der Zeitleiste. Diese habe ich einfach mit dem Iconfont „Font Awesome“ eingebunden.

2. Das CSS

Kommen wir zum spannenden Teil! Wie oben schon erwähnt geschieht die Style-Magie mit der Hilfe einer Pseudoclasse. Wir wollen jeden zweiten Listenpunkt, also jedes zweite Ereignis mit einem geringfügig anderem Style versehen. Du könntest jetzt jedem zweiten Element eine Klasse im HTML zuweisen und jedes zweite Ereignis mit der Hilfe deines CSS-Codes so nach rechts verschieben. Aber das wäre ja irgendwie unschön! Nun kommt die Pseudoklasse ins Spiel:

&:nth-child(2n) {
  .event {
    float: right;
  }
}

Geben wir der Liste diese Pseudoklasse mit, wird jeder zweite Listenpunkt und damit jedes zweite Ereignis in der Timeline rechts geflutet. Keine zusätzlichen Klassen. Kein „Gefuddel“!

Die Timeline schick machen

Natürlich sieht die Timeline jetzt noch nach nichts aus. Es fehlt die Linie in der Mitte. Die Icons sind noch nicht platziert. Die erzeugen wir ganz einfach über ein Pseudo-Element. Pseudoelemente existieren nicht in deinem HTML-Markup, können aber mit der Hilfe von (S)CSS ganz einfach vor oder hinter einem existierenden Element “simuliert” werden. Das sieht dann so aus:

.timeline{
  &:before {
   content: ‘’;
   position: absolute;
   display: block;
   top: 0;
   left: 35px;
   width: 2px;
   height: 100%;
   background: $white;
     @media screen and (min-width: 400px) {
       left: 50%;
     }
   }
 }

Nun positionierst du noch die Icons auf der Timeline und gestaltest alles so, wie es dir am besten gefällt und fertig ist die moderne Timeline aus HTML und (S)CSS.

Das fertige CSS

See the Pen by Richard Karsten (@richard_karsten) on CodePen.24053

Das Ergebnis

Viel war das jetzt nicht, oder? Doch das Ergebnis kann sich sehen lassen…

See the Pen by Richard Karsten (@richard_karsten) on CodePen.24053

Richard Karsten
Richard Karsten
  • Kauf dem Autor einen Kaffee :-)

Moin! Ich bin Richard, VWL-Student in Halle, Gründer von webdasein und clikr. Ich mag schicke Weboberflächen, Pixel, noch mehr Pixel und SCSS.

Veröffentlich unter EntwicklungVerschlagwortet mit , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.