Erfahren Sie, wie Sie diese attraktive Komponente erstellen und damit Ihren Webdesigns eine professionelle Note verleihen.

Obwohl Kartenkomponenten einfach erscheinen mögen, müssen bei der Erstellung bestimmte Kriterien berücksichtigt werden. Zunächst werden Sie auf verschiedene Arten von Kartenkomponenten stoßen und als Webentwickler müssen Sie sicherstellen, dass Ihre Schnittstelle zugänglich ist.

Erfahren Sie, wie Sie Kartenkomponenten mit HTML und CSS erstellen und erfahren Sie mehr über Überlegungen zur Barrierefreiheit und Anpassung.

HTML-Struktur für Kartenkomponenten

Der Aufbau einer Karte umfasst den Kartenbehälter, seine Kopfzeile, sein Bild und seinen Hauptteil sowie eine optionale Kartenfußzeile.

Sie erstellen drei einfache Kartenkomponenten: Inhalts-, Produkt- und Profilkarten. Dies sind einige der häufigsten Kartentypen, die im Internet zu finden sind.

Erstellen Sie zunächst ein Container-Div und verschachteln Sie drei weitere Div-Tags mit Klassenattributen für jede darin enthaltene Karte sowie entsprechende untergeordnete Elemente für jede der drei Karten. Sie sollten Elemente verwenden, die alle Teile der Anatomie der Karte berücksichtigen. Beispielsweise verfügt die Inhaltskarte über ein Bild-Tag für Medien, ein h3-Tag für den Titel und ein p-Tag für Text.

instagram viewer 

<divKlasse=„Kartenbehälter“>
 Inhaltskarte 
<divKlasse=„Inhaltskarte“>
<Bildsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt=„Ein Arbeitsplatz mit einem Tastatur-Notebook, einer Tasse Kaffee und einem Ohrhörer“>
<h3>Titelh3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Anzeige
 exceluri explicabo molestiae natus magnam rem...P>
<Ahref="#">WeiterlesenA>
div>
 Produktkarte 
<divKlasse=„Produktkarte“>
<Bildsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt=„Kopfhörer auf gelbem Hintergrund“>
<h3>Produktnameh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, Voluptatibus.P>
<Ahref="#"><Taste>in den Warenkorb legenTaste>A>
div>
 Profilkarte 
<divKlasse=„Profilkarte“>
<Bildsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt=„Ein weißer Mann trägt ein schwarzes Hemd mit Knöpfen“>
<h3>John Doeh3>
<P>Web-EntwicklerP>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?P>
<Ahref="#"Klasse=„Profil-Link“>Profil anzeigenA>
div>
div>

So sollte dies standardmäßig in Ihrem Browser aussehen, bevor Sie einen benutzerdefinierten Stil anwenden:

Wenn Sie weitere Karten erstellen oder mehr Inhalte in eine einzelne Karte einbinden möchten, tun Sie dies, bevor Sie fortfahren.

CSS-Styling für Kartenkomponenten

Mithilfe von CSS können Sie jede Karte individuell gestalten, um sie optisch ansprechend zu gestalten. Verwenden Sie den Universalwähler zurücksetzen Ränder, Polsterungen, und positionieren mit Kartongröße. Gestalten Sie den Behälter dann, indem Sie ihm Polsterung verleihen, um etwas Platz zu schaffen.

​​​​​​* {
Rand: 0;
Polsterung: 0;
Kartongröße: Grenzfeld;
}
.Kartenbehälter {
Polsterung: 20px;
}

Als nächstes verwenden Sie einen Mehrfachselektor für alle Karten, geben ihm einen Rand, um um jede Karte Platz zu schaffen, und legen den fest Anzeige Und Flex-Richtung für das Layout. Legen Sie außerdem einen Rahmen fest, um die Karten zu definieren, einen Rahmenradius für einige Kurven und eine maximale Breite für die Reaktionsfähigkeit.

.content-card,
.Produktkarte,
.Profilkarte {
Rand: 20px;
Anzeige: biegen;
Flex-Richtung: Spalte;
Grenze: 2pxsolide#ccc;
Grenzradius: 7px;
maximale Breite: 250px;
}

Konzentrieren Sie sich nun auf jede Karte, beginnend mit der Inhaltskarte, und geben Sie ihr eine Hintergrundfarbe und Polsterung. Fügen Sie Nachkommenselektoren für die Elemente in der Inhaltskarte hinzu.

Gestalten Sie das Bild mit maximale Breite und Grenzradius. Legen Sie den Rand, die Schriftfamilie und die Schriftgröße für h3 fest. Entfernen Sie für das Anker-Tag die Textdekoration und legen Sie die Farbe, den oberen Rand und die Schriftgröße fest.

.content-card {
Hintergrund: #E9724C;
Polsterung: 10px;
}
.content-cardBild {
maximale Breite: 100%;
Grenzradius: 5px;
}


.content-cardh3 {
Rand: 10px 0;
Schriftfamilie: Monoraum;
Schriftgröße: 1.5rem;
}
.content-cardA {
Textdekoration: keiner;
Farbe: #6f2ed8;
Rand:12px 0 7px 0;
Schriftgröße: 1rem;
}

Aufgrund der zusätzlichen Elemente erfordert die Produktkarte mehr Stil. Erstellen Sie Selektoren für jedes untergeordnete Element und formatieren Sie sie entsprechend.

Der Taste Das Element enthält die meisten Stilattribute, um den Call-to-Action-Effekt zu erzielen. Richten Sie nur die Schaltfläche nach rechts aus, indem Sie im Ankerselektor „align-self“ auf „flex-end“ setzen.

.ProduktkarteBild {
Grenzradius: 5px 5px 0 0;
Breite: 100%;
}
.Produktkarteh3 {
Rand: 5px 10px;
Schriftfamilie: Monoraum;
Schriftgröße: 1.5rem;
}


.ProduktkarteP {
Rand: 5px 10px;
Schriftfamilie: Georgia, 'MalNeurömisch', Mal, Serife;
}


.ProduktkarteA {
align-self: Flex-Ende;
}
.ProduktkarteTaste {
Breite: 100px;
Höhe: 30px;
Rand: 10px;
Grenze: 1pxsolide#8f3642;
Grenzradius: 4px;
Hintergrundfarbe: #FFC857;
Schriftstärke: 700;
Mauszeiger: Zeiger;
}

Gestalten Sie abschließend die Profilkarte. Stellen Sie den Randradius oben rechts und oben links im Bild so ein, dass er zum Container passt. Passen Sie die Bildgröße und -anpassung bei Bedarf an. Verwenden Sie zur Definition von Texten mindestens zwei Schriftarten und Komplementärfarben. Außerdem können Sie das umsetzbare Element erstellen – d. h. das Anker-Tag – stechen Sie hervor mit einem Grenze.

.ProfilkarteBild {
Grenzradius: 5px 5px 0 0;
Höhe: 200px;
Objektgerecht: Abdeckung;
}
.Profilkarteh3 {
Rand: 10px;
Schriftfamilie: Monoraum;
Schriftgröße: 1.5rem;
}


.ProfilkarteP:erster Typ {
Rand:0px 10px;
Schriftfamilie: 'MalNeurömisch', Mal, Serife;
Farbe: Kornblumenblau;
}


.ProfilkarteP:letzter Typ {
Rand: 5px 10px;
Schriftgröße: 0.9rem;
}
.ProfilkarteA {
Textdekoration: keiner;
Rand: 5px 10px 10px 10px;
Polsterung: 5px 15px;
align-self: Center;
Grenze: 1pxsolideKornblumenblau;
Grenzradius: 15px;
Farbe: Schwarz;
Schriftfamilie: Monoraum;
Schriftstärke: 500;
}

Nach dem Styling sollten Ihre Karten so aussehen:

Kartenlayout und Flexibilität

Reaktionsfähigkeit ist von entscheidender Bedeutung, um ein nahtloses Erlebnis mit der Benutzeroberfläche auf allen Geräten zu ermöglichen. Du kannst Verwenden Sie entweder CSS Flexbox oder CSS Grid für das Layout. Endlich können Sie es Verwenden Sie Medienabfragen für die Reaktionsfähigkeit.

Verwenden von CSS Flexbox

Zuerst, Fügen Sie ein Anzeigeattribut hinzu und setzen Sie es auf Flex auf Ihrem Kartenbehälter-Selektor. Wenden Sie Flex-Wrap an und stellen Sie es auf „Wrap“ ein, damit die Karten auf einer kleinen Bildschirmgröße umwickelt werden können.

Stellen Sie außerdem die ein align-items Und Rechtfertigungsinhalt Immobilien nach Ihren Wünschen.

​​​​​​.Kartenbehälter {
Polsterung: 20px;
Anzeige: biegen;
Flexfolie: wickeln;
align-items: Center;
Rechtfertigungsinhalt: raumgleichmäßig;
}

Die Seite sollte so aussehen:

Damit ist die Reaktionsfähigkeit auf größeren Bildschirmgrößen abgeschlossen. Für einen kleineren Darstellungsbereich, wie z. B. ein Mobiltelefon, können Sie eine Medienabfrageregel verwenden und die maximale Breite festlegen.

Bestimmen Sie innerhalb der Medienabfrage, welche Elemente Sie ändern möchten. In diesem Fall ändert sich der Kartenbehälter.

Stellen Sie die ein Flex-Richtung Zu Spalte, sodass die Karten vertikal gestapelt werden. Um die Karten horizontal in der Mitte des Bildschirms anzuzeigen, legen Sie die Eigenschaften „justify-content“ und „align-items“ auf „center“ fest:

@Medien Bildschirm Und (maximale Breite:480px) {
.Kartenbehälter {
Flex-Richtung: Spalte;
Rechtfertigungsinhalt: Center;
align-items: Center;
 }
}

Um den Effekt der Medienabfrage zu sehen, überprüfen Sie den Code CodePen.

Verwenden von CSS Grid

Stellen Sie zunächst die Anzeige des Kartencontainers auf Raster ein. Verwenden Rastervorlagenspalten Damit die Karten ihre Breite automatisch anpassen können. Benutze einen Gitterlücke für den Abstand zwischen den Karten. Verwenden rechtfertigen-Elemente um die Karten zu zentrieren.

.Kartenbehälter {
Polsterung: 20px;
Anzeige: Netz;
Rastervorlagenspalten: wiederholen(automatisch anpassen, Minimal Maximal(300px, 1fr));
Gitterlücke: 20px;
rechtfertigen-Elemente: Center;
}

Die Seite sollte so aussehen:

Wenden Sie für mobile Bildschirme eine Medienabfrage an. Ändern Sie innerhalb der Abfrage das Rasterlayout für kleinere Ansichtsfenster. Satz Rastervorlagenspalten Zu 1 Fr damit jede Karte die volle Breite einnimmt. Auch Einstellung rechtfertigen-Elemente Und align-items Mit den Eigenschaften „Zentrieren“ werden die Karten sowohl horizontal als auch vertikal zentriert.

@Medien Bildschirm Und (maximale Breite:480px) {
.Kartenbehälter {
Rastervorlagenspalten: 1fr;
rechtfertigen-Elemente: Center;
align-items: Center;
 }
}

Von Kombination von CSS Grid und Medienabfragen, werden die Karten auf größeren Bildschirmen eingewickelt und auf kleineren Bildschirmen vertikal gestapelt, wodurch ein reaktionsfähiges Kartenlayout erreicht wird. Um den Effekt der Medienabfrage zu sehen, überprüfen Sie den Code CodePen.

Überlegungen zur Barrierefreiheit von Kartenkomponenten

Es ist wichtig sicherzustellen, dass die von Ihnen erstellten Kartenkomponenten für alle Benutzer zugänglich sind, auch für Benutzer mit Behinderungen. Hier sind einige wichtige Überlegungen, um Kartenkomponenten leichter zugänglich zu machen:

  • Semantisches HTML
  • Tastaturnavigation
  • Konzentrieren Sie sich auf Stile
  • ARIA-Bezeichnungen und Rollen
  • Alt-Text
  • Richtige Überschriftenstruktur
  • Farbkontrast

Durch die Umsetzung dieser Überlegungen zur Barrierefreiheit können Webentwickler sicherstellen, dass Kartenkomponenten inklusive sind.

Anpassung und weitere Erkundung

Sie können Ihre Kartenkomponente noch weiter anpassen. Hier sind einige Ideen, die Sie sich ansehen können:

  • Übergänge und Animationen
  • Bildstile
  • Hintergrund- und Farbschemata
  • Randstile
  • Interaktive Elemente

Es gibt viele verschiedene Möglichkeiten, Ihre Kartenkomponenten anzupassen, also experimentieren Sie ruhig.

Erstellen Sie optisch ansprechende und ansprechende Kartenkomponenten

Kartenkomponenten können in fast jeder Website eine Rolle spielen. Es ist einfach, eine mit HTML und CSS zu erstellen, aber es ist auch wichtig zu wissen, wie man mit Barrierefreiheit umgeht.

Sie können auch andere CSS-Effekte ausprobieren, etwa CSS-Filter und den Mischmodus für visuelle Effekte. Üben Sie, mehr mit unterschiedlichen Anpassungen zu erstellen, um eine visuelle Attraktivität zu erzielen.