Générateur de conception de cartes
Concevez visuellement de superbes composants de carte CSS. Personnalisez l'arrière-plan, la bordure, l'ombre, le remplissage et le contenu, puis copiez le code HTML + CSS prêt pour la production en un seul clic.
Presets
Background
Border
Border Radius
Shadow
Padding
Hover Effect
Dimensions
Generated Code
<style>
.card-designer {
}
.card-designer-image {
flex-shrink: 0;
}
</style>
<div class="card-designer" style="width: min(360px, 100%); min-height: auto; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column;">
<div class="card-designer-image" style="height: 180px; background: linear-gradient(135deg, #6366f188, #6366f144); border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold;">
🖼️
</div>
<div class="card-designer-content" style="padding: 24px 24px 24px 24px;">
<h3 class="card-designer-title" style="margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: #0f172a;">Card Title</h3>
<p class="card-designer-body" style="margin: 0 0 12px 0; font-size: 0.875rem; line-height: 1.6; color: #475569;">This is a sample card body. Replace this text with your own content to see how it looks in the card design.</p>
<div class="card-designer-footer" style="margin-top: auto; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 0.75rem; color: #64748b;">Card Footer</div>
</div>
</div>Caractéristiques
- Visual Card Builder : personnalisez chaque aspect de votre carte : arrière-plan, bordure, ombre, remplissage et couleurs, le tout avec un aperçu en temps réel. Aucune connaissance CSS requise.
- Sortie HTML + CSS propre : copiez le code HTML et CSS prêt pour la production en un seul clic. Le code généré utilise des noms de classes sémantiques et des propriétés CSS modernes qui fonctionnent partout.
- 6 modèles prédéfinis : commencez à partir de préréglages sélectionnés : blanc pur, accent dégradé, sombre élégant, lueur néon, pastel doux et accent de bordure. Chaque préréglage est entièrement personnalisable.
- Effets de survol inclus : ajoutez des effets de survol interactifs – ascenseur, lueur, surbrillance de bordure ou échelle – sans écrire une seule ligne de CSS. Tous les effets utilisent des transitions CSS fluides.
Cas d'utilisation
- Cartes de blog et d'articles : créez des mises en page de cartes cohérentes pour les aperçus des articles de blog avec des images, des titres, des extraits et des métadonnées en vedette - parfaites pour les pages de destination riches en contenu.
- Profils des membres de l'équipe : concevez des cartes de membre de l'équipe avec des espaces réservés pour les avatars, des noms, des rôles et des sections bio. Utilisez les designs prédéfinis et personnalisez la couleur d’accent par carte.
- Fiches de produits : créez des fiches de produits de commerce électronique avec des zones d'images, des noms de produits, des descriptions et des sections de pied de page pour les prix ou des boutons d'appel à l'action.
- Widgets de tableau de bord : générez des widgets de carte de tableau de bord avec des arrière-plans personnalisés, des bordures subtiles et des effets de survol pour les panneaux de visualisation de données interactifs.
- Grilles de fonctionnalités : créez des cartes de présentation de fonctionnalités pour les pages de destination avec des icônes ou des images en haut, des titres de fonctionnalités et un corps de texte descriptif dans des mises en page de grille réactives.
- Cartes de newsletter par courrier électronique : concevez des blocs de contenu de courrier électronique basés sur des cartes avec des couleurs d'arrière-plan unies, des coins arrondis et une typographie épurée qui s'affichent bien dans les clients de messagerie.
Foire aux questions
Un composant de carte est un conteneur d'interface utilisateur autonome généralement utilisé pour regrouper le contenu associé (comme une image, un titre, une description et un bouton d'action) dans une seule unité visuelle. Les cartes sont construites avec du HTML standard (éléments div) et stylisées avec des propriétés CSS telles que l'arrière-plan, la bordure, le rayon de bordure, l'ombre de la boîte et le remplissage.
Copiez le code HTML + CSS généré et collez-le dans votre projet. Le code comprend une balise de style avec le CSS et le balisage de la carte HTML. Pour la production, vous pouvez extraire le CSS dans votre feuille de style et conserver le HTML dans votre composant. Les noms de classe sont préfixés par « card-designer » pour éviter les conflits.
Oui! Définissez le champ Largeur dans l'onglet Conception. Utilisez px pour les largeurs fixes (par exemple, "360px"), des pourcentages pour les largeurs fluides (par exemple, "100%") ou des fonctions CSS comme min() (par exemple, "min(360px, 100%)") pour un comportement réactif. L'aperçu est mis à jour en temps réel afin que vous puissiez voir exactement à quoi il ressemble.
Cinq effets de survol : Lift (déplace la carte vers le haut avec une ombre), Glow (ajoute une ombre lumineuse colorée), Border (met en évidence la bordure), Scale (agrandit doucement) et Aucun. Chaque effet utilise des transitions CSS fluides (facilité de 0,2 s) pour une sensation soignée. Choisissez parmi le sélecteur d'effet de survol dans l'onglet Conception.
Oui : activez "Afficher l'espace réservé à l'image" dans l'onglet Contenu. Un espace réservé dégradé apparaîtra en haut de la carte. Vous pouvez également définir l'image en mode « Arrière-plan » où elle se fond derrière le contenu. Remplacez l'emoji et le dégradé d'espace réservé par l'URL de votre image réelle dans le code généré.
Enveloppez plusieurs instances de carte dans un conteneur CSS Grid ou Flexbox. Par exemple : affichage : grille ; grille-modèle-colonnes : répéter (auto-fill, minmax (300px, 1fr)); écart : 24 px ; Cela crée une grille réactive dans laquelle les cartes se réorganisent automatiquement en fonction de la largeur de la fenêtre.
La couleur d'accent est utilisée pour les reflets visuels : la barre d'accent de bordure supérieure sur les cartes de style d'accent de bordure, le dégradé d'espace réservé à l'image et l'effet de survol lumineux. Il ajoute un point de contact couleur de marque sans surcharger le design de la carte. Définissez-le dans l'onglet Contenu sous Couleurs du texte.
Le code généré utilise les propriétés CSS standard prises en charge dans la plupart des clients de messagerie modernes (Apple Mail, Outlook pour Mac, application Gmail). Pour le courrier électronique, utilisez des couleurs d'arrière-plan unies (et non des dégradés), des bordures simples et des enveloppes de mise en page basées sur des tableaux autour du code HTML de la carte pour une compatibilité plus large.