In diesem Dokument möchte ich eine detaillierte Erklärung der Artikel-Komponente bieten, die in unserer Webanwendung verwendet wird. Diese Komponente besteht aus einem HTML-Teil, der die Struktur der Artikel darstellt, und einem CSS-Teil, der das Layout und das visuelle Design steuert. Zusammen bieten diese beiden Komponenten eine benutzerfreundliche und ansprechende Möglichkeit, Inhalte anzuzeigen.
HTML-Struktur
Die HTML-Struktur der Artikel-Komponente basiert auf einer flexiblen Anordnung von Artikelkarten, die jeweils eine Hintergrundgrafik und einen Overlay-Bereich mit Texten (z.B. Titel, Veröffentlichungsdatum und “Mehr lesen”-Link) enthalten.
Die articles-container-Klasse stellt den Container für alle Artikel dar, der eine Flexbox-Layouttechnik verwendet, um die einzelnen Artikel in einem flexiblen, sich automatisch anpassenden Raster anzuordnen.
<div class="articles-container">
<!-- Artikel 1 -->
<a href="link-to-article1" class="article-block" style="background-image: url('image-url');">
<div class="overlay">
<h3 class="article-title">Artikel Titel 1</h3>
<p class="publish-date">Veröffentlicht am: Januar 1, 2024</p>
<span class="read-more">Mehr lesen</span>
</div>
</a>
<!-- Weitere Artikel folgen hier... -->
</div>
Erklärung der wichtigsten HTML-Elemente:
<div class="articles-container">: Dies ist der Container, der alle Artikel beinhaltet und deren Layout steuert. Er ist für die Flexbox-Anordnung verantwortlich.<a class="article-block">: Jeder Artikel wird als Link (<a>-Tag) dargestellt, wodurch Benutzer auf die jeweilige Detailseite des Artikels weitergeleitet werden können. Diearticle-block-Klasse definiert die visuelle Darstellung des einzelnen Artikels.style="background-image: url('image-url');": Hier wird das Hintergrundbild für jeden Artikel festgelegt. Es sorgt dafür, dass jeder Artikel visuell ansprechend dargestellt wird.<div class="overlay">: Das Overlay enthält den Textbereich (Titel, Veröffentlichungsdatum und den “Mehr lesen”-Button). Es wird über dem Hintergrundbild platziert, um die Informationen lesbar zu machen.<h3 class="article-title">und<p class="publish-date">: Diese Elemente enthalten den Titel und das Veröffentlichungsdatum des Artikels.<span class="read-more">: Dieser Text fungiert als Schaltfläche, die es den Benutzern ermöglicht, auf den Artikel zuzugreifen.
CSS-Styling
Das CSS für diese Komponente sorgt dafür, dass das Layout ansprechend und reaktionsfähig ist. Wir verwenden Flexbox für die Anordnung der Artikel und verschiedene Stile für das visuelle Design.
.articles-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
margin: 50px 0;
}
.article-block {
position: relative;
width: calc(33% - 20px);
height: 250px;
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
color: #ffffff;
text-decoration: none;
}
.article-block:hover {
transform: translateY(-5px);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
text-align: center;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.article-title {
margin: 0 0 10px;
font-size: 18px;
font-weight: bold;
color: black;
background-color: rgba(255, 255, 255, 0.9);
padding: 5px;
border-radius: 5px;
}
.publish-date {
color: yellow;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-size: 14px;
margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.9);
}
.read-more {
display: inline-block;
padding: 8px 15px;
background-color: #0073e6;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
transition: background-color 0.3s;
}
.read-more:hover {
background-color: #005bb5;
}
/* Media Query für mobile Geräte */
@media (max-width: 768px) {
.article-block {
width: 100%; /* Volle Breite auf mobilen Geräten */
}
.articles-container {
justify-content: center; /* Zentrieren der Karten */
}
}
Erklärung der wichtigsten CSS-Regeln:
- .articles-container: Hier wird Flexbox verwendet, um die Artikel in einem flexiblen Layout anzuordnen. Die
gap-Eigenschaft sorgt für Abstände zwischen den Artikelkarten. Mitjustify-content: space-betweenwird der Platz zwischen den Artikeln gleichmäßig verteilt. - .article-block: Dieser Block repräsentiert jeden einzelnen Artikel. Er hat ein Hintergrundbild, das über
background-size: coverundbackground-position: centerangepasst wird, sodass es immer gut aussieht, egal welche Bildgröße verwendet wird. Zudem sorgt diebox-shadow-Eigenschaft für einen dezenten Schatteneffekt. - .overlay: Das Overlay wird absolut am unteren Rand des Artikels positioniert und enthält die Texte wie den Titel und das Veröffentlichungsdatum. Dies sorgt dafür, dass der Text immer sichtbar ist, auch wenn das Hintergrundbild unterschiedlich ist.
- .article-title und .publish-date: Diese Klassen gestalten den Titel und das Veröffentlichungsdatum. Der Titel hat einen weißen Hintergrund mit 50% Transparenz, damit er sich von verschiedenen Hintergrundbildern abhebt. Das Veröffentlichungsdatum ist mit einem gelben Farbton hervorgehoben und hat einen Schatten, um die Lesbarkeit zu verbessern.
- .read-more: Dies ist der “Mehr lesen”-Button, der optisch durch eine blaue Hintergrundfarbe und abgerundete Ecken gestaltet wird. Der Hover-Effekt macht ihn interaktiv, indem er die Hintergrundfarbe ändert.
- @media (max-width: 768px): Diese Medienabfrage sorgt dafür, dass die Artikel auf mobilen Geräten in einer einzigen Spalte angezeigt werden, was die Benutzerfreundlichkeit auf kleineren Bildschirmen verbessert.
Fazit
Diese Artikel-Komponente nutzt HTML und CSS in Kombination, um ein ansprechendes und funktionales Design zu bieten. Die HTML-Struktur sorgt für die semantische Gliederung und den Inhalt der Komponente, während das CSS das visuelle Erscheinungsbild und die Interaktivität steuert. Flexbox und Medienabfragen gewährleisten eine flexible und reaktionsfähige Darstellung auf verschiedenen Bildschirmgrößen.
Falls weitere Anpassungen erforderlich sind, z.B. Änderungen der Farben oder Schriftarten, können diese problemlos im CSS vorgenommen werden, ohne die HTML-Struktur zu beeinflussen.
