Creazione di componenti di carte personalizzati con HTML e CSS

Sebbene i componenti delle carte possano sembrare semplici, ci sono criteri specifici da considerare durante la loro creazione. Incontrerai vari tipi di componenti della scheda per cominciare e, come sviluppatore web, devi assicurarti che la tua interfaccia sia accessibile.

Scopri come creare componenti di carte utilizzando HTML e CSS e scopri le considerazioni sull'accessibilità e la personalizzazione.

Struttura HTML per i componenti della carta

L'anatomia di una carta include il contenitore della carta, la sua intestazione, immagine e corpo e un piè di pagina facoltativo.

Creerai tre semplici componenti della scheda: contenuto, prodotto e schede del profilo. Questi sono alcuni dei tipi di carte più comuni trovati sul web.

Inizia creando un contenitore div, nidificando altri tre tag div con attributi di classe per ciascuna scheda al suo interno, con elementi figlio appropriati per ciascuna delle tre schede. Dovresti usare elementi che rappresentino tutte le parti dell'anatomia della carta. Ad esempio, la scheda dei contenuti ha un tag immagine per i media, un tag h3 per il titolo e un tag p per il testo.

<divclasse="contenitore di carte">
 Scheda contenuto 
<divclasse="carta contenuto">
<immsrc=" 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'area di lavoro con un taccuino con tastiera, una tazza di caffè e un auricolare">
<h3>Titoloh3>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Anno Domini
 exceptionuri explicabo molestiae natus magnam rem...P>
<UNhref="#">Per saperne di piùUN>
div>
 Scheda prodotto 
<divclasse="scheda-prodotto">
<immsrc=" 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="Cuffie su sfondo giallo">
<h3>nome del prodottoh3>
<P>$19.99P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.P>
<UNhref="#"><pulsante>Aggiungi al carrellopulsante>UN>
div>
 Scheda profilo 
<divclasse="carta-profilo">
<immsrc=" 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 maschio bianco che indossa una camicia nera abbottonata">
<h3>John Doeh3>
<P>Sviluppatore webP>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?P>
<UNhref="#"classe="link al profilo">Vedi profiloUN>
div>
div>

Ecco come dovrebbe apparire nel tuo browser, per impostazione predefinita, prima di applicare qualsiasi stile personalizzato:

Se desideri creare più schede o includere più contenuti in una singola scheda, fallo prima di continuare.

Stile CSS per i componenti delle carte

Usando i CSS, puoi modellare individualmente ogni carta per renderla visivamente accattivante. Usa il selettore universale resettare margini, imbottiture, e posiziona usando dimensionamento della scatola. Quindi modella il contenitore dandogli un'imbottitura per creare spazio.

​​​​​​* {
margine: 0;
imbottitura: 0;
dimensionamento della scatola: scatola di confine;
}
.carta-contenitore {
imbottitura: 20px;
}

Quindi, usa un selettore multiplo per tutte le carte, dagli un margine per fornire spazio attorno a ciascuna carta e imposta il Schermo E direzione flessibile per la disposizione. Inoltre, imposta un bordo per definire le carte, border-radius per alcune curve e max-width per la reattività.

.scheda-contenuto,
.scheda-prodotto,
.scheda-profilo {
margine: 20px;
Schermo: flettere;
direzione flessibile: colonna;
confine: 2pxsolido#ccc;
bordo-raggio: 7px;
larghezza massima: 250px;
}

Ora concentrati su ogni scheda, iniziando dalla scheda dei contenuti, e assegnale un colore di sfondo e una spaziatura interna. Aggiungi selettori discendenti per gli elementi nella scheda dei contenuti.

Modella l'immagine con larghezza massima e bordo-raggio. Imposta il margine, la famiglia di caratteri e la dimensione del carattere per h3. Per il tag di ancoraggio, rimuovi la decorazione del testo e imposta il colore, il margine superiore e la dimensione del carattere.

.scheda-contenuto {
sfondo: #E9724C;
imbottitura: 10px;
}
.scheda-contenutoimm {
larghezza massima: 100%;
bordo-raggio: 5px;
}
.scheda-contenutoh3 {
margine: 10px 0;
famiglia di font: monospazio;
dimensione del font: 1.5rim;
}
.scheda-contenutoUN {
decorazione del testo: nessuno;
colore: #6f2ed8;
margine:12px 0 7px 0;
dimensione del font: 1rem;
}

La scheda prodotto richiederà più stile a causa dei suoi elementi extra. Crea selettori per ogni elemento figlio e modellali di conseguenza.

IL pulsante L'elemento contiene la maggior parte degli attributi di stile per ottenere l'effetto di invito all'azione. Allinea solo il pulsante a destra impostando align-self su flex-end nel selettore di ancoraggio.

.scheda-prodottoimm {
bordo-raggio: 5px 5px 0 0;
larghezza: 100%;
}
.scheda-prodottoh3 {
margine: 5px 10px;
famiglia di font: monospazio;
dimensione del font: 1.5rim;
}
.scheda-prodottoP {
margine: 5px 10px;
famiglia di font: Georgia, 'VolteNuovoromano', Volte, serif;
}
.scheda-prodottoUN {
align-self: estremità flessibile;
}
.scheda-prodottopulsante {
larghezza: 100px;
altezza: 30px;
margine: 10px;
confine: 1pxsolido#8f3642;
bordo-raggio: 4px;
colore di sfondo: #FFC857;
font-weight: 700;
cursore: puntatore;
}

Infine, modella la scheda del profilo. Imposta il raggio del bordo in alto a destra e in alto a sinistra dell'immagine in modo che corrisponda al contenitore. Regola le dimensioni dell'immagine e adatta se necessario. Usa almeno due tipi di carattere e colori complementari sui testi per la definizione. Inoltre, puoi rendere l'elemento utilizzabile, ad es. il tag di ancoraggio: distinguiti con a confine.

.scheda-profiloimm {
bordo-raggio: 5px 5px 0 0;
altezza: 200px;
adattamento all'oggetto: copertina;
}
.scheda-profiloh3 {
margine: 10px;
famiglia di font: monospazio;
dimensione del font: 1.5rim;
}
.scheda-profiloP:primo tipo {
margine:0px 10px;
famiglia di font: 'VolteNuovoromano', Volte, serif;
colore: fiordaliso;
}
.scheda-profiloP:ultimo del tipo {
margine: 5px 10px;
dimensione del font: 0.9rim;
}
.scheda-profiloUN {
decorazione del testo: nessuno;
margine: 5px 10px 10px 10px;
imbottitura: 5px 15px;
align-self: centro;
confine: 1pxsolidofiordaliso;
bordo-raggio: 15px;
colore: nero;
famiglia di font: monospazio;
font-weight: 500;
}

Dopo lo styling, le tue carte dovrebbero apparire così:

Layout e flessibilità delle carte

La reattività è fondamentale per fornire un'esperienza senza soluzione di continuità con l'interfaccia su tutti i dispositivi. Puoi usa CSS Flexbox o CSS Grid per la disposizione. Finalmente puoi utilizzare le media query per la reattività.

Utilizzo di CSS FlexBox

In primo luogo, aggiungi un attributo di visualizzazione e impostalo su flex sul selettore del contenitore di carte. Applica il flex-wrap e impostalo su wrap, in modo che le carte possano avvolgersi all'interno di uno schermo di piccole dimensioni.

Inoltre, imposta il align-elementi E giustificare il contenuto proprietà al tuo desiderio.

​​​​​​.carta-contenitore {
imbottitura: 20px;
Schermo: flettere;
flex-wrap: avvolgere;
align-elementi: centro;
giustificare il contenuto: spazio uniforme;
}

La pagina dovrebbe essere simile a questa:

Ciò conclude la reattività su schermi di dimensioni maggiori. Per un viewport più piccolo, come un telefono cellulare, puoi utilizzare una regola di media query e impostare la larghezza massima.

All'interno della media query, determina quali elementi desideri modificare. In questo caso, il contenitore della carta cambierà.

Impostare il direzione flessibile A colonna, quindi le carte si impilano verticalmente. Per visualizzare le schede al centro dello schermo, orizzontalmente, imposta le proprietà justify-content e align-items su center:

@media schermo E (larghezza massima:480 pixel) {
.carta-contenitore {
direzione flessibile: colonna;
giustificare il contenuto: centro;
align-elementi: centro;
 }
}

Per vedere l'effetto della media query, controlla il codice su CodePen.

Utilizzo della griglia CSS

Innanzitutto, imposta la visualizzazione del contenitore della scheda su griglia. Utilizzo colonne-modello-griglia per consentire alle carte di regolare automaticamente la loro larghezza. Usare un gap di griglia per la spaziatura tra le carte. Utilizzo giustificare gli elementi per centrare le carte.

.carta-contenitore {
imbottitura: 20px;
Schermo: griglia;
colonne-modello-griglia: ripetere(auto-fit, minimo Massimo(300px, 1fr));
gap di griglia: 20px;
giustificare gli elementi: centro;
}

La pagina dovrebbe essere simile a questa:

Per gli schermi dei dispositivi mobili, applica una media query. All'interno della query, modificare il layout della griglia per finestre più piccole. Impostato colonne-modello-griglia A 1fr per fare in modo che ogni carta occupi l'intera larghezza. Inoltre, impostazione giustificare gli elementi E align-elementi properties to center centrerà le carte sia orizzontalmente che verticalmente.

@media schermo E (larghezza massima:480 pixel) {
.carta-contenitore {
colonne-modello-griglia: 1fr;
giustificare gli elementi: centro;
align-elementi: centro;
 }
}

Di combinando CSS Grid e media query, le carte si avvolgeranno su schermi più grandi e si impileranno verticalmente su schermi più piccoli, ottenendo un layout di carte reattivo. Per vedere l'effetto della media query, controlla il codice su CodePen.

Considerazioni sull'accessibilità per i componenti della scheda

È fondamentale garantire che i componenti della carta che crei siano accessibili a tutti gli utenti, compresi quelli con disabilità. Ecco alcune considerazioni chiave per rendere i componenti delle carte più accessibili:

• HTML semantico
• Navigazione da tastiera
• Stili di messa a fuoco
• Etichette e ruoli ARIA
• Testo alternativo
• Struttura dell'intestazione corretta
• Contrasto di colore

Implementando queste considerazioni sull'accessibilità, gli sviluppatori web possono garantire che i componenti della carta siano inclusivi.

Personalizzazione e ulteriore esplorazione

Puoi andare oltre con la personalizzazione del componente della tua carta. Ecco alcune idee che puoi esaminare:

• Transizioni e animazioni
• Stili di immagine
• Sfondo e combinazioni di colori
• Stili di bordo
• Elementi interattivi

Ci sono molti modi diversi in cui puoi personalizzare i componenti della tua carta, quindi sentiti libero di sperimentare.

Crea componenti di carte visivamente accattivanti e reattivi

I componenti della carta possono svolgere un ruolo in quasi tutti i siti Web. Crearne uno con HTML e CSS è facile, ma è importante anche sapere come gestire l'accessibilità.

Ci sono altri effetti CSS che puoi provare, come i filtri CSS e la modalità di fusione per gli effetti visivi. Esercitati a creare di più con personalizzazioni diverse per un impatto visivo.