Cartes Interactives - DesignbyStelva

1. Effet d’Inclinaison 3D

Carte 3D

Cette carte s’incline en suivant le mouvement de la souris.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-tilt">...</div>

<!-- CSS -->
.card-demo-tilt {
    transition: transform 0.1s ease;
}

<!-- JavaScript -->
<script>
const card = document.querySelector('.card-demo-tilt');
card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const { width, height } = rect;
    const rotateX = (y / height - 0.5) * -20;
    const rotateY = (x / width - 0.5) * 20;
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener('mouseleave', () => {
    card.style.transform = 'none';
});
</script>

2. Carte qui se Retourne

Survole-moi !

Découvre ce qui se cache derrière.

Bravo !

Ceci est l’autre face de la carte.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-flip">
    <div class="card-face card-front">...</div>
    <div class="card-face card-back">...</div>
</div>

<!-- CSS -->
.card-demo-flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.card-demo-flip:hover {
    transform: rotateY(180deg);
}
.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.card-back {
    transform: rotateY(180deg);
    background: var(--accent-primary);
    color: white;
}

3. Lueur au Survol

Effet « Glow »

Une ombre douce et colorée apparaît au survol.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-glow">...</div>

<!-- CSS -->
.card-demo-glow {
    transition: all 0.3s ease;
}
.card-demo-glow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px 5px rgba(13, 110, 253, 0.2);
}

4. Zoom sur l’Image de Fond

Image Zoom

L’image de fond zoome doucement au survol.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-zoom-bg">...</div>

<!-- CSS -->
.card-demo-zoom-bg {
    background-image: url('URL_IMAGE.jpg');
    background-size: 100%;
    background-position: center;
    transition: background-size 0.4s ease;
}
.card-demo-zoom-bg:hover {
    background-size: 120%;
}

5. Contenu qui Apparaît

Titre du Projet

Description qui apparaît par le bas.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-slide-up">
    <div class="content">...</div>
</div>

<!-- CSS -->
.card-demo-slide-up {
    position: relative;
    overflow: hidden;
}
.card-demo-slide-up .content {
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.card-demo-slide-up:hover .content {
    transform: translateY(0);
}

6. Bordure Animée

Bordure Animée

Une bordure apparaît depuis les coins opposés.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-border">...</div>

<!-- CSS -->
.card-demo-border { position: relative; }
.card-demo-border::before, .card-demo-border::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}
.card-demo-border::before { top: 0; left: 0; }
.card-demo-border::after { bottom: 0; right: 0; }
.card-demo-border:hover::before, .card-demo-border:hover::after {
    width: 100%;
}

7. Dégradé Changeant

Dégradé Animé

Le fond en dégradé change de couleur au survol.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-gradient">...</div>

<!-- CSS -->
.card-demo-gradient {
    background: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
    transition: all 0.4s ease;
}
.card-demo-gradient:hover {
    background: linear-gradient(45deg, #84fab0 0%, #8fd3f4 100%);
}

8. Neumorphism

Neumorphism

Un effet de relief doux et subtil.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-neumorphic">...</div>

<!-- CSS -->
/* Mettre un fond de la même couleur sur le body */
.card-demo-neumorphic {
    background: #e0e5ec;
    box-shadow: 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff;
    border: none;
}

9. Glassmorphism

Glassmorphism

Un effet de verre dépoli, moderne et élégant.

Voir le code

<!-- HTML (à placer sur un fond coloré/image) -->
<div class="card-demo card-demo-glass">...</div>

<!-- CSS -->
.card-demo-glass {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

10. Carte avec Ruban

Nouveauté

Ajoutez un ruban pour mettre en avant une information.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-ribbon">...</div>

<!-- CSS -->
.card-demo-ribbon {
    overflow: hidden;
    position: relative;
}
.card-demo-ribbon::before {
    content: 'Nouveau';
    position: absolute;
    top: 15px;
    right: -30px;
    background: var(--accent-secondary);
    color: white;
    padding: 5px 30px;
    transform: rotate(45deg);
    font-size: 0.8rem;
}

11. Effet Parallaxe

Paysage

Effet de profondeur au survol.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-parallax">
    <img src="..." alt="..." class="card-image">
    <div class="card-text">...</div>
</div>

<!-- CSS -->
.card-demo-parallax { padding: 0; overflow: hidden; }
.card-demo-parallax .card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-demo-parallax:hover .card-image { transform: scale(1.1); }
.card-demo-parallax .card-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: rgba(0,0,0,0.5); color: white; transform: translateY(50px); opacity: 0; transition: all 0.4s ease; }
.card-demo-parallax:hover .card-text { transform: translateY(0); opacity: 1; }

12. Superposition de Couleur

Découvrir

Le contenu se révèle.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-overlay">
    <img src="..." alt="...">
    <div class="overlay-content">...</div>
</div>

<!-- CSS -->
.card-demo-overlay { position: relative; padding: 0; }
.card-demo-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.card-demo-overlay .overlay-content { position: absolute; inset: 0; background: rgba(13, 110, 253, 0.7); color: white; opacity: 0; transition: opacity 0.4s ease; }
.card-demo-overlay:hover .overlay-content { opacity: 1; }

13. Bordure en Gradient Animée

Bordure Animée

Le dégradé de la bordure tourne sur lui-même.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-gradient-border">...</div>

<!-- CSS -->
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.card-demo-gradient-border { position: relative; }
.card-demo-gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px; /* Largeur de la bordure */
    background: conic-gradient(from var(--angle), var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    border-radius: 14px; /* border-radius de la carte + largeur bordure */
    z-index: -1;
    animation: spin 3s linear infinite;
}
@keyframes spin { 
    to { --angle: 360deg; } 
}

14. Carte qui s’Étend

Agrandir

La carte se met en avant au survol.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-expand">...</div>

<!-- CSS -->
.card-demo-expand {
    transition: all 0.4s ease;
}
.card-demo-expand:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

15. Image en N&B qui se Colore

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-grayscale">
    <img src="..." alt="...">
</div>

<!-- CSS -->
.card-demo-grayscale { padding: 0; }
.card-demo-grayscale img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 12px;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.card-demo-grayscale:hover img {
    filter: grayscale(0%);
}

16. Spotlight Interne

Spotlight

Un halo de lumière suit la souris à l’intérieur de la carte.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-spotlight">...</div>

<!-- CSS -->
.card-demo-spotlight {
    position: relative;
    background: #222;
    color: white;
    overflow: hidden;
}
.card-demo-spotlight::before {
    content: '';
    position: absolute;
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 80px at center, rgba(255,255,255,0.2), transparent);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.card-demo-spotlight:hover::before { opacity: 1; }

<!-- JavaScript -->
<script>
const card = document.querySelector('.card-demo-spotlight');
card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty('--mouse-x', x + 'px');
    card.style.setProperty('--mouse-y', y + 'px');
});
</script>

17. Liens Sociaux Apparents

Voir le code

<!-- HTML (nécessite Font Awesome) -->
<div class="card-demo card-demo-social">
    <h3>Mon Profil</h3>
    <div class="social-links">...</div>
</div>

<!-- CSS -->
.card-demo-social { justify-content: space-between; align-items: flex-end; }
.social-links { transform: translateY(20px); opacity: 0; transition: all 0.3s ease; }
.card-demo-social:hover .social-links { transform: translateY(0); opacity: 1; }
.social-links a { color: var(--text-secondary); margin: 0 0.5rem; }

18. Effet de Soulignement du Titre

Titre Important

Le titre est souligné au survol de la carte.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-underline">...</div>

<!-- CSS -->
.card-demo-underline h3 { position: relative; }
.card-demo-underline h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--accent-primary);
    transition: width 0.4s ease;
}
.card-demo-underline:hover h3::after { width: 100%; }

19. Bordure Interne Animée

Bordure Interne

Une bordure apparaît depuis l’intérieur.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-inset-border">...</div>

<!-- CSS -->
.card-demo-inset-border {
    box-shadow: inset 0 0 0 0 var(--accent-primary);
    transition: box-shadow 0.4s ease;
}
.card-demo-inset-border:hover {
    box-shadow: inset 0 0 0 5px var(--accent-primary);
}

20. Texte en Surbrillance

Le Point Clé

Passez la souris pour mettre le texte en surbrillance.

Voir le code

<!-- HTML -->
<div class="card-demo card-demo-highlight-text">...</div>

<!-- CSS -->
.card-demo-highlight-text p {
    background: linear-gradient(to top, var(--accent-primary) 50%, transparent 50%);
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.4s ease;
}
.card-demo-highlight-text:hover p {
    background-position: bottom;
    color: white;
}