Création de composants de carte personnalisés avec HTML et CSS

Bien que les composants de la carte puissent sembler simples, il existe des critères spécifiques à prendre en compte lors de leur création. Vous rencontrerez différents types de composants de carte pour commencer et, en tant que développeur Web, vous devez vous assurer que votre interface est accessible.

Découvrez comment créer des composants de carte à l'aide de HTML et CSS et découvrez les considérations d'accessibilité et la personnalisation.

Structure HTML pour les composants de carte

L'anatomie d'une carte comprend le conteneur de carte, son en-tête, son image et son corps, ainsi qu'un pied de page de carte facultatif.

Vous allez créer trois composants de carte simples: les cartes de contenu, de produit et de profil. Voici quelques-uns des types de cartes les plus courants trouvés sur le Web.

Commencez par créer un conteneur div, en imbriquant trois autres balises div avec des attributs de classe pour chaque carte qu'il contient, avec des éléments enfants appropriés pour chacune des trois cartes. Vous devez utiliser des éléments qui représentent toutes les parties de l'anatomie de la carte. Par exemple, la carte de contenu comporte une balise d'image pour le média, une balise h3 pour le titre et une balise p pour le texte.

<divclasse="carte-conteneur">
 Carte de contenu 
<divclasse="carte de contenu">
<imagesrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"autre=« Un espace de travail avec un bloc-notes à clavier, une tasse de café et une oreillette »>
<h3>Titreh3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Publicité
 excepturi explicabo molestiae natus magnam rem...p>
<unhref="#">En savoir plusun>
div>
 Fiche produit 
<divclasse="fiche-produit">
<imagesrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"autre="Casque sur fond jaune">
<h3>Nom du produith3>
<p>$19.99p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.p>
<unhref="#"><bouton>Ajouter au panierbouton>un>
div>
 Carte de profil 
<divclasse="carte de profil">
<imagesrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"autre="Un homme blanc portant une chemise noire boutonnée">
<h3>Jean Doeh3>
<p>Développeur webp>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat ?p>
<unhref="#"classe="lien de profil">Voir le profilun>
div>
div>

Voici à quoi cela devrait ressembler dans votre navigateur, par défaut, avant d'appliquer un style personnalisé :

Si vous souhaitez créer plus de cartes ou inclure plus de contenu dans une seule carte, faites-le avant de continuer.

Style CSS pour les composants de carte

En utilisant CSS, vous pouvez styliser individuellement chaque carte pour les rendre visuellement attrayantes. Utilisez le sélecteur universel réinitialiser marges, rembourrages, et positionnez-vous à l'aide de dimensionnement de la boîte. Ensuite, stylisez le conteneur en lui donnant un rembourrage pour créer de l'espace.

​​​​​​* {
marge: 0;
rembourrage: 0;
dimensionnement de la boîte: border-box;
}
.card-container {
rembourrage: 20pixels;
}

Ensuite, utilisez un sélecteur multiple pour toutes les cartes, donnez-lui une marge pour fournir de l'espace autour de chaque carte, et définissez le afficher et flex-direction pour la mise en page. Définissez également une bordure pour définir les cartes, border-radius pour certaines courbes et max-width pour la réactivité.

.content-card,
.product-card,
.profile-card {
marge: 20pixels;
afficher: fléchir;
flex-direction: colonne;
frontière: 2pixelssolide#ccc;
rayon de bordure: 7pixels;
largeur maximale: 250pixels;
}

Concentrez-vous maintenant sur chaque carte, en commençant par la carte de contenu, et donnez-lui une couleur d'arrière-plan et un rembourrage. Ajoutez des sélecteurs descendants pour les éléments dans la carte de contenu.

Stylisez l'image avec largeur maximale et rayon de bordure. Définissez la marge, la famille de polices et la taille de police pour le fichier h3. Pour la balise d'ancrage, supprimez la décoration du texte et définissez la couleur, le haut de la marge et la taille de la police.

.content-card {
arrière-plan: #E9724C;
rembourrage: 10pixels;
}
.content-cardimage {
largeur maximale: 100%;
rayon de bordure: 5pixels;
}
.content-cardh3 {
marge: 10pixels 0;
famille de polices: monospace;
taille de police: 1.5rem;
}
.content-cardun {
texte-décoration: aucun;
couleur: #6f2ed8;
marge:12px 0 7pixels 0;
taille de police: 1Rem;
}

La fiche produit demandera plus de style en raison de ses éléments supplémentaires. Créez des sélecteurs pour chaque élément enfant et stylisez-les en conséquence.

Le bouton L'élément contient le plus d'attributs de style pour obtenir l'effet d'incitation à l'action. Alignez uniquement le bouton vers la droite en réglant align-self sur flex-end dans le sélecteur d'ancre.

.product-cardimage {
rayon de bordure: 5pixels 5pixels 0 0;
largeur: 100%;
}
.product-cardh3 {
marge: 5pixels 10pixels;
famille de polices: monospace;
taille de police: 1.5rem;
}
.product-cardp {
marge: 5pixels 10pixels;
famille de polices: Géorgie, 'FoisNouveauromain', Fois, empattement;
}
.product-cardun {
s'aligner: extrémité flexible;
}
.product-cardbouton {
largeur: 100pixels;
hauteur: 30pixels;
marge: 10pixels;
frontière: 1pixelssolide#8f3642;
rayon de bordure: 4pixels;
Couleur de l'arrière plan: #FFC857;
poids de la police: 700;
le curseur: aiguille;
}

Enfin, stylisez la carte de profil. Définissez le rayon de la bordure en haut à droite et en haut à gauche de l'image pour qu'il corresponde au conteneur. Ajustez la taille de l'image et ajustez-la si nécessaire. Utilisez au moins deux types de polices et des couleurs complémentaires sur les textes pour la définition. En outre, vous pouvez rendre l'élément actionnable, c'est-à-dire la balise d'ancrage—démarquez-vous avec une frontière.

.profile-cardimage {
rayon de bordure: 5pixels 5pixels 0 0;
hauteur: 200pixels;
ajustement à l'objet: couverture;
}
.profile-cardh3 {
marge: 10pixels;
famille de polices: monospace;
taille de police: 1.5rem;
}
.profile-cardp: premier du type {
marge:0px 10pixels;
famille de polices: 'FoisNouveauromain', Fois, empattement;
couleur: bleuet;
}
.profile-cardp:dernier du type {
marge: 5pixels 10pixels;
taille de police: 0.9rem;
}
.profile-cardun {
texte-décoration: aucun;
marge: 5pixels 10pixels 10pixels 10pixels;
rembourrage: 5pixels 15pixels;
s'aligner: centre;
frontière: 1pixelssolidebleuet;
rayon de bordure: 15pixels;
couleur: noir;
famille de polices: monospace;
poids de la police: 500;
}

Après le style, vos cartes devraient ressembler à ceci :

Disposition et flexibilité de la carte

La réactivité est essentielle pour offrir une expérience transparente avec l'interface sur tous les appareils. Tu peux utilisez CSS Flexbox ou CSS Grid pour la mise en page. Enfin, vous pouvez utiliser les media queries pour la réactivité.

Utiliser CSS Flexbox

Premièrement, ajoutez un attribut d'affichage et définissez-le sur flex sur votre sélecteur de conteneur de cartes. Appliquez flex-wrap et réglez-le sur wrap, afin que les cartes puissent s'enrouler dans une petite taille d'écran.

Aussi, réglez le aligner les éléments et justifier-contenu propriétés à votre désir.

​​​​​​.card-container {
rembourrage: 20pixels;
afficher: fléchir;
flex-wrap: envelopper;
aligner les éléments: centre;
justifier-contenu: espacer uniformément;
}

La page devrait ressembler à ceci :

Cela conclut la réactivité sur les grandes tailles d'écran. Pour une fenêtre d'affichage plus petite, comme un téléphone mobile, vous pouvez utiliser une règle de requête multimédia et définir la largeur maximale.

Dans la requête multimédia, déterminez les éléments que vous souhaitez modifier. Dans ce cas, le conteneur de la carte changera.

Met le flex-direction pour colonne, de sorte que les cartes s'empilent verticalement. Pour afficher les cartes au centre de l'écran, horizontalement, définissez les propriétés justifier-content et align-items sur center :

@médias filtrer et (largeur maximale:480px) {
.card-container {
flex-direction: colonne;
justifier-contenu: centre;
aligner les éléments: centre;
 }
}

Pour voir l'effet de la requête multimédia, vérifiez le code sur CodePen.

Utilisation de la grille CSS

Tout d'abord, réglez l'affichage du conteneur de cartes sur la grille. Utiliser grille-modèle-colonnes pour permettre aux cartes d'ajuster automatiquement leur largeur. Utiliser un écart de grille pour l'espacement entre les cartes. Utiliser éléments-justifiés pour centrer les cartes.

.card-container {
rembourrage: 20pixels;
afficher: grille;
grille-modèle-colonnes: répéter(ajustement automatique, min max(300pixels, 1en));
écart de grille: 20pixels;
éléments-justifiés: centre;
}

La page devrait ressembler à ceci :

Pour les écrans mobiles, appliquez une requête multimédia. Dans la requête, modifiez la disposition de la grille pour les petites fenêtres. Ensemble grille-modèle-colonnes pour 1fr pour que chaque carte occupe toute la largeur. Aussi, la mise en place éléments-justifiés et aligner les éléments propriétés à centrer centrera les cartes à la fois horizontalement et verticalement.

@médias filtrer et (largeur maximale:480px) {
.card-container {
grille-modèle-colonnes: 1en;
éléments-justifiés: centre;
aligner les éléments: centre;
 }
}

Par combinant CSS Grid et media queries, les cartes s'enrouleront sur des écrans plus grands et s'empileront verticalement sur des écrans plus petits, obtenant une disposition de carte réactive. Pour voir l'effet de la requête multimédia, vérifiez le code sur CodePen.

Considérations d'accessibilité pour les composants de la carte

Il est essentiel de s'assurer que les composants de carte que vous créez sont accessibles à tous les utilisateurs, y compris les personnes handicapées. Voici quelques considérations clés pour rendre les composants de la carte plus accessibles :

• HTML sémantique
• Navigation au clavier
• Styles de mise au point
• Libellés et rôles ARIA
• Texte alternatif
• Structure de titre appropriée
• Contraste des couleurs

En mettant en œuvre ces considérations d'accessibilité, les développeurs Web peuvent s'assurer que les composants de la carte sont inclusifs.

Personnalisation et exploration approfondie

Vous pouvez aller plus loin en personnalisant le composant de votre carte. Voici quelques idées sur lesquelles vous pouvez vous pencher :

• Transitions et animations
• Styles d'images
• Schémas de fond et de couleurs
• Styles de bordure
• Éléments interactifs

Il existe de nombreuses façons de personnaliser les composants de votre carte, alors n'hésitez pas à expérimenter.

Créez des composants de carte visuellement attrayants et réactifs

Les composants de la carte peuvent jouer un rôle dans presque tous les sites Web. En créer un avec HTML et CSS est facile, mais savoir gérer l'accessibilité est également important.

Il existe d'autres effets CSS que vous pouvez essayer, comme les filtres CSS et le mode de fusion pour les effets visuels. Entraînez-vous à créer plus avec différentes personnalisations pour un attrait visuel.