Card Generator
Concevez des composants de carte CSS avec aperçu en direct. Ajustez padding, ombre, bordure et effets hover — copiez HTML + CSS.
① Ajustez padding et border radius ② Choisissez ombre et effet hover ③ Copiez CSS et HTML
#FFFFFF
Card Title
Card body text goes here. Describe your content in a few sentences.
/* CSS */
.card {
padding: 24px;
border-radius: 12px;
background: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* HTML */
<div class="card">
<h3 style="margin:0 0 8px">Card Title</h3>
<p style="margin:0 0 16px;opacity:.7;font-size:14px">Card body text goes here. Describe your content in a few sentences.</p>
<button style="padding:8px 16px;border-radius:6px;border:none;cursor:pointer">Action</button>
</div>Qu'est-ce qui fait un bon composant de carte CSS?
Une carte CSS est l'un des patterns UI les plus polyvalents. Elle regroupe du contenu lié dans une unité visuellement contenue avec border-radius et box-shadow. Les niveaux d'ombre suivent une échelle: sm (élévation subtile), md (carte standard), lg (panneau flottant) et xl (modal). Les effets hover ajoutent de l'interactivité: lift avec transform: translateY(-4px) et glow avec une bordure colorée.
Questions fréquentes
Une carte CSS est un bloc UI autonome qui regroupe du contenu lié, avec couleur de fond, border-radius, padding et box-shadow.
box-shadow prend offset horizontal, offset vertical, rayon de flou, rayon de diffusion et couleur. Pour les cartes, utilisez 0 pour l'offset horizontal et de faibles valeurs de flou.
Lift déplace la carte vers le haut avec transform: translateY(-4px) au survol et augmente le box-shadow pour simuler la carte flottant au-dessus de la surface.
Utilisez l'ombre pour les cartes sur fonds blancs ou clairs. Utilisez les bordures sur fonds sombres ou texturés.
Les cartes utilisent typiquement width: 100% avec max-width. Dans les grilles, utilisez CSS Grid avec grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
Petites cartes: 8–12px. Cartes standard: 12–16px. Grands panneaux: 16–24px.
Utilisez des propriétés CSS personnalisées pour les couleurs de fond et d'ombre. En mode sombre, réduisez l'opacité de l'ombre.