Crearea de componente personalizate de card cu HTML și CSS

În timp ce componentele cardului pot părea simple, există criterii specifice de luat în considerare atunci când le creați. Veți întâlni diverse tipuri de componente de card pentru început și, în calitate de dezvoltator web, trebuie să vă asigurați că interfața dvs. este accesibilă.

Aflați cum să creați componente de card folosind HTML și CSS și aflați despre considerente de accesibilitate și personalizare.

Structura HTML pentru componentele cardului

Anatomia unui card include containerul cardului, antetul, imaginea și corpul acestuia și un subsol opțional al cardului.

Veți crea trei componente simple de card: carduri de conținut, de produs și de profil. Acestea sunt unele dintre cele mai comune tipuri de carduri găsite pe web.

Începeți prin a crea un container div, încadrând încă trei etichete div cu atribute de clasă pentru fiecare card din el, cu elemente copil adecvate pentru fiecare dintre cele trei carduri. Ar trebui să utilizați elemente care să țină cont de toate părțile din anatomia cardului. De exemplu, cardul de conținut are o etichetă de imagine pentru media, o etichetă h3 pentru titlu și o etichetă p pentru text.

<divclasă="container-card">
 Cardul de conținut 
<divclasă="carte de conținut">
<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=„Un spațiu de lucru cu un notebook cu tastatură, o ceașcă de cafea și un căști”>
<h3>Titluh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Anunț
 excepturi explicabo molestiae natus magnam rem...p>
<Ahref="#">Citeşte mai multA>
div>
 Card de produs 
<divclasă="card-produs">
<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=„Căști pe fundal galben”>
<h3>numele produsuluih3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<Ahref="#"><buton>Adaugă in coşbuton>A>
div>
 Card de profil 
<divclasă="carte de profil">
<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=„Un bărbat alb purtând o cămașă neagră cu nasturi”>
<h3>John Doeh3>
<p>Dezvoltator Webp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?p>
<Ahref="#"clasă="link de profil">Vezi profilA>
div>
div>

Iată cum ar trebui să arate în browser, în mod implicit, înainte de a aplica orice stil personalizat:

Dacă doriți să creați mai multe carduri sau să includeți mai mult conținut într-un singur card, faceți acest lucru înainte de a continua.

Stil CSS pentru componentele cardurilor

Folosind CSS, puteți stila individual fiecare card pentru a le face atrăgătoare vizual. Folosiți selectorul universal a reseta marginile, captuseli, și poziționați folosind dimensionarea cutiei. Apoi stilați containerul dându-i căptușeală pentru a crea spațiu.

​​​​​​* {
marginea: 0;
umplutura: 0;
dimensionarea cutiei: cutie-chenar;
}
.carte-container {
umplutura: 20px;
}

Apoi, utilizați un selector multiplu pentru toate cărțile, acordați-i o marjă pentru a oferi spațiu în jurul fiecărei cărți și setați afişa și flex-direcție pentru aspect. De asemenea, setați un chenar pentru a defini cardurile, raza marginii pentru unele curbe și lățimea maximă pentru receptivitate.

.card-conținut,
.card-produs,
.carte-de-profil {
marginea: 20px;
afişa: contracta;
flex-direcție: coloană;
frontieră: 2pxsolid#ccc;
hotar-raza: 7px;
lățimea maximă: 250px;
}

Acum concentrați-vă pe fiecare card, începând cu cardul de conținut și acordați-i o culoare de fundal și o umplutură. Adăugați selectori descendenți pentru elementele din cardul de conținut.

Stilați imaginea cu lățimea maximă și raza de frontieră. Setați marginea, familia de fonturi și dimensiunea fontului pentru h3. Pentru eticheta de ancorare, eliminați decorul textului și setați culoarea, marginea de sus și dimensiunea fontului.

.card-conținut {
fundal: #E9724C;
umplutura: 10px;
}
.card-conținutimg {
lățimea maximă: 100%;
hotar-raza: 5px;
}
.card-conținuth3 {
marginea: 10px 0;
familie de fonturi: monospațial;
marimea fontului: 1.5rem;
}
.card-conținutA {
text-decor: nici unul;
culoare: #6f2ed8;
marginea:12px 0 7px 0;
marimea fontului: 1rem;
}

Cardul de produs va necesita mai mult stil din cauza elementelor sale suplimentare. Creați selectoare pentru fiecare element copil și stilați-le în consecință.

The buton elementul conține cele mai multe atribute de stil pentru a obține efectul de îndemn. Aliniați doar butonul la dreapta setând align-self la capătul flexibil în selectorul de ancorare.

.card-produsimg {
hotar-raza: 5px 5px 0 0;
lăţime: 100%;
}
.card-prodush3 {
marginea: 5px 10px;
familie de fonturi: monospațial;
marimea fontului: 1.5rem;
}
.card-produsp {
marginea: 5px 10px;
familie de fonturi: Georgia, 'TimesNouromân', Times, serif;
}
.card-produsA {
aliniere-sine: flex-end;
}
.card-produsbuton {
lăţime: 100px;
înălţime: 30px;
marginea: 10px;
frontieră: 1pxsolid#8f3642;
hotar-raza: 4px;
culoare de fundal: #FFC857;
grosimea fontului: 700;
cursor: indicator;
}

În cele din urmă, stilați cardul de profil. Setați raza marginii în partea din dreapta sus și din stânga sus a imaginii pentru a se potrivi cu containerul. Ajustați dimensiunea imaginii și potriviți dacă este necesar. Utilizați cel puțin două tipuri de fonturi și culori complementare pe texte pentru definire. De asemenea, puteți face elementul acționabil, adică eticheta de ancorare — ieși în evidență cu a frontieră.

.carte-de-profilimg {
hotar-raza: 5px 5px 0 0;
înălţime: 200px;
potrivire obiect: acoperi;
}
.carte-de-profilh3 {
marginea: 10px;
familie de fonturi: monospațial;
marimea fontului: 1.5rem;
}
.carte-de-profilp:primul de tip {
marginea:0px 10px;
familie de fonturi: 'TimesNouromân', Times, serif;
culoare: albastru de colt;
}
.carte-de-profilp: ultimul de tip {
marginea: 5px 10px;
marimea fontului: 0.9rem;
}
.carte-de-profilA {
text-decor: nici unul;
marginea: 5px 10px 10px 10px;
umplutura: 5px 15px;
aliniere-sine: centru;
frontieră: 1pxsolidalbastru de colt;
hotar-raza: 15px;
culoare: negru;
familie de fonturi: monospațial;
grosimea fontului: 500;
}

După coafare, cărțile dvs. ar trebui să arate astfel:

Aspect card și flexibilitate

Capacitatea de reacție este vitală pentru a oferi o experiență perfectă cu interfața pe toate dispozitivele. Puteți utilizați fie CSS Flexbox, fie CSS Grid pentru aspect. În sfârșit, poți utilizați interogări media pentru receptivitate.

Folosind CSS Flexbox

In primul rand, adăugați un atribut de afișare și setați-l la flex pe selectorul containerului cardului. Aplicați flex-wrap și setați-l să se înfășoare, astfel încât cardurile să se poată înfășura într-o dimensiune mică a ecranului.

De asemenea, setați alinierea elementelor și justifica-conținut proprietăți după dorința dvs.

​​​​​​.carte-container {
umplutura: 20px;
afişa: contracta;
flex-wrap: înfășura;
alinierea elementelor: centru;
justifica-conținut: spațiu-uniform;
}

Pagina ar trebui să arate astfel:

Asta concluzionează capacitatea de răspuns pe ecrane de dimensiuni mai mari. Pentru o fereastră de vizualizare mai mică, cum ar fi un telefon mobil, puteți utiliza o regulă de interogare media și puteți seta lățimea maximă.

În cadrul interogării media, determinați ce elemente doriți să modificați. În acest caz, containerul cardului se va schimba.

Seteaza flex-direcție la coloană, astfel că cărțile se stivuiesc vertical. Pentru a afișa cardurile în centrul ecranului, pe orizontală, setați proprietățile justify-content și align-items la centru:

@mass-media ecran și (lățimea maximă:480px) {
.carte-container {
flex-direcție: coloană;
justifica-conținut: centru;
alinierea elementelor: centru;
 }
}

Pentru a vedea efectul de interogare media, verificați codul activat CodePen.

Folosind CSS Grid

Mai întâi, setați afișajul containerului de card la grilă. Utilizare grilă-șablon-coloane pentru a permite cardurilor să își ajusteze automat lățimea. Folosește o grid-gap pentru distanța dintre cărți. Utilizare justificare-articole pentru a centra cărțile.

.carte-container {
umplutura: 20px;
afişa: grilă;
grilă-șablon-coloane: repeta(auto-adaptare, minim maxim(300px, 1fr));
grid-gap: 20px;
justificare-articole: centru;
}

Pagina ar trebui să arate astfel:

Pentru ecranele mobile, aplicați o interogare media. În cadrul interogării, modificați aspectul grilei pentru ferestre de vizualizare mai mici. A stabilit grilă-șablon-coloane la 1fr pentru ca fiecare card să ocupe toată lățimea. De asemenea, setarea justificare-articole și alinierea elementelor Proprietățile de centrat vor centra cărțile atât pe orizontală, cât și pe verticală.

@mass-media ecran și (lățimea maximă:480px) {
.carte-container {
grilă-șablon-coloane: 1fr;
justificare-articole: centru;
alinierea elementelor: centru;
 }
}

De combinând CSS Grid și interogări media, cardurile se vor înfășura pe ecrane mai mari și se vor stivui vertical pe ecrane mai mici, obținând un aspect al cardului receptiv. Pentru a vedea efectul de interogare media, verificați codul activat CodePen.

Considerații de accesibilitate pentru componentele cardului

Este esențial să vă asigurați că componentele cardului pe care le creați sunt accesibile tuturor utilizatorilor, inclusiv celor cu dizabilități. Iată câteva considerente cheie pentru a face componentele cardului mai accesibile:

• HTML semantic
• Navigare prin tastatură
• Stiluri de focalizare
• Etichete și roluri ARIA
• Alt text
• Structura corectă a titlurilor
• Contrastul culorilor

Prin implementarea acestor considerente de accesibilitate, dezvoltatorii web se pot asigura că componentele cardului sunt incluzive.

Personalizare și explorare ulterioară

Puteți merge mai departe cu personalizarea componentei cardului. Iată câteva idei pe care le puteți analiza:

• Tranziții și animații
• Stiluri de imagine
• Fond și scheme de culori
• Stiluri de chenar
• Elemente interactive

Există o mulțime de moduri diferite în care vă puteți personaliza componentele cardului, așa că nu ezitați să experimentați.

Creați componente de card atrăgătoare și receptive

Componentele cardului pot juca un rol în aproape orice site web. Crearea unuia cu HTML și CSS este ușor, dar este, de asemenea, important să știi cum să gestionezi accesibilitatea.

Există și alte efecte CSS pe care le puteți încerca, cum ar fi filtrele CSS și modul de amestecare pentru efecte vizuale. Exersați să creați mai mult cu personalizare diferită pentru atractivitatea vizuală.