Kacheln in Onlinedokumentation (Tiles)

Kacheln (englisch Tiles) eignen sich insbesondere für die Startseite einer Onlinedokumentation, um dort eine Art visuelles Inhaltsverzeichnis zu schaffen. Jede Kachel verlinkt auf ein bestimmtes Kapitel. Dabei kann entweder die gesamte Kachel anklickbar sein oder nur ein spezifischer Link auf der Kachel.

Je nach Breite des Browserfensters richtet sich die Anordnung der Kacheln dynamisch nach dem zur Verfügung stehenden Platz.

Beispiel 1: Kacheln mit Schatten

 

Beispiel 2: Kacheln ohne Schatten

 

Implementierung

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Für die Variante mit Schatten aus Beispiel 1 lautet der Code:


.tiles-row {
  column-gap: 30px;
  row-gap: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.tiles-box {
  height: 135px;
  width: 200px;
  align-items: center;
  background-color: rgba(251, 251, 251, 1);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tiles-box::after {
  border-radius: 5px;
  box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.1);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
  z-index: -1;
}
.tiles-box:hover {
  transform: scale(1.10, 1.10);
  z-index: 10;
  opacity: 1;
  transition: 0.2s;  
}
.tiles-box:hover::after {
  opacity: 1;
}

Für die Variante ohne Schatten aus Beispiel 2 lautet der Code:


.tiles-row {
  column-gap: 30px;
  row-gap: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.tiles-box {
  height: 135px;
  width: 200px;
  align-items: center;
  background-color: rgba(252, 252, 252, 1);
  border-radius: 3px;
  border-style: solid;
  border-width: 3px;
  border-color: rgba(0, 102, 153, 0.035);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.tiles-box:hover {
  transform: scale(1.15, 1.15);
  z-index: 10;
  border-color: rgba(0, 102, 153, 0.3);  
  opacity: 1;
  transition: 0.2s;  
}

Schritt 2: Gestalten Sie den Inhalt der einzelnen Kacheln mit den Bordmitteln Ihres Redaktionssystems.

Schließen Sie alle Kacheln, die bei ausreichend Platz in derselben Zeile stehen sollen, in die folgenden beiden HTML-Schnipsel ein:


<div class="tiles-row">

</div>

Schritt 3: Schließen Sie zusätzlich jede einzelne Kachel in folgende beiden HTML-Schnipsel ein:


<div class="tiles-box">

</div>

Kacheln verlinken: Um eine Kachel mit einem bestimmten Topic zu verlinken, haben Sie zwei Möglichkeiten:

> Im einfachsten Fall erstellen Sie auf der Kachel einen Link mit den Bordmitteln Ihres Redaktionssystems. Dies kann ein Link im Text sein, ein verlinktes Symbol, oder beides. In diesem Fall ist später ausschließlich dieser Link anklickbar und nicht die gesamte Kachel.

> Wenn Sie möchten, dass die gesamte Kachel ein aktiver Link wird, müssen Sie die gesamte Kachel in den Link einschließen, was nur in den HTML-Schnipseln geht. In diesem Fall sieht der Code von Schritt 3 wie folgt aus:


<a href="YOUR-LINK-TARGET" style="text-decoration: none">
 <div class="tiles-box">

 </div>
</a>

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.