Verdeckte Tarotkarten

Drei Tarotkarten im Fächer: Die gewählte dreht sich in 3D um und zeigt ihre goldene Arkana.

Einstellungen

Hauptfarbe#d4a43a

Zweitfarbe#1d2448

Größe16px

Tempo1x

Text

Code

index.html

<fieldset class="uvq04-tar"><legend>Zieh eine Karte</legend><div class="dk"><label style="--r:-9deg;--y:0.5em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XIX</small><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><b>Die Sonne</b></span></span></label><label style="--r:0deg;--y:0em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XVIII</small><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 3.5a8.6 8.6 0 1 0 5 14.6A7 7 0 0 1 15.5 3.5z"/></svg><b>Der Mond</b></span></span></label><label style="--r:9deg;--y:0.5em"><input type="radio" name="uvq04-tar"><span class="cd"><span class="bk" aria-hidden="true"></span><span class="fc"><small>XVII</small><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5l2.3 6.9 6.9 2.6-6.9 2.6L12 21.5l-2.3-6.9L2.8 12l6.9-2.6z"/></svg><b>Der Stern</b></span></span></label></div></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 Radiobuttons

Alle ansehen: Radiobuttons

Radio-Button mit federndem Punkt

RadiobuttonsHTML + CSS

Radio mit gezeichnetem Ring

RadiobuttonsHTML + CSS

Umschalter mit gleitender Pille

RadiobuttonsHTML + CSS

Radio-Karten mit Icon

RadiobuttonsHTML + CSS

Radio mit springendem Punkt

RadiobuttonsHTML + CSS

Radio mit Flüssigkeitsfüllung

RadiobuttonsHTML + CSS

Vertikale Tabs mit Leuchtbalken

RadiobuttonsHTML + CSS

Auswahl für Tarife

RadiobuttonsHTML + CSS

Wofür du ihn nutzen kannst

Drei Karten liegen verdeckt in einem leichten Fächer, mit marineblauer Rückseite, Goldrand und Rautenmuster. Wählst du eine, dreht sie sich in 3D um und zeigt eine cremefarbene Vorderseite mit römischer Zahl, gezeichneter Sonne, Mond oder Stern und ihrem Namen, die anderen beiden treten zurück. Eine verspielte Radiogruppe für Horoskope, Quizze, Spiele und Tagesimpulse.

Die Hauptfarbe ist das Gold, die Zweitfarbe die Rückseite, Silber auf Schwarz oder Kupfer auf Grün ändern die Stimmung. Anfangs ist keine Karte gewählt, damit die Überraschung bleibt; ersetze Symbole und Namen durch dein eigenes Deck.