CSS Card UI: eine Artikelkarte Schritt für Schritt bauen

In diesem Tutorial zeige ich dir, wie du eine Karte baust, im Englischen „card“ genannt. Eine Karte zeigt dem Leser den Anriss eines Artikels samt Bild und lädt ihn ein, den Beitrag anzuklicken und zu lesen. Gebaut wird sie allein mit HTML und CSS. Dabei wollte ich eine selten genutzte CSS-Eigenschaft einsetzen, filter, mit der sich ein Bild nachbearbeiten lässt, eine Transition sorgt zusätzlich für Bewegung.

See the Pen
Card UI CSS by Damien Flandrin (@dam62500)
on CodePen.

Schritt 1 – Die Struktur skizzieren und das HTML aufsetzen

Bevor du das HTML schreibst, überlege dir zuerst die Struktur. Wenn ein Entwurf vorliegt, nimm dir die Zeit, den Aufbau deiner Seite oder deiner CSS-Module durchzudenken. Skizziere ihn ruhig auf einem Blatt Papier. Gut strukturiertes HTML macht dir die weitere Arbeit deutlich leichter!

<div class="card">
    <a href="https://www.gekkode.com/de/blog/post/#">
        <!-- Image à la une -->
        <div class="card-image"><img src="https://www.gekkode.com/wp-content/uploads/2021/08/orange.jpeg" alt="Orange" /></div>
        <!-- Fin de l'image à la une -->

<!-- Corp de notre carte -->
        <div class="card-body">

<!-- Date de publication de l'article-->
            <div class="card-date">
                <time>20 Novembre 1992</time>
            </div>

<!-- Titre de l'article -->
            <div class="card-title">
                <h3>Lorem Ipsum</h3>
            </div>
            <!-- Extrait de l'article -->
            <div class="card-excerpt">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus autem consectetur voluptate facere at, omnis ab optio placeat officiis! Animi modi harum enim quia veniam consectetur unde autem inventore.</p>
            </div>

</div>
        <!-- Fin du corp de notre carte -->
    </a>
</div>

Schritt 2 – Die Grundregeln festlegen und das Modul stylen

Sobald das HTML-Gerüst steht, geht es ans CSS. Dafür nehmen wir uns jeden Teil der Skizze einzeln vor.

Dieses Stylesheet lässt sich genauso in SCSS schreiben, mit einer Variablen für die Schattenfarbe und Verschachtelung für den Hover-Zustand. Dann brauchst du allerdings einen Kompilierschritt: siehe SCSS in einem Webpack-Build kompilieren.

.card

.card {
  width: 400px; /*1*/
  margin: 0px auto; /*2*/
  background-color: white; /*3*/
  box-shadow: 0px 5px 20px #999; /*4*/
}
.card a { /*5*/
  color: #333;
  text-decoration: none;
}
.card:hover .card-image img { /*6*/
  width: 160%;
  filter: grayscale(0);
}

1. Wir geben der Karte eine feste Breite.
2. Zentriert wird sie über margin: 0px auto; achte darauf, dass sie auf display: block steht.
3. Sie wird weiß, der body hat bei mir standardmäßig einen etwas dunkleren Hintergrund, damit sich die Karte klar davon abhebt.
4. Ein leichter Schatten lässt sie gegenüber der Seite hervortreten.
5. Wir legen den Grundstil der Links innerhalb des Moduls .card fest.
6. Für die Bewegung sagen wir dem Browser: Sobald der Besucher die Karte überfährt, wächst das Bild über width und bekommt seine Farben zurück, denn in .card-image liegt standardmäßig ein Schwarz-Weiß-Filter darauf.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Zentriermethode abhängig von der Bildgröße */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Transition */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. Wir legen die Höhe des Blocks fest, der das Bild aufnimmt. Diese feste Größe hält alle Bilder auf demselben Maß, falls mehrere Karten nebeneinanderstehen.
2. Das Element wird auf relative gesetzt, denn es enthält Kinder mit absolute.
3. Alles, was über den Block hinausragt, wird abgeschnitten.
4. Die Bildbreite setzen wir auf 100%. Du kannst den Standardwert nach Bedarf erhöhen, verwende aber keine Bilder unter 400px und halte das Seitenverhältnis ein, sonst bleiben weiße Ränder.
5. Diese Technik zentriert ein Bild relativ zu seiner eigenen Größe und zu seinem Elternelement. Der Ursprung der Darstellung liegt zunächst in der Mitte von .card-image, dann verschiebt transform das Bild um die Hälfte seiner eigenen Maße, sodass es genau in der Mitte von .card-image sitzt.
6. Die Eigenschaft filter legt einen Filter über ein Bild. Hier liegt standardmäßig ein Schwarz-Weiß-Filter grayscale darauf, damit die Farben zurückkehren, sobald der Nutzer die Karte überfährt.
7. Für die Bewegung bekommen die beiden Eigenschaften filter und width eine Transition von 300 ms.

.card-body

.card-body {
    text-align:center;  /*1*/
  padding: 15px 20px; /*2*/
  box-sizing: border-box; /*3*/
}

1. Wir richten alle Elemente innerhalb von .card-body mittig aus.
2. Damit die Elemente nicht am Rand kleben, geben wir dem Block über padding Innenabstand.
3. Falls es nicht ohnehin schon gesetzt ist, kommt box-sizing mit dem Wert border-box dazu, damit das Padding in die Blockbreite eingerechnet wird und nicht obendrauf kommt.

Die Typografie

.card-date {
  font-family: 'Source Sans Pro', sans-serif;
}

.card-title, .card-excerpt {
   font-family: 'Playfair Display', serif;
}

.card-date, .card-title {
  text-align:center;
  text-transform:uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}

Wie du siehst, legen wir hier den Textstil fest: Source Sans Pro als Sans-Serif, Playfair Display als Serif, dazu ein paar Feinheiten der Formatierung.