Opprette tilpassede kortkomponenter med HTML og CSS

Selv om kortkomponenter kan virke enkle, er det spesifikke kriterier du bør vurdere når du lager dem. Du vil møte ulike typer kortkomponenter til å begynne med, og som webutvikler må du sørge for at grensesnittet ditt er tilgjengelig.

Finn ut hvordan du bygger kortkomponenter ved hjelp av HTML og CSS og lær om tilgjengelighetshensyn og tilpasning.

HTML-struktur for kortkomponenter

Anatomien til et kort inkluderer kortbeholderen, dets topptekst, bilde og hovedtekst, og en valgfri kortbunntekst.

Du vil lage tre enkle kortkomponenter: innhold, produkt og profilkort. Dette er noen av de vanligste korttypene som finnes på nettet.

Begynn med å lage en beholder-div, og neste tre div-tagger med klasseattributter for hvert kort i den, med passende underordnede elementer for hvert av de tre kortene. Du bør bruke elementer som står for alle delene i kortets anatomi. For eksempel har innholdskortet en bildekode for media, en h3-tag for tittelen og en p-tag for tekst.

<divklasse="kortbeholder">
 Innholdskort 
<divklasse="innholdskort">
<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="Et arbeidsområde med en bærbar tastatur, en kopp kaffe og en øretelefon">
<h3>Tittelh3>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit. Annonse
 excepturi explicabo molestiae natus magnam rem...s>
<enhref="#">Les meren>
div>
 Produktkort 
<divklasse="produktkort">
<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="Hodetelefoner på gul bakgrunn">
<h3>Produktnavnh3>
<s>$19.99s>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.s>
<enhref="#"><knapp>Legg i handlekurvknapp>en>
div>
 Profilkort 
<divklasse="profilkort">
<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="En hvit mann som har på seg en svart skjorte med knapp">
<h3>John Doeh3>
<s>Webutviklers>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?s>
<enhref="#"klasse="profillink">Vis profilen>
div>
div>

Slik skal dette se ut i nettleseren din, som standard, før du bruker tilpasset stil:

Hvis du vil lage flere kort eller inkludere mer innhold på ett enkelt kort, gjør det før du fortsetter.

CSS-styling for kortkomponenter

Ved å bruke CSS kan du style hvert kort individuelt for å gjøre dem visuelt tiltalende. Bruk universalvelgeren å tilbakestille marginer, polstringer, og posisjoner ved hjelp av boksstørrelse. Stil deretter beholderen ved å gi den polstring for å skape litt plass.

​​​​​​* {
margin: 0;
polstring: 0;
boksstørrelse: kantboks;
}
.kort-beholder {
polstring: 20px;
}

Deretter bruker du en flervelger for alle kortene, gir den en margin for å gi plass rundt hvert kort, og still inn vise og flex-retning for layout. Sett også en kantlinje for å definere kortene, kantradius for noen kurver og maksbredde for respons.

.content-kort,
.produkt-kort,
.profilkort {
margin: 20px;
vise: bøye seg;
flex-retning: kolonne;
grense: 2pxfast#ccc;
grense-radius: 7px;
maks bredde: 250px;
}

Fokuser nå på hvert kort, start med innholdskortet, og gi det en bakgrunnsfarge og polstring. Legg til etterkommervelgere for elementene i innholdskortet.

Style bildet med maks bredde og grenseradius. Angi margen, skriftfamilien og skriftstørrelsen for h3. For anker-taggen fjerner du tekstdekorasjonen og angir farge, marg-topp og skriftstørrelse.

.content-kort {
bakgrunn: #E9724C;
polstring: 10px;
}
.content-kortimg {
maks bredde: 100%;
grense-radius: 5px;
}
.content-korth3 {
margin: 10px 0;
font-familie: monospace;
skriftstørrelse: 1.5rem;
}
.content-korten {
tekst-dekorasjon: ingen;
farge: #6f2ed8;
margin:12px 0 7px 0;
skriftstørrelse: 1rem;
}

Produktkortet vil kreve mer stil på grunn av dets ekstra elementer. Lag velgere for hvert underordnede element og stil dem deretter.

De knapp elementet inneholder flest stilattributter for å oppnå handlingsfremmende effekt. Juster bare knappen til høyre ved å sette align-self til flex-end i ankervelgeren.

.produkt-kortimg {
grense-radius: 5px 5px 0 0;
bredde: 100%;
}
.produkt-korth3 {
margin: 5px 10px;
font-familie: monospace;
skriftstørrelse: 1.5rem;
}
.produkt-korts {
margin: 5px 10px;
font-familie: Georgia, 'TiderNyRoman', Tider, serif;
}
.produkt-korten {
innrette seg selv: flex-ende;
}
.produkt-kortknapp {
bredde: 100px;
høyde: 30px;
margin: 10px;
grense: 1pxfast#8f3642;
grense-radius: 4px;
bakgrunnsfarge: #FFC857;
font-vekt: 700;
markøren: pekeren;
}

Til slutt stiler du profilkortet. Angi kantradius øverst til høyre og øverst til venstre på bildet for å matche beholderen. Juster bildestørrelsen og pass til om nødvendig. Bruk minst to skrifttyper og komplementærfarger på tekster for definisjon. Du kan også lage det handlingsrettede elementet – dvs. ankermerket – skiller seg ut med en grense.

.profilkortimg {
grense-radius: 5px 5px 0 0;
høyde: 200px;
objekttilpasning: dekke;
}
.profilkorth3 {
margin: 10px;
font-familie: monospace;
skriftstørrelse: 1.5rem;
}
.profilkorts:først av typen {
margin:0px 10px;
font-familie: 'TiderNyRoman', Tider, serif;
farge: kornblomstblå;
}
.profilkorts: siste av typen {
margin: 5px 10px;
skriftstørrelse: 0.9rem;
}
.profilkorten {
tekst-dekorasjon: ingen;
margin: 5px 10px 10px 10px;
polstring: 5px 15px;
innrette seg selv: senter;
grense: 1pxfastkornblomstblå;
grense-radius: 15px;
farge: svart;
font-familie: monospace;
font-vekt: 500;
}

Etter styling skal kortene dine se slik ut:

Kortoppsett og fleksibilitet

Respons er avgjørende for å gi en sømløs opplevelse med grensesnittet på tvers av enheter. Du kan bruk enten CSS Flexbox eller CSS Grid for oppsettet. Endelig kan du bruke mediespørringer for respons.

Bruker CSS Flexbox

For det første, legg til et visningsattributt og sett det til å bøye seg på kortbeholdervelgeren. Påfør flex-wrap og sett den til å pakkes inn, slik at kortene kan pakkes inn i en liten skjermstørrelse.

Still også inn align-elementer og rettferdiggjøre-innhold eiendommer etter ditt ønske.

​​​​​​.kort-beholder {
polstring: 20px;
vise: bøye seg;
flex-wrap: pakke inn;
align-elementer: senter;
rettferdiggjøre-innhold: plass-jevnt;
}

Siden skal se slik ut:

Det avslutter respons på større skjermstørrelser. For en mindre viewport, som en mobiltelefon, kan du bruke en mediespørringsregel og angi maks-bredden.

I mediespørringen bestemmer du hvilke elementer du vil endre. I dette tilfellet vil kortbeholderen endres.

Sett flex-retning til kolonne, slik at kortene stables vertikalt. For å vise kortene i midten av skjermen horisontalt, sett egenskapene for justify-content og align-items til senter:

@media skjerm og (maks-bredde:480 piksler) {
.kort-beholder {
flex-retning: kolonne;
rettferdiggjøre-innhold: senter;
align-elementer: senter;
 }
}

For å se mediespørringseffekten, sjekk koden på CodePen.

Bruker CSS Grid

Først setter du kortbeholderens skjerm til rutenett. Bruk rutenett-mal-kolonner for å la kortene justere bredden automatisk. Bruk en rutenett-gap for avstand mellom kortene. Bruk rettferdiggjøre-elementer for å sentrere kortene.

.kort-beholder {
polstring: 20px;
vise: Nett;
rutenett-mal-kolonner: gjenta(automatisk tilpasning, minmax(300px, 1fr));
rutenett-gap: 20px;
rettferdiggjøre-elementer: senter;
}

Siden skal se slik ut:

For mobilskjermer, bruk et mediesøk. I spørringen endrer du rutenettoppsettet for mindre visningsporter. Sett rutenett-mal-kolonner til 1fr for å få hvert kort til å oppta hele bredden. Også innstilling rettferdiggjøre-elementer og align-elementer egenskaper som skal sentreres vil sentrere kortene både horisontalt og vertikalt.

@media skjerm og (maks-bredde:480 piksler) {
.kort-beholder {
rutenett-mal-kolonner: 1fr;
rettferdiggjøre-elementer: senter;
align-elementer: senter;
 }
}

Av kombinere CSS Grid og mediespørringer, vil kortene pakkes inn på større skjermer og stables vertikalt på mindre skjermer, og oppnå en responsiv kortlayout. For å se mediespørringseffekten, sjekk koden på CodePen.

Tilgjengelighetshensyn for kortkomponenter

Det er avgjørende å sikre at kortkomponentene du lager er tilgjengelige for alle brukere, inkludert funksjonshemmede. Her er noen viktige hensyn for å gjøre kortkomponenter mer tilgjengelige:

• Semantisk HTML
• Tastaturnavigering
• Fokus stiler
• ARIA-etiketter og roller
• Alt tekst
• Riktig overskriftsstruktur
• Fargekontrast

Ved å implementere disse tilgjengelighetshensynene kan nettutviklere sikre at kortkomponenter er inkluderende.

Tilpasning og videre utforskning

Du kan gå lenger med å tilpasse kortkomponenten din. Her er noen ideer du kan se nærmere på:

• Overganger og animasjoner
• Bildestiler
• Bakgrunn og fargevalg
• Kantstiler
• Interaktive elementer

Det er mange forskjellige måter du kan tilpasse kortkomponentene dine på, så eksperimenter gjerne.

Lag visuelt tiltalende og responsive kortkomponenter

Kortkomponenter kan spille en rolle på nesten alle nettsider. Det er enkelt å lage en med HTML og CSS, men det er også viktig å vite hvordan man håndterer tilgjengelighet.

Det er andre CSS-effekter du kan prøve ut, som CSS-filtre og blandingsmodus for visuelle effekter. Øv på å lage mer med ulike tilpasninger for visuell appell.