CSS-Karten-Generator (Leistungsbereich)

CSS-Karten-Generator (Leistungsbereich): wofür es gut ist

Karten sind die üblichste Form, Leistungen, Vorteile oder Produkte auf einer Seite zu präsentieren. Dieser Generator baut den Bereich mit Titel und den Karten, die du schreibst, jede mit Icon oder Bild, Titel, Text und Link.

Das Raster nutzt repeat(auto-fit, minmax()), das die Karten vom Handy bis zum Computer ohne Media Queries von selbst neu anordnet. Wähle zwischen Schatten, Rahmen oder farbigem Hintergrund, die Mindestbreite, die ganze Karte klickbar mit einem einzigen barrierefreien Link und den Aufsteigen-Effekt beim Darüberfahren mit der Maus, der nur auf Geräten mit Maus erscheint und beachtet, wer weniger Bewegung bevorzugt.

So geht’s

1. Schreibe eine Karte pro Zeile.
2. Wähle Stil, Farbe und Mindestbreite.
3. Kopiere den Code und füge ihn in die Seite ein.

Wann nutzen

• Leistungsbereich einer Werkstatt oder eines Salons.
• Vorteile eines Produkts.
• Liste der Kategorien eines Ladens.

Häufige Fragen

Wie passen sich die Karten dem Handy an?

Das Raster nutzt grid-template-columns mit repeat(auto-fit, minmax(...)): Es passen so viele Karten hinein, wie die Breite erlaubt, jede mit der gewählten Mindestbreite. Am Handy eine pro Zeile, am Tablet zwei und am Computer drei oder vier, ohne Media Query.

Kann ich die ganze Karte klickbar machen?

Ja. Hake die Option an und gib den Link in jeder Karte an: Der Code nutzt den Titel als Link und dehnt die Klickfläche mit einem Pseudo-Element auf die ganze Karte aus, wobei das HTML barrierefrei bleibt (nur ein Link pro Karte, mit Text).

Emoji oder Icon?

Die Karten akzeptieren ein kurzes Symbol oder ein Bild. Für ein professionelleres Aussehen nutze SVG-Icons aus demselben Set (wie Lucide oder Heroicons), indem du die Adresse des Bildes in das Feld der Karte einfügst.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools