Faites defiler ce contenu pour voir la barre de progression en action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Scroll Progress Bar

Indicateur de progression de lecture avec gradient anime en haut du contenu.

JS Scroll Progress
Hover pour simuler le scroll

Back to Top Button

Bouton anime qui apparait au scroll avec effet de rebond.

CSS Animation Scroll

Theme Toggle

Interrupteur de theme avec animation fluide soleil/lune.

CSS Toggle Transition
12
12
Heures
:
34
34
Minutes
:
56
56
Secondes

Countdown Timer

Compte a rebours style flip-clock avec animation de retournement.

JS Animation Timer

Copy to Clipboard

Bouton de copie avec confirmation animee et feedback visuel.

JS Click Feedback

Share Buttons

Boutons de partage social avec effets de survol et tooltips.

CSS Hover Social
Cliquez pour noter

Rating Stars

Systeme de notation avec etoiles animees et effet de remplissage.

JS Interactive Rating

Like / Heart Button

Bouton coeur avec animation de battement et explosion de particules.

JS Click Particles
Sauvegarder

Bookmark Toggle

Icone de signet avec animation de sauvegarde elastique.

CSS Toggle Animation
🔔 3

Notification Badge

Badge de notification avec animations pulse, bounce et shake.

JS Animation Badge

Carte Adaptive

Le layout passe de colonne à rangée selon la largeur du conteneur.

@container CSS

Adaptive Card

Carte qui passe d'un layout vertical à horizontal via @container query quand le conteneur dépasse 280px.

CSS @container Layout
Accueil
Recherche
Profil

Responsive Nav

Navigation qui affiche seulement les icônes en petit, puis ajoute les labels quand le conteneur s'élargit.

CSS @container Nav

Titre adaptatif

Le texte s'adapte à la taille du conteneur grâce aux container queries. Trois paliers de taille.

Fluid Typography

Tailles de texte qui s'adaptent en 3 paliers via @container à 260px et 320px. Bouton inclus.

CSS @container Typography

Analytics

+8.2%
1.2kVues
84Clics
3.1%CTR
12sDurée

Dashboard Widget

Widget analytics avec stats en grille adaptative (1→2→4 colonnes) et graphique qui apparaît à 300px.

CSS @container Dashboard

Premium Pack

49 €

Accès à tous les effets et templates premium.

Product Card

Carte produit e-commerce qui passe en layout horizontal et révèle la description et le bouton secondaire.

CSS @container E-commerce
2.4kUtilisateurs
+12%
186Favoris
+8%
4.2mDurée moy.
-3%
9.8k€Revenus
+21%

Stats Panel

Panneau de statistiques passant de 1 à 2 colonnes avec indicateurs de tendance qui apparaissent.

CSS @container Stats
3:42

Container Queries 101

12k vues · 2 jours

Apprenez à créer des composants vraiment responsifs avec @container.

Media Card

Carte vidéo qui passe en mode horizontal avec description étendue quand le conteneur dépasse 280px.

CSS @container Media
Accueil
Projets
Réglages

Sidebar Toggle

Sidebar qui affiche les labels via @container quand elle s'étend. Le contenu principal s'adapte aussi.

CSS @container Sidebar

Form Adapt

Formulaire dont les champs passent d'empilés à côte-à-côte quand le conteneur dépasse 280px.

CSS @container Form
1 · span 2
2
3
4
5
6

Grid Morph

Grille qui passe de 1 à 2 puis 3 colonnes avec la première cellule qui prend 2 colonnes au palier max.

CSS @container Grid
Adaptive Card

Ce contenu apparait et la mise en page change selon la largeur du conteneur.

Glissez pour redimensionner le conteneur

Container Query Cards

La carte change de layout (vertical, horizontal, minimal) selon la largeur du conteneur avec @container queries.

CSS @container Layout

Shape Hero

Le clip-path change selon la taille

Glissez pour redimensionner le conteneur

Shape-Responsive Hero

Le clip-path du hero passe de diagonal a courbe puis hexagonal selon la largeur du conteneur.

CSS clip-path @container
Home About Blog Contact
Page content area
Glissez pour redimensionner le conteneur

Adaptive Navigation

La navigation se transforme : hamburger, tabs inline, puis sidebar selon la taille du conteneur.

CSS @container Navigation
A
B
C
D
E
F
Glissez pour redimensionner le conteneur

Fluid Grid Morph

Les items de la grille passent smoothly de 1 a 2 puis 3 colonnes au redimensionnement avec transitions CSS.

CSS Grid @container

Typography Adapts

La taille, le poids et l'espacement du texte s'ajustent dynamiquement selon les dimensions du conteneur grace aux container queries.

Glissez pour redimensionner le conteneur

Container Query Typography

La typographie adapte sa taille, son poids et son espacement selon les dimensions du conteneur via @container.

CSS @container Typography
Morphing Product

Image, texte et boutons se reorganisent physiquement aux breakpoints du conteneur.

Glissez pour redimensionner le conteneur

Breakpoint Morphing Cards

Les elements de la carte (image, texte, boutons) se reorganisent physiquement aux breakpoints du conteneur.

CSS @container Morph
Revenue Mensuel
Jan12k
Fev16k
Mar14k
Avr21k
Mai18k
Juin24k
Juil20k
Aout25k
Glissez pour redimensionner le conteneur

Responsive Chart

Le graphique passe d'une sparkline simple a un bar chart detaille avec labels selon l'espace disponible.

CSS @container Data Viz
Accueil
Recherche
Profil
Parametres
Contenu principal
Glissez pour redimensionner le conteneur

Sidebar Collapse

La sidebar passe de icones seules a une navigation complete avec labels selon la largeur du conteneur.

CSS @container Sidebar
Starter
9€/mois
  • 5 projets
  • 10 Go stockage
  • Support email
Enterprise
99€/mois
  • Tout illimite
  • 1 To stockage
  • Support 24/7
Glissez pour redimensionner le conteneur

Responsive Pricing Table

Les cartes de pricing passent d'un empilement vertical a cote a cote avec transitions animees.

CSS @container Pricing
Dynamic Ratio 1:1
Glissez pour redimensionner le conteneur

Dynamic Aspect Ratio

Le conteneur media change d'aspect ratio (1:1, 4:3, 16:9, 21:9) selon la largeur via @container.

CSS @container Aspect Ratio
Gradient Spin

Gradient Border Spin

Bordure en conic-gradient tournant utilisant @property pour animer l'angle. L'effet viral du spinning border.

CSS @property Gradient
Dashed March

Dashed Border March

Bordure en pointillés dont les tirets défilent en continu via stroke-dashoffset animé.

SVG Animation Dash
Neon Pulse

Neon Border Pulse

Bordure néon qui pulse avec une lueur alternant d'intensité via box-shadow animé.

CSS Neon Glow
Draw-On

Border Draw-On

La bordure se dessine depuis un coin et trace tout le périmètre avec 4 pseudo-éléments animés séquentiellement.

CSS Hover Sequential
Double Line

Double Line Border

Deux bordures concentriques animées tournant en sens opposés avec des couleurs distinctes.

CSS @property Multi-layer
Lightning

Lightning Border

Effet électrique/foudre utilisant un filtre SVG feTurbulence avec seed animé pour un rendu organique.

SVG Filter Electric
Gradient Morph

Gradient Border Morph

Bordure en dégradé qui mute fluidement vers un nouveau jeu de couleurs au hover.

CSS Hover Gradient
Corner Accent

Corner Accent Borders

Seuls les coins sont bordés, avec des accents colorés qui s'allongent au survol.

CSS Hover Corners
Click Me

Border Ripple

Au clic, une impulsion lumineuse parcourt le périmètre de la bordure avec des ondes qui se propagent.

JS Click Ripple
Constellation

Dotted Constellation Border

Points le long de la bordure reliés par des lignes animées formant une constellation au survol.

SVG JS Interactive

Categories similaires