Cómo preparar un café de filtro

Elige un café recién molido, con un punto entre la sal fina y la gruesa.

Calienta el agua hasta unos 93 grados, justo antes de hervir.

Moja el filtro de papel para quitarle el sabor y templar el cono.

Vierte un poco de agua y espera 30 segundos: el café se hincha y suelta gas.

Sigue vertiendo en espiral, despacio, hasta llegar al peso que buscas.

Deja que termine de gotear y sirve en una taza templada.

Prueba a cambiar la molienda si sale amargo o demasiado ácido.

Apunta tus proporciones para repetir la taza que más te guste.

HTML + CSSNavigation

Nach-oben-Button mit Fortschrittsring

Ein runder Button erscheint beim Scrollen, sein Ring zeigt den Lesefortschritt; ein Druck bringt dich nach oben.

Einstellungen

Hauptfarbe#ea580c

Zweitfarbe#ffedd5

Größe16px

Tempo1x

Text

Code

index.html

<div class="uv-nbt"><article class="sc" tabindex="0"><h3>So gelingt Filterkaffee</h3><p>Nimm frisch gemahlenen Kaffee, zwischen feinem und grobem Salz.</p><p>Erhitze das Wasser auf etwa 93 Grad, kurz vor dem Kochen.</p><p>Befeuchte den Papierfilter, um den Geschmack zu entfernen und den Kegel anzuwärmen.</p><p>Gieß etwas Wasser auf und warte 30 Sekunden: Der Kaffee quillt auf und gast aus.</p><p>Gieß langsam spiralförmig weiter, bis du dein Zielgewicht erreichst.</p><p>Lass ihn fertig durchlaufen und serviere in einer vorgewärmten Tasse.</p><p>Ändere den Mahlgrad, wenn er bitter oder zu sauer schmeckt.</p><p>Notiere deine Mengen, um deine Lieblingstasse zu wiederholen.</p></article><button type="button" class="up" aria-label="Nach oben"><svg class="rg" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="18" pathLength="1"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/></svg></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 Navigation

Alle ansehen: Navigation

Segment-Tabs im iOS-Stil

NavigationReact + Motion

Tab-Leiste unten

NavigationReact + Motion

Schrumpfende Navbar

NavigationReact + Motion

Dock mit Vergrößerung

NavigationReact + Motion

Kategorieleiste mit Icons

NavigationReact + Motion

Editoriales Vollbildmenü

NavigationReact + Motion

Zusammenklappende Breadcrumb

NavigationReact + Motion

Checkout-Stepper

NavigationReact + Motion

Wofür du ihn nutzen kannst

Lange Artikel, Rezepte und Dokumentation profitieren von einem schnellen Weg nach oben, und ein Lesefortschritts-Ring gibt gleichzeitig Orientierung. Sobald man etwas scrollt, federt der runde Button in die Ecke. Sein Ring füllt sich mit dem Scrollen, und ein Druck scrollt weich nach oben und setzt den Fokus auf den Artikel.

Die Demo liest ihren eigenen Scroll-Container, dasselbe Skript funktioniert mit zwei kleinen Änderungen auch fürs Fenster. Weiches Scrollen entfällt bei reduzierter Bewegung, die Hauptfarbe bestimmt Ring und Pfeil.