Skapa anpassade kortkomponenter med HTML och CSS

Även om kortkomponenter kan verka enkla, finns det specifika kriterier att ta hänsyn till när du skapar dem. Du kommer att stöta på olika typer av kortkomponenter till att börja med och som webbutvecklare måste du se till att ditt gränssnitt är tillgängligt.

Ta reda på hur du bygger kortkomponenter med HTML och CSS och lär dig mer om tillgänglighet och anpassning.

HTML-struktur för kortkomponenter

Ett korts anatomi inkluderar kortbehållaren, dess sidhuvud, bild och kropp och en valfri kortsidfot.

Du kommer att skapa tre enkla kortkomponenter: innehåll, produkt och profilkort. Det här är några av de vanligaste korttyperna som finns på webben.

Börja med att skapa en container-div, kapsla ytterligare tre div-taggar med klassattribut för varje kort i den, med lämpliga underordnade element för vart och ett av de tre korten. Du bör använda element som står för alla delar i kortets anatomi. Till exempel har innehållskortet en bildtagg för media, en h3-tagg för titeln och en p-tagg för text.

<divklass="kort-behållare">
 Innehållskort 
<divklass="innehållskort">
<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="En arbetsyta med en anteckningsbok med tangentbord, en kopp kaffe och en hörlur">
<h3>Titelh3>
<sid>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
 excepturi explicabo molestiae natus magnam rem...sid>
<ahref="#">Läs mera>
div>
 Produktkort 
<divklass="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örlurar på gul bakgrund">
<h3>produktnamnh3>
<sid>$19.99sid>
<sid>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.sid>
<ahref="#"><knapp>Lägg till i kundvagnknapp>a>
div>
 Profilkort 
<divklass="profil-kort">
<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 vit man som bär en svart skjorta">
<h3>John Doeh3>
<sid>Webbutvecklaresid>
<sid>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?sid>
<ahref="#"klass="profillänk">Visa profila>
div>
div>

Så här ska det se ut i din webbläsare, som standard, innan du använder någon anpassad stil:

Om du vill skapa fler kort eller inkludera mer innehåll på ett enda kort, gör det innan du fortsätter.

CSS-styling för kortkomponenter

Med CSS kan du utforma varje kort individuellt för att göra dem visuellt tilltalande. Använd den universella väljaren att återställa marginaler, stoppningar, och placera med hjälp av lådans storlek. Styla sedan behållaren genom att ge den vaddering för att skapa lite utrymme.

​​​​​​* {
marginal: 0;
stoppning: 0;
lådans storlek: border-box;
}
.kort-behållare {
stoppning: 20px;
}

Använd sedan en multipelväljare för alla kort, ge den en marginal för att ge utrymme runt varje kort och ställ in visa och flex-riktning för layout. Ställ också in en gräns för att definiera korten, gränsradie för vissa kurvor och maxbredd för lyhördhet.

.content-kort,
.produkt-kort,
.profil-kort {
marginal: 20px;
visa: böja;
flex-riktning: kolumn;
gräns: 2pxfast#ccc;
gränsradie: 7px;
maximal bredd: 250px;
}

Fokusera nu på varje kort, börja med innehållskortet, och ge det en bakgrundsfärg och vaddering. Lägg till efterkommande väljare för elementen i innehållskortet.

Styla bilden med maximal bredd och gränsradie. Ställ in marginal, teckensnittsfamilj och teckenstorlek för h3. För ankartaggen, ta bort textdekoration och ställ in färg, marginal-top och teckenstorlek.

.content-kort {
bakgrund: #E9724C;
stoppning: 10px;
}
.content-kortimg {
maximal bredd: 100%;
gränsradie: 5px;
}
.content-korth3 {
marginal: 10px 0;
typsnittsfamilj: monospace;
textstorlek: 1.5rem;
}
.content-korta {
text-dekoration: ingen;
Färg: #6f2ed8;
marginal:12px 0 7px 0;
textstorlek: 1rem;
}

Produktkortet kommer att kräva mer stil på grund av dess extra element. Skapa väljare för varje underordnat element och utforma dem därefter.

De knapp elementet innehåller flest stilattribut för att uppnå uppmaningseffekten. Justera endast knappen till höger genom att ställa in align-self till flex-end i ankarväljaren.

.produkt-kortimg {
gränsradie: 5px 5px 0 0;
bredd: 100%;
}
.produkt-korth3 {
marginal: 5px 10px;
typsnittsfamilj: monospace;
textstorlek: 1.5rem;
}
.produkt-kortsid {
marginal: 5px 10px;
typsnittsfamilj: Georgien, 'TiderNyRoman', Tider, serif;
}
.produkt-korta {
anpassa sig: flex-ände;
}
.produkt-kortknapp {
bredd: 100px;
höjd: 30px;
marginal: 10px;
gräns: 1pxfast#8f3642;
gränsradie: 4px;
bakgrundsfärg: #FFC857;
teckensnittsvikt: 700;
markören: pekare;
}

Stil till sist profilkortet. Ställ in ramradien längst upp till höger och uppe till vänster på bilden för att matcha behållaren. Justera bildstorleken och passa om det behövs. Använd minst två teckensnittstyper och komplementfärger på texter för definition. Du kan också göra det handlingsbara elementet – dvs. ankarmärket – stick ut med en gräns.

.profil-kortimg {
gränsradie: 5px 5px 0 0;
höjd: 200px;
objektpassning: omslag;
}
.profil-korth3 {
marginal: 10px;
typsnittsfamilj: monospace;
textstorlek: 1.5rem;
}
.profil-kortsid:först av typen {
marginal:0px 10px;
typsnittsfamilj: 'TiderNyRoman', Tider, serif;
Färg: blåklintblå;
}
.profil-kortsid:sista av typen {
marginal: 5px 10px;
textstorlek: 0.9rem;
}
.profil-korta {
text-dekoration: ingen;
marginal: 5px 10px 10px 10px;
stoppning: 5px 15px;
anpassa sig: Centrum;
gräns: 1pxfastblåklintblå;
gränsradie: 15px;
Färg: svart;
typsnittsfamilj: monospace;
teckensnittsvikt: 500;
}

Efter styling ska dina kort se ut så här:

Kortlayout och flexibilitet

Lyhördhet är avgörande för att ge en sömlös upplevelse med gränssnittet över enheter. Du kan använd antingen CSS Flexbox eller CSS Grid för layouten. Äntligen kan du använd mediafrågor för att bli lyhörd.

Använder CSS Flexbox

För det första, lägg till ett visningsattribut och ställ in det på flex på din kortbehållareväljare. Applicera flex-wrap och ställ in den så att korten kan slås in i en liten skärmstorlek.

Ställ också in align-objekt och motivera-innehåll egenskaper efter dina önskemål.

​​​​​​.kort-behållare {
stoppning: 20px;
visa: böja;
flex-wrap: slå in;
align-objekt: Centrum;
motivera-innehåll: utrymmet jämnt;
}

Sidan ska se ut så här:

Det avslutar responsen på större skärmstorlekar. För en mindre visningsport, som en mobiltelefon, kan du använda en mediafrågeregel och ställa in maxbredden.

Bestäm vilka element du vill ändra i mediefrågan. I det här fallet kommer kortbehållaren att ändras.

Ställ in flex-riktning till kolumn, så att korten staplas vertikalt. För att visa korten i mitten av skärmen, horisontellt, ställ in egenskaperna justify-content och align-items till center:

@media skärm och (maximal bredd:480 pixlar) {
.kort-behållare {
flex-riktning: kolumn;
motivera-innehåll: Centrum;
align-objekt: Centrum;
 }
}

För att se mediafrågeeffekten, kontrollera koden på CodePen.

Använder CSS Grid

Ställ först in kortbehållarens display på rutnät. Använda sig av rutnät-mall-kolumner för att låta korten justera sin bredd automatiskt. Använda en rutnätsgap för avstånd mellan korten. Använda sig av motivera-objekt för att centrera korten.

.kort-behållare {
stoppning: 20px;
visa: rutnät;
rutnät-mall-kolumner: upprepa(automatisk passning, min Max(300px, 1fr));
rutnätsgap: 20px;
motivera-objekt: Centrum;
}

Sidan ska se ut så här:

Använd en mediefråga för mobilskärmar. Inom frågan ändrar du rutnätslayouten för mindre visningsportar. Uppsättning rutnät-mall-kolumner till 1fr för att få varje kort att uppta hela bredden. Även inställning motivera-objekt och align-objekt egenskaper att centrera kommer att centrera korten både horisontellt och vertikalt.

@media skärm och (maximal bredd:480 pixlar) {
.kort-behållare {
rutnät-mall-kolumner: 1fr;
motivera-objekt: Centrum;
align-objekt: Centrum;
 }
}

Förbi kombinerar CSS Grid och mediafrågor, kommer korten att lindas på större skärmar och staplas vertikalt på mindre skärmar, vilket ger en responsiv kortlayout. För att se mediafrågeeffekten, kontrollera koden på CodePen.

Tillgänglighetsöverväganden för kortkomponenter

Det är avgörande att se till att kortkomponenter du skapar är tillgängliga för alla användare, inklusive de med funktionshinder. Här är några viktiga överväganden för att göra kortkomponenter mer tillgängliga:

• Semantisk HTML
• Tangentbordsnavigering
• Fokus stilar
• ARIA-etiketter och roller
• Alt text
• Korrekt rubrikstruktur
• Färgkontrast

Genom att implementera dessa tillgänglighetsaspekter kan webbutvecklare säkerställa att kortkomponenter är inkluderande.

Anpassning och ytterligare utforskning

Du kan gå längre med att anpassa din kortkomponent. Här är några idéer du kan titta på:

• Övergångar och animationer
• Bildstilar
• Bakgrund och färgscheman
• Border stilar
• Interaktiva element

Det finns många olika sätt på vilka du kan anpassa dina kortkomponenter, så experimentera gärna.

Skapa visuellt tilltalande och responsiva kortkomponenter

Kortkomponenter kan spela en roll på nästan vilken webbplats som helst. Att skapa en med HTML och CSS är lätt, men att veta hur man hanterar tillgänglighet är också viktigt.

Det finns andra CSS-effekter du kan prova, som CSS-filter och blandningsläge för visuella effekter. Träna på att skapa mer med olika anpassningar för visuellt tilltalande.