Chips à pastille glissante
Des chips de filtre où une pastille colorée glisse vers l’option choisie et s’ajuste à sa largeur.
Réglages
Code
<div class="uv-fcs"><button class="on">Tout</button><button>Design</button><button>Code</button><button>Photos</button><button>Vidéo</button><span class="p"></span></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Ces chips conviennent à un portfolio qui mélange les projets : un studio qui présente identité visuelle, sites web, photo et vidéo sur la même page. Le visiteur touche une catégorie, la pastille s’y déplace, et il sait toujours ce qu’il regarde. Si vous cherchiez des chips de filtre animés en HTML et CSS, voici la version la plus simple.
Gardez des libellés courts, un ou deux mots. Si la rangée se coupe en deux lignes, la pastille ne sait plus où aller. Cinq ou six catégories, c’est à peu près le maximum ; au-delà, un menu déroulant rendra plus service à vos visiteurs.