HTML + CSSFilter

Tag-Cloud als Filter

Tags in unterschiedlichen Größen, die beim Hover wachsen und beim Klick mit einem kleinen Hüpfer aktiv werden.

Einstellungen

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">typografie</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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Filter

Wofür du ihn nutzen kannst

Eine Tag-Cloud gibt einem Blogarchiv Persönlichkeit. In einem Designblog zeigen große Wörter wie „Typografie“ oder „CSS“, worüber am meisten geschrieben wird, und ein paar Klicks filtern die Beiträge. Auch eine persönliche Notizsammlung oder ein Rezeptarchiv profitiert davon. Wer eine klickbare Schlagwortwolke oder einen Themenfilter mit CSS sucht, wird hier fündig.

Die Größe sollte etwas Echtes abbilden, etwa die Zahl der Beiträge pro Tag. Bleib bei fünfzehn bis zwanzig Tags, eine Wolke mit achtzig ist nur noch Rauschen. Auf dem Handy schrumpfen die Unterschiede, prüf also, ob kleine Tags noch gut antippbar sind.