Aangepaste kaartcomponenten maken met HTML en CSS
Leer hoe u dit aantrekkelijke onderdeel kunt maken en hoe u het kunt gebruiken om een professioneel tintje aan uw webontwerpen toe te voegen.
Hoewel kaartcomponenten eenvoudig lijken, zijn er specifieke criteria waarmee u rekening moet houden bij het maken ervan. Om te beginnen zul je verschillende soorten kaartcomponenten tegenkomen en als webontwikkelaar moet je ervoor zorgen dat je interface toegankelijk is.
Ontdek hoe u kaartcomponenten bouwt met HTML en CSS en leer over toegankelijkheidsoverwegingen en maatwerk.
HTML-structuur voor kaartcomponenten
De anatomie van een kaart omvat de kaartcontainer, de koptekst, afbeelding en hoofdtekst ervan, en een optionele kaartvoettekst.
U maakt drie eenvoudige kaartcomponenten: inhouds-, product- en profielkaarten. Dit zijn enkele van de meest voorkomende kaarttypen die op internet te vinden zijn.
Begin met het maken van een container-div, waarbij u nog drie div-tags nestelt met klasse-attributen voor elke kaart erin, met de juiste onderliggende elementen voor elk van de drie kaarten. Je moet elementen gebruiken die rekening houden met alle onderdelen van 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.
<div class="card-container">
<!-- Content Card -->
<div class="content-card">
<img src="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="A workspace with a keyboard notebook, cup of coffee and an earpiece">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
excepturi explicabo molestiae natus magnam rem...</p>
<a href="#">Read More</a>
</div>
<!-- Product Card -->
<div class="product-card">
<img src="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="Headphones on a yellow background">
<h3>Product Name</h3>
<p>$19.99</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur, voluptatibus.</p>
<a href="#"><button>Add to Cart</button></a>
</div>
<!-- Profile Card -->
<div class="profile-card">
<img src="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="A white male wearing a black button up shirt">
<h3>John Doe</h3>
<p>Web Developer</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expedita tempora eos molestias repellat?</p>
<a href="#" class="profile-link">View Profile</a>
</div>
</div>Zo zou dit er standaard in uw browser uit moeten zien voordat u een aangepaste stijl toepast:
Als u meer kaarten wilt maken of meer inhoud op één kaart wilt opnemen, moet u dit doen voordat u doorgaat.
CSS-stijl voor kaartcomponenten
Met behulp van CSS kunt u elke kaart individueel vormgeven om ze visueel aantrekkelijk te maken. Gebruik de universele selector om marges, opvulling en positie opnieuw in te stellen met behulp van box-sizing. Stijl de container vervolgens door hem opvulling te geven om wat ruimte te creëren.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-container {
padding: 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 flexrichting voor de lay-out in. Stel ook een rand in om de kaarten te definiëren, een randradius voor sommige curven en een maximale breedte voor reactievermogen.
.content-card,
.product-card,
.profile-card {
margin: 20px;
display: flex;
flex-direction: column;
border: 2px solid #ccc;
border-radius: 7px;
max-width: 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 op de inhoudskaart.
Stijl de afbeelding met max-width en randradius. Stel de marge, lettertypefamilie en lettergrootte in voor de h3. Voor de ankertag verwijdert u de tekstversiering en stelt u de kleur, de bovenmarge en de lettergrootte in.
.content-card {
background: #E9724C;
padding: 10px;
}
.content-card img {
max-width: 100%;
border-radius: 5px;
}
.content-card h3 {
margin: 10px 0;
font-family: monospace;
font-size: 1.5rem;
}
.content-card a {
text-decoration: none;
color: #6f2ed8;
margin:12px 0 7px 0;
font-size: 1rem;
}De productkaart zal meer stijl vereisen vanwege de extra elementen. Maak selectors voor elk kindelement en stijl ze dienovereenkomstig.
Het knop-element bevat de meeste stijlkenmerken om het call-to-action-effect te bereiken. Lijn alleen de knop rechts uit door de align-self in te stellen op flex-end in de ankerselector.
.product-card img {
border-radius: 5px 5px 0 0;
width: 100%;
}
.product-card h3 {
margin: 5px 10px;
font-family: monospace;
font-size: 1.5rem;
}
.product-card p {
margin: 5px 10px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.product-card a {
align-self: flex-end;
}
.product-card button {
width: 100px;
height: 30px;
margin: 10px;
border: 1px solid #8f3642;
border-radius: 4px;
background-color: #FFC857;
font-weight: 700;
cursor: pointer;
}Stijl ten slotte de profielkaart. Stel de randradius rechtsboven en linksboven in de afbeelding in, zodat deze overeenkomt met de container. Pas indien nodig de afbeeldingsgrootte aan en pas deze aan. Gebruik ten minste twee lettertypen en complementaire kleuren op teksten voor definitie. Je kunt het actiegerichte element ook maken, d.w.z. de ankertag: val op met een rand.
.profile-card img {
border-radius: 5px 5px 0 0;
height: 200px;
object-fit: cover;
}
.profile-card h3 {
margin: 10px;
font-family: monospace;
font-size: 1.5rem;
}
.profile-card p:first-of-type {
margin:0px 10px;
font-family: 'Times New Roman', Times, serif;
color: cornflowerblue;
}
.profile-card p:last-of-type {
margin: 5px 10px;
font-size: 0.9rem;
}
.profile-card a {
text-decoration: none;
margin: 5px 10px 10px 10px;
padding: 5px 15px;
align-self: center;
border: 1px solid cornflowerblue;
border-radius: 15px;
color: black;
font-family: monospace;
font-weight: 500;
}Na het stylen zouden je kaarten er als volgt uit moeten zien:
Kaartindeling en flexibiliteit
Responsiviteit is essentieel om een naadloze ervaring met de interface op verschillende apparaten te bieden. U kunt CSS Flexbox of CSS Grid gebruiken voor de lay-out. Ten slotte kunt u mediaquery's gebruiken voor responsiviteit.
CSS-Flexbox gebruiken
Voeg eerst een weergavekenmerk toe en stel dit in op flex op uw kaartcontainerkiezer. Pas flex-wrap toe en stel deze in op wrap, zodat de kaarten binnen een klein schermformaat kunnen worden verpakt.
Stel ook de eigenschappen align-items en justify-content naar wens in.
.card-container {
padding: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}De pagina zou er als volgt uit moeten zien:
Dat concludeert de responsiviteit 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 kaartcontainer.
Stel de flexrichting in op kolom, zodat de kaarten verticaal worden gestapeld. Om de kaarten horizontaal in het midden van het scherm weer te geven, stelt u de eigenschappen justify-content en align-items in op centreren:
@media screen and (max-width: 480px) {
.card-container {
flex-direction: column;
justify-content: center;
align-items: center;
}
}Om het mediaquery-effect te zien, controleert u de code op CodePen.
CSS-raster gebruiken
Stel eerst de weergave van de kaartcontainer in op raster. Gebruik grid-template-kolommen zodat de kaarten hun breedte automatisch aanpassen. Gebruik een grid-gap voor de afstand tussen de kaarten. Gebruik justify-items om de kaarten te centreren.
.card-container {
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
justify-items: center;
}De pagina zou er als volgt uit moeten zien:
Voor mobiele schermen past u een mediaquery toe. Wijzig binnen de query de rasterindeling voor kleinere vensters. Stel grid-template-columns in op 1fr om ervoor te zorgen dat elke kaart de volledige breedte beslaat. Als u de eigenschappen justify-items en align-items op centreren instelt, worden de kaarten zowel horizontaal als verticaal gecentreerd.
@media screen and (max-width: 480px) {
.card-container {
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
}
}Door CSS Grid en mediaquery's te combineren, worden de kaarten op grotere schermen weergegeven en verticaal gestapeld op kleinere schermen, waardoor een responsieve kaartlay-out wordt bereikt. Om het mediaquery-effect te zien, controleert u de code op CodePen.
Toegankelijkheidsoverwegingen voor kaartcomponenten
Het is van cruciaal belang ervoor te zorgen dat de kaartcomponenten die u maakt, toegankelijk zijn voor alle gebruikers, ook voor gebruikers met een handicap. Hier volgen enkele belangrijke overwegingen om kaartcomponenten toegankelijker te maken:
- Semantische HTML
- Toetsenbordnavigatie
- Focusstijlen
- ARIA-labels en rollen
- Alt-tekst
- Goede kopstructuur
- Kleurcontrast
Door deze toegankelijkheidsoverwegingen te implementeren, kunnen webontwikkelaars ervoor zorgen dat kaartcomponenten inclusief zijn.
Maatwerk en verdere verkenning
U kunt nog verder gaan door uw kaartcomponent aan te passen. Hier zijn enkele ideeën waar u naar kunt kijken:
- Overgangen en animaties
- Afbeeldingsstijlen
- Achtergrond en kleurenschema's
- Randstijlen
- Interactieve elementen
Er zijn veel verschillende manieren waarop u uw kaartcomponenten kunt aanpassen, dus experimenteer gerust.
Creëer visueel aantrekkelijke en responsieve kaartcomponenten
Kaartcomponenten kunnen op vrijwel elke website een rol spelen. Er een maken met HTML en CSS is eenvoudig, maar weten hoe je met toegankelijkheid om moet gaan is ook belangrijk.
Er zijn andere CSS-effecten die u kunt uitproberen, zoals CSS-filters en de overvloeimodus voor visuele effecten. Oefen met het creëren van meer met verschillende aanpassingen voor visuele aantrekkingskracht.