Card
Banking
Widget
Css
Html
Collection de widgets carte bancaire en HTML CSS avec styles fintech, apercus de cartes et compositions visuelles.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Carte Bancaire Style 01 | AngularForAll</title>
<style>
/* ========== RESET & BASE ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #0b1120 0%, #1a2333 100%);
min-height: 100vh;
padding: 3rem 2rem;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #e2e8f0;
}
h1 {
font-size: 3.2rem;
font-weight: 700;
text-align: center;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #c084fc, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.subtitle {
text-align: center;
color: #94a3b8;
margin-bottom: 3rem;
font-size: 1.2rem;
border-bottom: 1px solid #334155;
padding-bottom: 1.5rem;
}
/* ========== GRILLE DE CARTES ========== */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 2.5rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Conteneur de démo */
.card-demo {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 32px;
padding: 2rem 1.8rem 2.2rem;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.6);
transition: transform 0.25s, box-shadow 0.3s;
}
.card-demo:hover {
transform: translateY(-6px);
box-shadow: 0 35px 50px -18px #000000;
border-color: rgba(255, 255, 255, 0.1);
}
.demo-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: #f1f5f9;
display: flex;
align-items: center;
gap: 8px;
}
.demo-desc {
color: #94a3b8;
font-size: 0.9rem;
margin-bottom: 1.8rem;
padding-bottom: 0.8rem;
border-bottom: 1px dashed #334155;
}
/* ========== STYLES COMMUNS POUR LES CARTES ========== */
.credit-card {
width: 100%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 16 / 10;
border-radius: 20px;
padding: 1.3rem 1.2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 15px 25px -8px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
font-family: 'Courier New', 'Source Code Pro', monospace;
position: relative;
overflow: hidden;
}
.credit-card:hover {
transform: scale(1.02) translateY(-5px);
box-shadow: 0 25px 35px -10px black;
}
/* Éléments communs */
.card-chip {
width: 42px;
height: 32px;
background: linear-gradient(135deg, #d4d4d8, #a1a1aa, #e4e4e7);
border-radius: 8px;
margin-bottom: 8px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
position: relative;
}
.card-chip::after {
content: "";
position: absolute;
top: 6px; left: 8px; right: 8px; bottom: 6px;
background: repeating-linear-gradient(90deg, #71717a 0px, #71717a 2px, transparent 2px, transparent 5px);
border-radius: 4px;
}
.card-number {
font-size: 1.4rem;
letter-spacing: 3px;
font-weight: 500;
margin: 8px 0 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
word-spacing: 8px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 0.9rem;
text-transform: uppercase;
opacity: 0.9;
}
.card-holder {
font-weight: 500;
letter-spacing: 1px;
}
.card-expiry {
font-weight: 500;
}
.card-brand {
font-size: 1.6rem;
font-weight: 700;
align-self: flex-end;
opacity: 0.8;
}
/* ========== 1. CARTE CLASSIQUE VISA ========== */
.card-1 {
background: linear-gradient(145deg, #1e293b, #0f172a);
border: 1px solid #475569;
color: #f8fafc;
}
.card-1 .card-brand {
background: linear-gradient(45deg, #1e3a8a, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
}
/* ========== 2. MASTERCARD DÉGRADÉ ORANGE/ROUGE ========== */
.card-2 {
background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
color: white;
}
.card-2 .card-brand {
display: flex;
gap: 0;
font-size: 1.8rem;
}
.card-2 .brand-circle {
width: 28px; height: 28px;
border-radius: 50%;
background: #ef4444;
opacity: 0.9;
margin-right: -8px;
}
.card-2 .brand-circle:last-child {
background: #fbbf24;
margin-right: 0;
}
/* ========== 3. CARTE NOIRE PREMIUM ========== */
.card-3 {
background: #0a0a0a;
background-image: radial-gradient(circle at 30% 20%, #2a2a2a, #000000);
border: 1px solid #3f3f46;
color: #d4d4d8;
box-shadow: 0 20px 30px -8px black, inset 0 0 0 1px #3f3f4650;
}
.card-3 .card-brand {
color: #a3a3a3;
font-weight: 400;
letter-spacing: 3px;
}
/* ========== 4. AMERICAN EXPRESS STYLE ========== */
.card-4 {
background: linear-gradient(125deg, #1e3a5f 0%, #0f766e 100%);
color: #ecfdf5;
}
.card-4 .card-number {
letter-spacing: 4px;
word-spacing: 10px;
}
.card-4 .card-brand {
font-family: 'Times New Roman', serif;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ========== 5. CARTE VITRE (GLASS) ========== */
.card-5 {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}
.card-5 .card-brand {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 5px black;
}
/* ========== 6. CARTE NÉON CYBERPUNK ========== */
.card-6 {
background: #0b0e14;
border: 1px solid #06b6d4;
box-shadow: 0 0 20px #06b6d480, inset 0 0 10px #0891b220;
color: #cffafe;
}
.card-6 .card-number {
color: #22d3ee;
text-shadow: 0 0 8px #06b6d4;
}
.card-6 .card-brand {
color: #f0fdfa;
text-shadow: 0 0 10px cyan;
}
/* ========== 7. CARTE MINIMALISTE (ligne épurée) ========== */
.card-7 {
background: #f8fafc;
color: #0f172a;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
border: 1px solid #e2e8f0;
}
.card-7 .card-chip {
background: #cbd5e1;
}
.card-7 .card-brand {
color: #1e293b;
}
/* ========== 8. CARTE AVEC MOTIF GÉOMÉTRIQUE ========== */
.card-8 {
background: #1e1b4b;
background-image:
linear-gradient(45deg, #312e81 20%, transparent 20%),
linear-gradient(-45deg, #4338ca 20%, transparent 20%);
background-size: 30px 30px;
color: #e0e7ff;
border: 1px solid #6366f1;
}
/* ========== 9. CARTE OR (LUXE) ========== */
.card-9 {
background: linear-gradient(145deg, #b45309, #92400e, #78350f);
border: 1px solid #fbbf24;
color: #fef3c7;
box-shadow: 0 15px 25px #451a03, inset 0 0 30px #f59e0b40;
}
.card-9 .card-number {
color: #fde68a;
}
.card-9 .card-brand {
color: #fbbf24;
}
/* ========== 10. CARTE FUTURISTE LED ========== */
.card-10 {
background: #020617;
border: 1px solid #38bdf8;
color: #bae6fd;
position: relative;
}
.card-10::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(45deg, #0ea5e9, #8b5cf6, #ec4899, #0ea5e9);
border-radius: 22px;
z-index: -1;
opacity: 0.5;
filter: blur(8px);
transition: opacity 0.3s;
}
.card-10:hover::before {
opacity: 0.9;
filter: blur(12px);
}
.card-10 .card-number {
font-family: 'Orbitron', 'Segoe UI', monospace;
letter-spacing: 6px;
color: #7dd3fc;
}
/* ========== ANIMATIONS SUPPLÉMENTAIRES ========== */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Responsive */
@media (max-width: 500px) {
body { padding: 1.5rem 1rem; }
h1 { font-size: 2.3rem; }
.credit-card { max-width: 280px; padding: 1rem; }
.card-number { font-size: 1.1rem; letter-spacing: 2px; }
}
</style>
</head>
<body>
<h1>💳 Cartes Bancaires</h1>
<div class="subtitle">10 widgets · design premium · CSS pur</div>
<div class="cards-grid">
<!-- 1. VISA CLASSIQUE -->
<div class="card-demo">
<div class="demo-title">🇻 Visa Classique</div>
<div class="demo-desc">Dégradé sombre · finition mate</div>
<div class="credit-card card-1">
<div>
<div class="card-chip"></div>
<div class="card-number">4532 7891 2345 6789</div>
</div>
<div class="card-footer">
<span class="card-holder">ALEXANDRE DUBOIS</span>
<span class="card-expiry">08/28</span>
</div>
<div class="card-brand">VISA</div>
</div>
</div>
<!-- 2. MASTERCARD DÉGRADÉ -->
<div class="card-demo">
<div class="demo-title">🔥 Mastercard Heat</div>
<div class="demo-desc">Dégradé orange/rouge iconique</div>
<div class="credit-card card-2">
<div>
<div class="card-chip"></div>
<div class="card-number">5412 7512 3456 7890</div>
</div>
<div class="card-footer">
<span class="card-holder">SOPHIE MARTIN</span>
<span class="card-expiry">11/26</span>
</div>
<div class="card-brand">
<span class="brand-circle"></span>
<span class="brand-circle"></span>
</div>
</div>
</div>
<!-- 3. CARTE NOIRE -->
<div class="card-demo">
<div class="demo-title">🖤 Black Infinite</div>
<div class="demo-desc">Noir profond · exclusif</div>
<div class="credit-card card-3">
<div>
<div class="card-chip"></div>
<div class="card-number">4000 1234 5678 9010</div>
</div>
<div class="card-footer">
<span class="card-holder">LUC BERNARD</span>
<span class="card-expiry">03/29</span>
</div>
<div class="card-brand">PLATINUM</div>
</div>
</div>
<!-- 4. AMERICAN EXPRESS -->
<div class="card-demo">
<div class="demo-title">💠 Amex Style</div>
<div class="demo-desc">Bleu sarcelle · chiffres en 4 groupes</div>
<div class="credit-card card-4">
<div>
<div class="card-chip"></div>
<div class="card-number">3782 822463 10005</div>
</div>
<div class="card-footer">
<span class="card-holder">EMMA LEROY</span>
<span class="card-expiry">07/27</span>
</div>
<div class="card-brand">AMEX</div>
</div>
</div>
<!-- 5. GLASS CARD -->
<div class="card-demo">
<div class="demo-title">🥂 Glassmorphism</div>
<div class="demo-desc">Effet vitre · flou d'arrière-plan</div>
<div class="credit-card card-5">
<div>
<div class="card-chip"></div>
<div class="card-number">4539 1122 8765 4321</div>
</div>
<div class="card-footer">
<span class="card-holder">THOMAS PETIT</span>
<span class="card-expiry">12/25</span>
</div>
<div class="card-brand">VISA</div>
</div>
</div>
<!-- 6. NÉON CYBERPUNK -->
<div class="card-demo">
<div class="demo-title">⚡ Cyber Neon</div>
<div class="demo-desc">Lueur cyan · effet numérique</div>
<div class="credit-card card-6">
<div>
<div class="card-chip"></div>
<div class="card-number">5156 2323 9876 1111</div>
</div>
<div class="card-footer">
<span class="card-holder">NEO ANDERSON</span>
<span class="card-expiry">04/31</span>
</div>
<div class="card-brand">MC</div>
</div>
</div>
<!-- 7. MINIMALISTE -->
<div class="card-demo">
<div class="demo-title">📄 Épure</div>
<div class="demo-desc">Clair · épuré · professionnel</div>
<div class="credit-card card-7">
<div>
<div class="card-chip"></div>
<div class="card-number">4026 5489 3210 7654</div>
</div>
<div class="card-footer">
<span class="card-holder">JULIE MOREAU</span>
<span class="card-expiry">09/26</span>
</div>
<div class="card-brand">VISA</div>
</div>
</div>
<!-- 8. MOTIF GÉOMÉTRIQUE -->
<div class="card-demo">
<div class="demo-title">🔷 Geo Pattern</div>
<div class="demo-desc">Arrière-plan à chevrons</div>
<div class="credit-card card-8">
<div>
<div class="card-chip"></div>
<div class="card-number">5391 4422 8763 1098</div>
</div>
<div class="card-footer">
<span class="card-holder">MARC LEFEVRE</span>
<span class="card-expiry">01/28</span>
</div>
<div class="card-brand">MC</div>
</div>
</div>
<!-- 9. CARTE OR -->
<div class="card-demo">
<div class="demo-title">👑 Gold Elite</div>
<div class="demo-desc">Teintes dorées · premium</div>
<div class="credit-card card-9">
<div>
<div class="card-chip"></div>
<div class="card-number">4111 2222 3333 4444</div>
</div>
<div class="card-footer">
<span class="card-holder">CLARA DUPONT</span>
<span class="card-expiry">06/27</span>
</div>
<div class="card-brand">VISA GOLD</div>
</div>
</div>
<!-- 10. FUTURISTE LED -->
<div class="card-demo">
<div class="demo-title">🚀 Futuriste LED</div>
<div class="demo-desc">Bordure animée · lueur RGB</div>
<div class="credit-card card-10">
<div>
<div class="card-chip"></div>
<div class="card-number">6011 7788 9900 1234</div>
</div>
<div class="card-footer">
<span class="card-holder">ZOE RICHARD</span>
<span class="card-expiry">10/30</span>
</div>
<div class="card-brand">DISCOVER</div>
</div>
</div>
</div>
<!-- Séparateur décoratif -->
<div style="margin-top: 4rem; text-align: center; opacity: 0.6; color: #64748b; font-size: 0.9rem; border-top: 1px solid #1e293b; padding-top: 2rem;">
<p>✨ Toutes les cartes sont purement illustratives — survolez pour l'effet ✨</p>
<p style="margin-top: 0.5rem;">💡 Chip · numéro · titulaire · expiration · marque</p>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur