HTML + CSSFilter

Herbarium nach Blattform

Herbarbögen mit gepressten Blättern: Hake eine Form an, das Blatt wird wieder grün und sein Name mit Bleistift umkreist.

Einstellungen

Hauptfarbe#3f8f46

Zweitfarbe#f6f0de

Größe16px

Tempo1x

Text

Code

index.html

<fieldset class="uvq05-hb"><legend>Blattform</legend><div class="gr"><label style="--r:-2deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="s" d="M20 49V10"/><path class="v" style="stroke-width:1.6" d="M20 14l-8-7M20 14l8-7M20 21l-10-6M20 21l10-6M20 28l-10-6M20 28l10-6M20 35l-9-6M20 35l9-6M20 42l-7-5M20 42l7-5"/></svg><span class="nm">Nadelförmig<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:1.5deg"><input type="checkbox" checked><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 3C29 13 29 30 20 42C11 30 11 13 20 3Z"/><path class="v" d="M20 6V42M20 16l-4-3M20 16l4-3M20 24l-5-4M20 24l5-4M20 32l-4-3M20 32l4-3"/><path class="s" d="M20 42v7"/></svg><span class="nm">Lanzettlich<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:-1deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 4C31 12 37 22 33 31c-3 6-10 6-13 1-3 5-10 5-13-1C3 22 9 12 20 4Z"/><path class="v" d="M20 7V32M20 16l-6-4M20 16l6-4M20 24l-8-4M20 24l8-4"/><path class="s" d="M20 32v17"/></svg><span class="nm">Herzförmig<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:2deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 3c4 2 2 6 6 7s5 4 3 7 5 3 4 7-4 3-2 6-3 5-7 4-3 5-4 6c-1-1 0-5-4-6s-5-2-7-4 2-4-2-6-1-6 4-7-2-5 3-7 4-4 6-7Z"/><path class="v" d="M20 5V40M20 13l4-3M20 13l-4-3M20 21l6-3M20 21l-6-3M20 29l6-2M20 29l-6-2"/><path class="s" d="M20 40v9"/></svg><span class="nm">Gelappt<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:-1.5deg"><input type="checkbox" checked><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 36l-11 4 2-6-9-5 7-3-4-9 8 3 1-9 6 6 0-11 0 0 4 11 3-7 4 8 6-4-2 9 7 3-8 5 2 6-11-4z"/><path class="v" d="M20 36V8M20 36L8 22M20 36l12-14M20 36L5 31M20 36l15-5"/><path class="s" d="M20 36v13"/></svg><span class="nm">Handförmig<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:1deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="s" d="M20 49V5"/><ellipse class="b" cx="13" cy="10" rx="5" ry="2.6" transform="rotate(-25 13 10)"/><ellipse class="b" cx="27" cy="10" rx="5" ry="2.6" transform="rotate(25 27 10)"/><ellipse class="b" cx="13" cy="18" rx="5" ry="2.6" transform="rotate(-25 13 18)"/><ellipse class="b" cx="27" cy="18" rx="5" ry="2.6" transform="rotate(25 27 18)"/><ellipse class="b" cx="13" cy="26" rx="5" ry="2.6" transform="rotate(-25 13 26)"/><ellipse class="b" cx="27" cy="26" rx="5" ry="2.6" transform="rotate(25 27 26)"/><ellipse class="b" cx="13" cy="34" rx="5" ry="2.6" transform="rotate(-25 13 34)"/><ellipse class="b" cx="27" cy="34" rx="5" ry="2.6" transform="rotate(25 27 34)"/><ellipse class="b" cx="20" cy="4" rx="2.6" ry="4.5"/></svg><span class="nm">Gefiedert<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label></div><p class="ct"><span>Gewählte Blätter:</span> <span class="n"></span></p></fieldset>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Filter

Alle ansehen: Filter

Filter-Chips

FilterReact + Motion

Segmented Control

FilterReact + Motion

Mehrfachauswahl-Dropdown

FilterReact + Motion

Filter-Chips mit gleitender Pille

FilterHTML + CSS

Chips mit Farbfüllung

FilterHTML + CSS

Chips mit Verlaufsrahmen

FilterHTML + CSS

Filter-Chips mit Häkchen

FilterHTML + CSS

Chips mit X zum Entfernen

FilterHTML + CSS

Wofür du ihn nutzen kannst

Pflanzenläden, Gartencenter und Naturführer können nach Blattform filtern, und ein Herbarium zeigt jede Form besser als ein Wort. Sechs angeklebte Papierbögen tragen gepresste Blätter als SVG, von nadelförmig bis gefiedert. Beim Anhaken richtet sich der Bogen gerade, das getrocknete Blatt wird wieder frisch grün und ein Bleistiftkreis zeichnet sich um die Beschriftung.

Die erste Farbe ist das frische Grün, die zweite das Papier. Tausch die Blätter über die SVG-Pfade gegen Blüten, Samen oder Pilze aus und halte die Beschriftungen kurz, damit der Bleistiftkreis sie sauber umschließt.