Softonic

CSS-Karten-Generator

Schritt 1 / 2

Kartentitel

Dies ist eine Vorschau Ihrer Karte.

Nächste

Eine Karte ist der Container hinter Produktkacheln, Blog-Vorschauen, Profilen und Dashboard-Widgets. Dieser Generator gestaltet diesen Container: Wählen Sie Hintergrund- und Rahmenfarbe, Eckenradius, Innenabstand und einen weichen Schlagschatten und sehen Sie das Ergebnis direkt auf der Seite. Die Vorschau zeigt Platzhalterinhalt; ersetzen Sie ihn durch Ihre eigene Überschrift, Ihren Text und Ihre Aktionen. Das Ergebnis ist eine einsatzbereite CSS-Klasse.

So gestalten Sie einen Karten-Container

  1. 1

    Farben wählen

    Bestimmen Sie die Hintergrundfarbe und die Rahmenfarbe der Karte.

  2. 2

    Form festlegen

    Wählen Sie Eckenradius und Innenabstand passend zu Ihrem Layout.

  3. 3

    Schatten hinzufügen

    Passen Sie Weichzeichnung und Deckkraft des weichen Schlagschattens unter der Karte an.

  4. 4

    Vorschau und Kopieren

    Prüfen Sie die Live-Vorschau und kopieren Sie das erzeugte .card-CSS in Ihr Stylesheet.

Was das erzeugte CSS enthält

Das Werkzeug erzeugt eine einzelne Klasse namens .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background ist die gewählte Hintergrundfarbe
  • border ist immer 1 px solid in der gewählten Farbe
  • border-radius und padding sind Ihre Werte in px
  • box-shadow verwendet einen festen Versatz von 4 px nach unten mit Ihren Werten für Weichzeichnung und Deckkraft

Die Vorschau ist ein Platzhalter

Die Vorschau zeigt eine Überschrift und einen Absatz, damit Sie die Proportionen beurteilen können. Das Werkzeug selbst erzeugt kein HTML: Wenden Sie die Klasse auf Ihren eigenen Container an und fügen Sie Titel, Text, Bild oder Aktionsbuttons darin ein. Wenn die Karte auf einem farbigen Seitenhintergrund sitzt, prüfen Sie den Rahmenkontrast dort, nicht nur in der Vorschau.

Sinnvolle Grenzen

Werte unter null werden auf null begrenzt, die Deckkraft des Schattens bleibt zwischen 0 und 1. Sehr große Werte für Innenabstand oder Weichzeichnung können unerwartete Ergebnisse liefern; halten Sie die Regler daher im Bereich, den Sie in einem echten Layout verwenden würden.

Kombination mit eigenem Markup

Ein minimales Beispiel für Ihre Seite:

<div class="card">
  <h3>Produktname</h3>
  <p>Kurzbeschreibung</p>
</div>

Der Container-Stil schränkt den Inhalt nicht ein: Er regelt nur Hintergrund, Rahmen, Abstand und Schatten.

Häufig gestellte Fragen

Nein. Er gibt nur die CSS-Klasse .card aus. Erstellen Sie das Markup selbst, zum Beispiel ein div oder ein article, das Überschrift, Text und Aktionen umschließt.

Der erzeugte Rahmen ist immer 1 px solid. Bearbeiten Sie die border-Zeile im CSS, wenn Sie eine andere Breite oder einen anderen Stil benötigen.

Ein fester Versatz von 4 px hält den Schatten dezent und lesbar. Sie steuern seine Weichheit (Weichzeichnung) und seine Stärke (Deckkraft).

Nein. Der Vorschau-Text dient nur der Anzeige. Das kopierte CSS enthält keinen Inhalt, nur die Container-Styles.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.