Oprettelse af brugerdefinerede kortkomponenter med HTML og CSS

Selvom kortkomponenter kan virke enkle, er der specifikke kriterier, der skal tages i betragtning, når du opretter dem. Du vil støde på forskellige typer kortkomponenter til at starte med, og som webudvikler skal du sikre dig, at din grænseflade er tilgængelig.

Find ud af, hvordan du bygger kortkomponenter ved hjælp af HTML og CSS, og lær om overvejelser om tilgængelighed og tilpasning.

HTML-struktur til kortkomponenter

Et korts anatomi inkluderer kortbeholderen, dets sidehoved, billede og krop og en valgfri kortsidefod.

Du vil oprette tre enkle kortkomponenter: indhold, produkt og profilkort. Dette er nogle af de mest almindelige korttyper, der findes på nettet.

Start med at oprette en container-div, indlejring af yderligere tre div-tags med klasseattributter for hvert kort i det, med passende underordnede elementer for hvert af de tre kort. Du bør bruge elementer, der står for alle delene i kortets anatomi. For eksempel har indholdskortet et billedmærke for medier, et h3-tag for titlen og et p-tag for tekst.

<divklasse="kort-beholder">
 Indholdskort 
<divklasse="indholdskort">
<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 arbejdsområde med en tastaturnotesbog, en kop kaffe og en øretelefon">
<h3>Titelh3>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
 excepturi explicabo molestiae natus magnam rem...s>
<-enhref="#">Læs mere-en>
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="Høretelefoner på gul baggrund">
<h3>produktnavnh3>
<s>$19.99s>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.s>
<-enhref="#"><knap>Tilføj til kurvknap>-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 hvid mand iført en sort skjorte med knapper">
<h3>John Doeh3>
<s>Web-udviklers>
<s>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?s>
<-enhref="#"klasse="profil-link">Se profil-en>
div>
div>

Sådan skal dette se ud i din browser, som standard, før du anvender nogen tilpasset stil:

Hvis du vil oprette flere kort eller inkludere mere indhold på et enkelt kort, skal du gøre det, før du fortsætter.

CSS-styling til kortkomponenter

Ved at bruge CSS kan du style hvert kort individuelt for at gøre dem visuelt tiltalende. Brug universalvælgeren at nulstille marginer, polstringer, og position vha kassestørrelse. Stil derefter beholderen ved at give den polstring for at skabe lidt plads.

​​​​​​* {
margen: 0;
polstring: 0;
kassestørrelse: grænse-kasse;
}
.kort-beholder {
polstring: 20px;
}

Brug derefter en multipelvælger til alle kortene, giv den en margen til at give plads omkring hvert kort, og indstil Skærm og flex-retning til layout. Indstil også en kant for at definere kortene, kant-radius for nogle kurver og max-bredde for reaktionsevne.

.content-kort,
.produkt-kort,
.profil-kort {
margen: 20px;
Skærm: bøje;
flex-retning: kolonne;
grænse: 2pxsolid#ccc;
grænse-radius: 7px;
max-bredde: 250px;
}

Fokuser nu på hvert kort, start med indholdskortet, og giv det en baggrundsfarve og polstring. Tilføj efterkommervælgere for elementerne på indholdskortet.

Style billedet med max-bredde og grænseradius. Indstil margen, skrifttypefamilie og skriftstørrelse for h3. For ankermærket skal du fjerne tekstdekoration og indstille farve, margin-top og skriftstørrelse.

.content-kort {
baggrund: #E9724C;
polstring: 10px;
}
.content-kortimg {
max-bredde: 100%;
grænse-radius: 5px;
}
.content-korth3 {
margen: 10px 0;
skrifttype-familie: monospace;
skriftstørrelse: 1.5rem;
}
.content-kort-en {
tekst-dekoration: ingen;
farve: #6f2ed8;
margen:12px 0 7px 0;
skriftstørrelse: 1rem;
}

Produktkortet vil kræve mere stil på grund af dets ekstra elementer. Opret vælgere for hvert underordnede element og stil dem i overensstemmelse hermed.

Det knap elementet indeholder flest stilattributter for at opnå call-to-action-effekten. Juster kun knappen til højre ved at indstille align-self til flex-end i ankervælgeren.

.produkt-kortimg {
grænse-radius: 5px 5px 0 0;
bredde: 100%;
}
.produkt-korth3 {
margen: 5px 10px;
skrifttype-familie: monospace;
skriftstørrelse: 1.5rem;
}
.produkt-korts {
margen: 5px 10px;
skrifttype-familie: Georgien, 'TiderNyromersk', Tider, serif;
}
.produkt-kort-en {
aligne-selv: flex-ende;
}
.produkt-kortknap {
bredde: 100px;
højde: 30px;
margen: 10px;
grænse: 1pxsolid#8f3642;
grænse-radius: 4px;
baggrundsfarve: #FFC857;
skrifttype-vægt: 700;
cursoren: pointer;
}

Stil til sidst profilkortet. Indstil kantradius øverst til højre og øverst til venstre på billedet, så det passer til beholderen. Juster billedstørrelsen og pas om nødvendigt. Brug mindst to skrifttyper og komplementære farver på tekster til definition. Du kan også lave det handlingsrettede element - dvs. ankermærket – skiller sig ud med et grænse.

.profil-kortimg {
grænse-radius: 5px 5px 0 0;
højde: 200px;
objekttilpasning: dække over;
}
.profil-korth3 {
margen: 10px;
skrifttype-familie: monospace;
skriftstørrelse: 1.5rem;
}
.profil-korts:først af typen {
margen:0px 10px;
skrifttype-familie: 'TiderNyromersk', Tider, serif;
farve: kornblomstblå;
}
.profil-korts:sidste af typen {
margen: 5px 10px;
skriftstørrelse: 0.9rem;
}
.profil-kort-en {
tekst-dekoration: ingen;
margen: 5px 10px 10px 10px;
polstring: 5px 15px;
aligne-selv: centrum;
grænse: 1pxsolidkornblomstblå;
grænse-radius: 15px;
farve: sort;
skrifttype-familie: monospace;
skrifttype-vægt: 500;
}

Efter styling skal dine kort se sådan ud:

Kortlayout og fleksibilitet

Reaktionsevne er afgørende for at give en problemfri oplevelse med grænsefladen på tværs af enheder. Du kan brug enten CSS Flexbox eller CSS Grid for layoutet. Endelig kan du bruge medieforespørgsler for at være lydhør.

Brug af CSS Flexbox

For det første, tilføj en visningsattribut og indstil den til at bøje på din kortbeholdervælger. Påfør flex-wrap og indstil det til at pakke, så kortene kan pakkes inden for en lille skærmstørrelse.

Indstil også align-elementer og retfærdiggøre-indhold egenskaber efter dit ønske.

​​​​​​.kort-beholder {
polstring: 20px;
Skærm: bøje;
flex-indpakning: indpakning;
align-elementer: centrum;
retfærdiggøre-indhold: plads-jævnt;
}

Siden skal se sådan ud:

Det afslutter respons på større skærmstørrelser. For en mindre viewport, som en mobiltelefon, kan du bruge en medieforespørgselsregel og indstille den maksimale bredde.

Inden for medieforespørgslen skal du bestemme, hvilke elementer du ønsker at ændre. I dette tilfælde ændres kortbeholderen.

Indstil flex-retning til kolonne, så kortene stables lodret. For at vise kortene i midten af ​​skærmen, vandret, skal du indstille egenskaberne for justify-content og align-items til at centrere:

@medier skærmen og (max-bredde:480 px) {
.kort-beholder {
flex-retning: kolonne;
retfærdiggøre-indhold: centrum;
align-elementer: centrum;
 }
}

For at se medieforespørgselseffekten skal du kontrollere koden på CodePen.

Brug af CSS Grid

Indstil først kortbeholderens skærm til gitter. Brug gitter-skabelon-kolonner for at lade kortene justere deres bredde automatisk. Brug en gitter-gab for afstand mellem kortene. Brug retfærdiggøre-punkter at centrere kortene.

.kort-beholder {
polstring: 20px;
Skærm: gitter;
gitter-skabelon-kolonner: gentage(auto-tilpasning, minmax(300px, 1fr));
gitter-gab: 20px;
retfærdiggøre-punkter: centrum;
}

Siden skal se sådan ud:

Anvend en medieforespørgsel på mobilskærme. Rediger gitterlayoutet i forespørgslen for mindre visningsporte. Sæt gitter-skabelon-kolonner til 1fr for at få hvert kort til at optage den fulde bredde. Også indstilling retfærdiggøre-punkter og align-elementer egenskaber til centrering vil centrere kortene både vandret og lodret.

@medier skærmen og (max-bredde:480 px) {
.kort-beholder {
gitter-skabelon-kolonner: 1fr;
retfærdiggøre-punkter: centrum;
align-elementer: centrum;
 }
}

Ved kombinere CSS Grid og medieforespørgsler, vil kortene pakkes på større skærme og stables lodret på mindre skærme, hvilket opnår et responsivt kortlayout. For at se medieforespørgselseffekten skal du kontrollere koden på CodePen.

Tilgængelighedsovervejelser for kortkomponenter

Det er afgørende at sikre, at kortkomponenter, du opretter, er tilgængelige for alle brugere, også dem med handicap. Her er nogle vigtige overvejelser for at gøre kortkomponenter mere tilgængelige:

• Semantisk HTML
• Tastaturnavigation
• Fokus stilarter
• ARIA etiketter og roller
• Alt tekst
• Korrekt overskriftsstruktur
• Farvekontrast

Ved at implementere disse tilgængelighedsovervejelser kan webudviklere sikre, at kortkomponenter er inkluderende.

Tilpasning og yderligere udforskning

Du kan gå længere med at tilpasse din kortkomponent. Her er nogle ideer, du kan se nærmere på:

• Overgange og animationer
• Billedstile
• Baggrund og farveskemaer
• Border stilarter
• Interaktive elementer

Der er masser af forskellige måder, hvorpå du kan tilpasse dine kortkomponenter, så du er velkommen til at eksperimentere.

Opret visuelt tiltalende og responsive kortkomponenter

Kortkomponenter kan spille en rolle på næsten enhver hjemmeside. Det er nemt at lave en med HTML og CSS, men det er også vigtigt at vide, hvordan man håndterer tilgængelighed.

Der er andre CSS-effekter, du kan prøve, såsom CSS-filtre og blandingstilstand til visuelle effekter. Øv dig i at skabe mere med forskellige tilpasninger for visuel appel.