Css
List
Css Design
Template
Html
Integration List
Dashboard
List Group CSS optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!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>Snippet List Ul Li CSS 2026 23040044 | AngularForAll</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ---------- RESET & BASE ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: linear-gradient(145deg, #f0f4fa 0%, #e6ecf4 100%);
min-height: 100vh;
padding: 3rem 1.5rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- HEADER ---------- */
.header {
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.header h1 {
font-size: 2.8rem;
font-weight: 800;
background: linear-gradient(135deg, #1a1e2b, #2d3748);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.badge {
background: #1a1e2b;
color: white;
padding: 0.6rem 1.8rem;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.5px;
box-shadow: 0 8px 20px rgba(26, 30, 43, 0.15);
}
/* ---------- GRILLE DE CARTES ---------- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
}
/* Style de base des cartes */
.card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 32px;
padding: 1.8rem;
box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.6);
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 35px 50px -20px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.85);
}
/* En-tête de carte */
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.card-icon {
font-size: 1.8rem;
line-height: 1;
}
.card-header h3 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1e2b;
letter-spacing: -0.01em;
}
/* ---------- STYLES DE LISTES (10 variations) ---------- */
/* 1. TIMELINE VERTICALE AVEC POINTS ANIMÉS */
.list-timeline {
list-style: none;
}
.list-timeline li {
position: relative;
padding: 0.9rem 0 0.9rem 2.2rem;
border-left: 3px solid #cbd5e0;
margin-left: 0.5rem;
font-weight: 500;
color: #2d3748;
transition: all 0.2s;
}
.list-timeline li:last-child {
border-left-color: transparent;
}
.list-timeline li::before {
content: '';
position: absolute;
left: -0.65rem;
top: 1.1rem;
width: 1.1rem;
height: 1.1rem;
background: #3b82f6;
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.list-timeline li:hover::before {
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2);
}
.list-timeline li:hover {
border-left-color: #3b82f6;
padding-left: 2.5rem;
}
/* 2. CARTES MINIATURES DANS LA LISTE */
.list-cards {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.list-cards li {
background: white;
padding: 1rem 1.2rem;
border-radius: 18px;
font-weight: 600;
color: #1e293b;
box-shadow: 0 4px 8px rgba(0,0,0,0.02), 0 0 0 1px rgba(0,0,0,0.02);
display: flex;
align-items: center;
gap: 0.8rem;
transition: all 0.2s;
border: 1px solid transparent;
}
.list-cards li:hover {
border-color: #e2e8f0;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
transform: scale(1.02);
background: #fafcff;
}
.list-cards li::before {
content: "▹";
color: #f59e0b;
font-size: 1.4rem;
}
/* 3. LISTE EN COLONNES AVEC BACKGROUND GRADIENT */
.list-gradient {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.list-gradient li {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.7rem 0.8rem;
border-radius: 14px;
font-weight: 500;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.25);
transition: 0.15s;
}
.list-gradient li:hover {
transform: translateY(-3px);
box-shadow: 0 12px 18px rgba(102, 126, 234, 0.35);
}
/* 4. LISTE AVEC PUCE CROCHET + BARRE DE PROGRESSION SIMULÉE */
.list-progress {
list-style: none;
}
.list-progress li {
padding: 0.7rem 0;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 500;
border-bottom: 1px solid rgba(0,0,0,0.03);
}
.list-progress li::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
background: #10b981;
color: white;
border-radius: 50%;
font-weight: bold;
font-size: 0.9rem;
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}
.progress-value {
margin-left: auto;
font-size: 0.8rem;
background: #e2e8f0;
padding: 0.2rem 0.7rem;
border-radius: 30px;
color: #334155;
font-weight: 600;
}
/* 5. TAGS FLOTTANTS / BULLES */
.list-bubbles {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.7rem;
}
.list-bubbles li {
background: #1e293b;
color: #f1f5f9;
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.2s;
}
.list-bubbles li:hover {
background: #0f172a;
transform: scale(1.05);
box-shadow: 0 10px 15px -5px rgba(0,0,0,0.2);
}
/* 6. LISTE NUMÉROTÉE STYLE MAGAZINE */
.list-magazine {
list-style: none;
counter-reset: magazine-counter;
}
.list-magazine li {
counter-increment: magazine-counter;
padding: 1rem 0 1rem 3.2rem;
position: relative;
font-weight: 600;
font-size: 1.1rem;
border-bottom: 1px dashed #cbd5e0;
}
.list-magazine li:last-child {
border-bottom: none;
}
.list-magazine li::before {
content: counter(magazine-counter);
position: absolute;
left: 0;
top: 0.7rem;
font-size: 2.2rem;
font-weight: 800;
color: rgba(59, 130, 246, 0.2);
line-height: 1;
transition: color 0.2s;
}
.list-magazine li:hover::before {
color: #3b82f6;
}
/* 7. LISTE AVEC ICÔNES ÉMOJI + SURBRILLANCE */
.list-emoji {
list-style: none;
}
.list-emoji li {
padding: 0.75rem 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
font-weight: 500;
border-radius: 16px;
transition: background 0.15s;
}
.list-emoji li:hover {
background: rgba(255,255,240,0.6);
}
.emoji-bullet {
font-size: 1.6rem;
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}
/* 8. LISTE À DEUX COLONNES AVEC BADGES */
.list-twocol {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.list-twocol li {
background: #f8fafc;
border-radius: 20px;
padding: 0.8rem 0.5rem;
text-align: center;
font-weight: 600;
color: #0f172a;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
transition: all 0.2s;
}
.list-twocol li:hover {
background: #ffffff;
border-color: #94a3b8;
box-shadow: 0 8px 16px -6px rgba(0,0,0,0.1);
}
/* 9. LISTE STYLE "SWITCH / TOGGLE" (visuel) */
.list-switch {
list-style: none;
}
.list-switch li {
padding: 0.8rem 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e2e8f0;
}
.list-switch li:last-child {
border-bottom: none;
}
.switch-indicator {
width: 2.8rem;
height: 1.4rem;
background: #cbd5e0;
border-radius: 40px;
position: relative;
transition: background 0.2s;
}
.switch-indicator::after {
content: "";
width: 1.2rem;
height: 1.2rem;
background: white;
border-radius: 50%;
position: absolute;
top: 0.1rem;
left: 0.1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: left 0.2s;
}
.list-switch li:hover .switch-indicator {
background: #3b82f6;
}
.list-switch li:hover .switch-indicator::after {
left: 1.5rem;
}
/* 10. LISTE AVEC FLÈCHE ANIMÉE ET SOULIGNÉ */
.list-arrow {
list-style: none;
}
.list-arrow li {
padding: 0.9rem 0.5rem 0.9rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 2px solid transparent;
transition: border-color 0.2s, padding-left 0.2s;
}
.list-arrow li::before {
content: "→";
color: #ef4444;
font-weight: 800;
font-size: 1.2rem;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.2s, transform 0.2s;
}
.list-arrow li:hover {
border-bottom-color: #ef4444;
padding-left: 0.3rem;
}
.list-arrow li:hover::before {
opacity: 1;
transform: translateX(0);
}
/* Footer des cartes */
.card-footer {
margin-top: 1.2rem;
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive */
@media (max-width: 600px) {
body { padding: 1.5rem 1rem; }
.header h1 { font-size: 2rem; }
.list-gradient { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>◈ 10 cartes · listes redesign</h1>
<div class="badge">pure CSS · no framework</div>
</div>
<div class="card-grid">
<!-- CARD 1 : Timeline verticale -->
<div class="card">
<div class="card-header">
<span class="card-icon">⏳</span>
<h3>Roadmap produit</h3>
</div>
<ul class="list-timeline">
<li>Discovery & recherche</li>
<li>Prototypage rapide</li>
<li>Développement MVP</li>
<li>Lancement bêta</li>
</ul>
<div class="card-footer">4 jalons · Q2 2026</div>
</div>
<!-- CARD 2 : mini cartes -->
<div class="card">
<div class="card-header">
<span class="card-icon">📌</span>
<h3>Tâches prioritaires</h3>
</div>
<ul class="list-cards">
<li>Finaliser les maquettes</li>
<li>Revue de code</li>
<li>Rédaction documentation</li>
</ul>
<div class="card-footer">3 éléments actifs</div>
</div>
<!-- CARD 3 : gradient columns -->
<div class="card">
<div class="card-header">
<span class="card-icon">🌈</span>
<h3>Stack technique</h3>
</div>
<ul class="list-gradient">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Vite</li>
<li>Git</li>
<li>Figma</li>
</ul>
<div class="card-footer">outils quotidiens</div>
</div>
<!-- CARD 4 : checklist + progression -->
<div class="card">
<div class="card-header">
<span class="card-icon">✅</span>
<h3>Objectifs sprint</h3>
</div>
<ul class="list-progress">
<li>Tests unitaires <span class="progress-value">80%</span></li>
<li>Intégration API <span class="progress-value">45%</span></li>
<li>Optimisation images <span class="progress-value">100%</span></li>
<li>Correctifs UI <span class="progress-value">60%</span></li>
</ul>
<div class="card-footer">mise à jour aujourd'hui</div>
</div>
<!-- CARD 5 : bulles / tags -->
<div class="card">
<div class="card-header">
<span class="card-icon">🏷️</span>
<h3>Intérêts & veille</h3>
</div>
<ul class="list-bubbles">
<li>#CSS</li>
<li>#a11y</li>
<li>#DesignTokens</li>
<li>#Jamstack</li>
<li>#WebPerf</li>
<li>#UX</li>
</ul>
<div class="card-footer">6 sujets suivis</div>
</div>
<!-- CARD 6 : style magazine numéroté -->
<div class="card">
<div class="card-header">
<span class="card-icon">📰</span>
<h3>Top lectures</h3>
</div>
<ul class="list-magazine">
<li>Refactoring UI</li>
<li>Design émotionnel</li>
<li>Responsive Web</li>
<li>CSS pour les pros</li>
</ul>
<div class="card-footer">recommandations</div>
</div>
<!-- CARD 7 : émoji + surbrillance -->
<div class="card">
<div class="card-header">
<span class="card-icon">😎</span>
<h3>Humeur du jour</h3>
</div>
<ul class="list-emoji">
<li><span class="emoji-bullet">🚀</span> Productif</li>
<li><span class="emoji-bullet">☕</span> Caféiné</li>
<li><span class="emoji-bullet">🎧</span> Focus musique</li>
<li><span class="emoji-bullet">💡</span> Créatif</li>
</ul>
<div class="card-footer">vibes positives</div>
</div>
<!-- CARD 8 : deux colonnes -->
<div class="card">
<div class="card-header">
<span class="card-icon">🧩</span>
<h3>Micro-interactions</h3>
</div>
<ul class="list-twocol">
<li>Hover scale</li>
<li>Fade in</li>
<li>Slide</li>
<li>Glow</li>
<li>Rotate</li>
<li>Bounce</li>
</ul>
<div class="card-footer">6 effets CSS</div>
</div>
<!-- CARD 9 : switch visuel -->
<div class="card">
<div class="card-header">
<span class="card-icon">⚙️</span>
<h3>Préférences</h3>
</div>
<ul class="list-switch">
<li>Mode sombre <span class="switch-indicator"></span></li>
<li>Notifications <span class="switch-indicator"></span></li>
<li>Animations <span class="switch-indicator"></span></li>
<li>Son <span class="switch-indicator"></span></li>
</ul>
<div class="card-footer">(hover pour simuler)</div>
</div>
<!-- CARD 10 : flèche animée -->
<div class="card">
<div class="card-header">
<span class="card-icon">➡️</span>
<h3>Prochaines étapes</h3>
</div>
<ul class="list-arrow">
<li>Réunion quotidienne</li>
<li>Revue de conception</li>
<li>Déploiement staging</li>
<li>Feedback client</li>
</ul>
<div class="card-footer">agenda · cette semaine</div>
</div>
</div>
<div style="margin-top: 3rem; text-align: center; color: #64748b; font-weight: 500; font-size: 0.9rem; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 2rem;">
◇ 10 styles de listes uniques — pure CSS, zéro framework ◇
</div>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur