HTML + CSSFiltres

Nuage de tags

Des tags de tailles variées qui grossissent au survol et s’activent d’un petit bond quand on clique.

Réglages

16px
1x

Code

<div class="uv-ftc"><button style="--z:1.5">design</button><button style="--z:1.15">react</button><button style="--z:1">typographie</button><button style="--z:1.35">css</button><button style="--z:1.2">animation</button><button style="--z:0.95">ui</button><button style="--z:1.1">3d</button><button style="--z:1.25">color</button><button style="--z:0.9">iconos</button><button style="--z:1.05">oscuro</button><button style="--z:1">grid</button><button style="--z:1.3">glass</button></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

Un nuage de tags donne du caractère aux archives d’un blog. Sur un blog de design, les grands mots comme « typographie » ou « CSS » montrent les sujets les plus traités, et quelques clics filtrent les articles. Il va aussi à un carnet de notes en ligne. Si vous cherchez un nuage de mots-clés cliquable en CSS, celui-ci fera l’affaire.

La taille doit refléter quelque chose de réel, comme le nombre d’articles par tag. Restez à quinze ou vingt tags ; un nuage de quatre-vingts n’est que du bruit. Sur mobile, les écarts de taille se réduisent : vérifiez que les petits tags restent faciles à toucher.