Aangepaste kaartcomponenten maken met HTML en CSS

Hoewel kaartcomponenten eenvoudig lijken, zijn er specifieke criteria waarmee u rekening moet houden bij het maken ervan. Om te beginnen kom je verschillende soorten kaartcomponenten tegen en als webontwikkelaar moet je ervoor zorgen dat je interface toegankelijk is.

Ontdek hoe u kaartcomponenten bouwt met behulp van HTML en CSS en leer over toegankelijkheidsoverwegingen en maatwerk.

HTML-structuur voor kaartcomponenten

De anatomie van een kaart omvat de kaarthouder, de koptekst, afbeelding en body, en een optionele kaartvoettekst.

U maakt drie eenvoudige kaartcomponenten: inhouds-, product- en profielkaarten. Dit zijn enkele van de meest voorkomende kaarttypes die op internet te vinden zijn.

Begin met het maken van een container-div, waarin nog drie div-tags worden genest met klassekenmerken voor elke kaart erin, met de juiste onderliggende elementen voor elk van de drie kaarten. Je moet elementen gebruiken die verantwoordelijk zijn voor alle onderdelen in de anatomie van de kaart. De inhoudskaart heeft bijvoorbeeld een afbeeldingstag voor media, een h3-tag voor de titel en een p-tag voor tekst.

<divklas="kaarthouder">
 Inhoudskaart 
<divklas="inhoudskaart">
<imgsrc=" 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="Een werkplek met een keyboard notebook, kopje koffie en een oortje">
<h3>Titelh3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Advertentie
 exceptionuri explicabo molestiae natus magnam rem...P>
<Ahref="#">Lees verderA>
div>
 Productkaart 
<divklas="productkaart">
<imgsrc=" 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="Hoofdtelefoon op een gele achtergrond">
<h3>productnaamh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.P>
<Ahref="#"><knop>Voeg toe aan winkelkarknop>A>
div>
 Profiel kaart 
<divklas="profiel-kaart">
<imgsrc=" 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="Een blanke man met een zwart overhemd met knopen">
<h3>John Doeh3>
<P>WebontwikkelaarP>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?P>
<Ahref="#"klas="profiel-link">Profiel bekijkenA>
div>
div>

Dit ziet er standaard zo uit in uw browser voordat u een aangepaste stijl toepast:

Als je meer kaarten wilt maken of meer inhoud op een enkele kaart wilt zetten, doe dit dan voordat je verder gaat.

CSS-styling voor kaartcomponenten

Met behulp van CSS kunt u elke kaart afzonderlijk stylen om ze visueel aantrekkelijk te maken. Gebruik de universele selector resetten marges, vullingen, en positie gebruiken maatvoering van de doos. Style vervolgens de container door hem op te vullen om wat ruimte te creëren.

​​​​​​* {
marge: 0;
opvulling: 0;
maatvoering van de doos: border-box;
}
.card-container {
opvulling: 20px;
}

Gebruik vervolgens een meervoudige selector voor alle kaarten, geef deze een marge om ruimte rond elke kaart te creëren en stel de weergave En flex-richting voor lay-out. Stel ook een rand in om de kaarten te definiëren, een randradius voor sommige curven en maximale breedte voor reactievermogen.

.content-kaart,
.productkaart,
.profile-kaart {
marge: 20px;
weergave: buigen;
flex-richting: kolom;
grens: 2pxstevig#ccc;
grensradius: 7px;
Maximale wijdte: 250px;
}

Concentreer u nu op elke kaart, te beginnen met de inhoudskaart, en geef deze een achtergrondkleur en opvulling. Voeg afstammelingenkiezers toe voor de elementen in de inhoudskaart.

Stijl de afbeelding met Maximale wijdte en grensradius. Stel de marge, lettertypefamilie en lettergrootte in voor de h3. Voor de ankertag verwijdert u de tekstdecoratie en stelt u de kleur, marge-bovenkant en lettergrootte in.

.content-kaart {
achtergrond: #E9724C;
opvulling: 10px;
}
.content-kaartimg {
Maximale wijdte: 100%;
grensradius: 5px;
}
.content-kaarth3 {
marge: 10px 0;
font-familie: monospace;
lettertypegrootte: 1.5rem;
}
.content-kaartA {
tekst-decoratie: geen;
kleur: #6f2ed8;
marge:12px 0 7px 0;
lettertypegrootte: 1rem;
}

De productkaart zal meer stijl nodig hebben vanwege de extra elementen. Maak kiezers voor elk kindelement en stijl ze dienovereenkomstig.

De knop element bevat de meeste stijlkenmerken om het call-to-action-effect te bereiken. Lijn alleen de knop naar rechts uit door de align-self in te stellen op flex-end in de ankerkiezer.

.productkaartimg {
grensradius: 5px 5px 0 0;
breedte: 100%;
}
.productkaarth3 {
marge: 5px 10px;
font-familie: monospace;
lettertypegrootte: 1.5rem;
}
.productkaartP {
marge: 5px 10px;
font-familie: Georgië, 'KeerNieuwRomeins', Keer, schreef;
}
.productkaartA {
align-zelf: flex-einde;
}
.productkaartknop {
breedte: 100px;
hoogte: 30px;
marge: 10px;
grens: 1pxstevig#8f3642;
grensradius: 4px;
Achtergrond kleur: #FFC857;
lettertype dikte: 700;
cursor: wijzer;
}

Style tot slot de profielkaart. Stel de randradius in de rechterbovenhoek en linkerbovenhoek van de afbeelding in zodat deze overeenkomt met de container. Pas de afbeeldingsgrootte aan en pas indien nodig aan. Gebruik ten minste twee lettertypen en complementaire kleuren op teksten voor definitie. U kunt ook het bruikbare element maken, d.w.z. de ankertag—val op met een grens.

.profile-kaartimg {
grensradius: 5px 5px 0 0;
hoogte: 200px;
object-fit: omslag;
}
.profile-kaarth3 {
marge: 10px;
font-familie: monospace;
lettertypegrootte: 1.5rem;
}
.profile-kaartP:primeur van het type {
marge:0px 10px;
font-familie: 'KeerNieuwRomeins', Keer, schreef;
kleur: korenblauw;
}
.profile-kaartP:laatste van het type {
marge: 5px 10px;
lettertypegrootte: 0.9rem;
}
.profile-kaartA {
tekst-decoratie: geen;
marge: 5px 10px 10px 10px;
opvulling: 5px 15px;
align-zelf: centrum;
grens: 1pxstevigkorenblauw;
grensradius: 15px;
kleur: zwart;
font-familie: monospace;
lettertype dikte: 500;
}

Na het stylen zouden je kaarten er zo uit moeten zien:

Kaartindeling en flexibiliteit

Responsiviteit is essentieel om een ​​naadloze ervaring met de interface op alle apparaten te bieden. Jij kan gebruik CSS Flexbox of CSS Grid voor de indeling. Eindelijk kan dat gebruik mediaquery's voor responsiviteit.

CSS Flexbox gebruiken

Ten eerste, voeg een weergaveattribuut toe en stel het in op flex op uw kaartcontainerkiezer. Breng flex-wrap aan en stel deze in op wrap, zodat de kaarten binnen een klein schermformaat kunnen worden ingepakt.

Stel ook de uitlijnen-items En rechtvaardigen-inhoud eigenschappen naar uw wens.

​​​​​​.card-container {
opvulling: 20px;
weergave: buigen;
flexfolie: wrap;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: ruimte-gelijkmatig;
}

De pagina zou er zo uit moeten zien:

Dat concludeert reactievermogen op grotere schermformaten. Voor een kleinere viewport, zoals een mobiele telefoon, kunt u een mediaqueryregel gebruiken en de maximale breedte instellen.

Bepaal binnen de mediaquery welke elementen u wilt wijzigen. In dit geval verandert de kaarthouder.

Stel de flex-richting naar kolom, zodat de kaarten verticaal worden gestapeld. Als u de kaarten horizontaal in het midden van het scherm wilt weergeven, stelt u de eigenschappen voor rechtvaardigen-inhoud en items uitlijnen in op midden:

@media scherm En (Maximale wijdte:480px) {
.card-container {
flex-richting: kolom;
rechtvaardigen-inhoud: centrum;
uitlijnen-items: centrum;
 }
}

Om het mediaquery-effect te zien, vinkt u de code aan CodePen.

CSS-raster gebruiken

Stel eerst de weergave van de kaarthouder in op raster. Gebruik raster-sjabloon-kolommen om de kaarten hun breedte automatisch te laten aanpassen. Gebruik een raster-gap voor ruimte tussen de kaarten. Gebruik rechtvaardigen-items om de kaarten te centreren.

.card-container {
opvulling: 20px;
weergave: rooster;
raster-sjabloon-kolommen: herhalen(automatische aanpassing, minimaal(300px, 1fr));
raster-gap: 20px;
rechtvaardigen-items: centrum;
}

De pagina zou er zo uit moeten zien:

Pas voor mobiele schermen een mediaquery toe. Wijzig binnen de query de rasterlay-out voor kleinere viewports. Set raster-sjabloon-kolommen naar 1 fr om elke kaart de volledige breedte te laten bezetten. Ook instellen rechtvaardigen-items En uitlijnen-items properties to center zal de kaarten zowel horizontaal als verticaal centreren.

@media scherm En (Maximale wijdte:480px) {
.card-container {
raster-sjabloon-kolommen: 1fr;
rechtvaardigen-items: centrum;
uitlijnen-items: centrum;
 }
}

Door CSS Grid en mediaquery's combineren, worden de kaarten op grotere schermen gewikkeld en verticaal gestapeld op kleinere schermen, waardoor een responsieve kaartlay-out wordt verkregen. Om het mediaquery-effect te zien, vinkt u de code aan CodePen.

Toegankelijkheidsoverwegingen voor kaartcomponenten

Het is van cruciaal belang om ervoor te zorgen dat kaartcomponenten die u maakt, toegankelijk zijn voor alle gebruikers, ook voor gebruikers met een handicap. Hier zijn enkele belangrijke overwegingen om kaartcomponenten toegankelijker te maken:

• Semantische HTML
• Toetsenbordnavigatie
• Focus stijlen
• ARIA-labels en rollen
• Alt-tekst
• Correcte kopstructuur
• Kleurcontrast

Door deze toegankelijkheidsoverwegingen te implementeren, kunnen webontwikkelaars ervoor zorgen dat kaartcomponenten inclusief zijn.

Aanpassing en verder onderzoek

U kunt verder gaan met het aanpassen van uw kaartcomponent. Hier zijn enkele ideeën waar u naar kunt kijken:

• Overgangen en animaties
• Beeldstijlen
• Achtergrond en kleurenschema's
• Grensstijlen
• Interactieve elementen

Er zijn tal van verschillende manieren waarop u uw kaartcomponenten kunt aanpassen, dus experimenteer gerust.

Maak visueel aantrekkelijke en responsieve kaartcomponenten

Kaartcomponenten kunnen in bijna elke website een rol spelen. Er een maken met HTML en CSS is eenvoudig, maar weten hoe om te gaan met toegankelijkheid is ook belangrijk.

Er zijn andere CSS-effecten die u kunt uitproberen, zoals CSS-filters en overvloeimodus voor visuele effecten. Oefen met het maken van meer met verschillende aanpassingen voor visuele aantrekkingskracht.