Lunes, 3 de marzo

Cosas para hoy

  • Llamar a la imprenta
  • Comprar café y sobres
  • Regar las plantas
HTML + CSSText & Scroll

Bleistiftliste im Notizheft

Auf einer linierten Heftseite schreibt ein Bleistift jede Zeile von links nach rechts und streicht dann durch, was erledigt ist.

Einstellungen

16px
1x

Code

<div class="uvq14-nb"><div class="pg"><p class="dt">Montag, 3. März</p><h3><span class="w" style="--i:0"><span class="t">Für heute</span><i class="pn" aria-hidden="true"></i></span></h3><ul><li class="dn"><span class="w" style="--i:1"><span class="t">Druckerei anrufen</span><i class="pn" aria-hidden="true"></i></span></li><li class="dn"><span class="w" style="--i:2"><span class="t">Kaffee und Umschläge kaufen</span><i class="pn" aria-hidden="true"></i></span></li><li><span class="w" style="--i:3"><span class="t">Pflanzen gießen</span><i class="pn" aria-hidden="true"></i></span></li></ul></div><button type="button" class="rw">Noch einmal schreiben</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.

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

Mehr aus Text & Scroll

Alle ansehen: Text & Scroll

Wofür du ihn nutzen kannst

Eine linierte Seite mit rotem Rand und Lochung schafft die Szene, ein CSS-Clip-Path legt jede Zeile frei, während ein kleiner Bleistift darüberfährt, sodass die Liste wie live geschrieben wirkt. Erledigte Aufgaben bekommen danach einen Markerstrich. Das passt zu To-do-Apps, Planern, Onboarding-Checklisten, Schulen und jedem Produkt rund ums Organisieren.

Ändere die Überschrift im Textfeld und die Aufgaben in der Liste; gib den erledigten die Klasse für durchgestrichen. Die Hauptfarbe ist die Tinte, die Zweitfarbe der Strich. Der Text ist echt, Screenreader lesen ihn also sofort.