Kartendesign-Generator
Gestalten Sie visuell schöne CSS-Kartenkomponenten. Passen Sie Hintergrund, Rahmen, Schatten, Abstand und Inhalt an und kopieren Sie dann mit einem Klick produktionsbereiten HTML- und CSS-Code.
Presets
Background
Border
Border Radius
Shadow
Padding
Hover Effect
Dimensions
Generated Code
<style>
.card-designer {
}
.card-designer-image {
flex-shrink: 0;
}
</style>
<div class="card-designer" style="width: min(360px, 100%); min-height: auto; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column;">
<div class="card-designer-image" style="height: 180px; background: linear-gradient(135deg, #6366f188, #6366f144); border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold;">
🖼️
</div>
<div class="card-designer-content" style="padding: 24px 24px 24px 24px;">
<h3 class="card-designer-title" style="margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: #0f172a;">Card Title</h3>
<p class="card-designer-body" style="margin: 0 0 12px 0; font-size: 0.875rem; line-height: 1.6; color: #475569;">This is a sample card body. Replace this text with your own content to see how it looks in the card design.</p>
<div class="card-designer-footer" style="margin-top: auto; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 0.75rem; color: #64748b;">Card Footer</div>
</div>
</div>Merkmale
- Visual Card Builder: Passen Sie jeden Aspekt Ihrer Karte an – Hintergrund, Rand, Schatten, Innenfüllung und Farben – alles mit Echtzeitvorschau. Keine CSS-Kenntnisse erforderlich.
- Saubere HTML- und CSS-Ausgabe: Kopieren Sie produktionsbereiten HTML- und CSS-Code mit einem Klick. Der generierte Code verwendet semantische Klassennamen und moderne CSS-Eigenschaften, die überall funktionieren.
- 6 voreingestellte Designs: Beginnen Sie mit kuratierten Voreinstellungen: klares Weiß, Farbverlaufsakzent, dunkle Eleganz, Neonlicht, sanftes Pastell und Randakzent. Jede Voreinstellung ist vollständig anpassbar.
- Enthaltene Hover-Effekte: Fügen Sie interaktive Hover-Effekte hinzu – Anheben, Leuchten, Randhervorhebung oder Skalierung – ohne eine einzige Zeile CSS zu schreiben. Alle Effekte verwenden sanfte CSS-Übergänge.
Anwendungsfälle
- Blog- und Artikelkarten: Erstellen Sie konsistente Kartenlayouts für die Vorschau von Blogbeiträgen mit vorgestellten Bildern, Titeln, Auszügen und Metadaten – perfekt für inhaltsreiche Landingpages.
- Teammitgliederprofile: Entwerfen Sie Teammitgliederkarten mit Avatar-Platzhaltern, Namen, Rollen und Biografieabschnitten. Nutzen Sie die voreingestellten Designs und passen Sie die Akzentfarbe pro Karte an.
- Produktkarten: Erstellen Sie E-Commerce-Produktkarten mit Bildbereichen, Produktnamen, Beschreibungen und Fußzeilen für Preise oder Call-to-Action-Buttons.
- Dashboard-Widgets: Generieren Sie Dashboard-Karten-Widgets mit benutzerdefinierten Hintergründen, subtilen Rändern und Hover-Effekten für interaktive Datenvisualisierungspanels.
- Feature-Raster: Erstellen Sie Feature-Showcase-Karten für Landingpages mit Symbolen oder Bildern oben, Feature-Titeln und beschreibendem Fließtext in responsiven Raster-Layouts.
- E-Mail-Newsletter-Karten: Entwerfen Sie kartenbasierte E-Mail-Inhaltsblöcke mit einfarbigen Hintergrundfarben, abgerundeten Ecken und klarer Typografie, die in E-Mail-Clients gut dargestellt werden.
Häufig gestellte Fragen
Eine Kartenkomponente ist ein eigenständiger UI-Container, der typischerweise zum Gruppieren verwandter Inhalte – wie einem Bild, einem Titel, einer Beschreibung und einer Aktionsschaltfläche – in einer einzigen visuellen Einheit verwendet wird. Karten werden mit Standard-HTML (div-Elementen) erstellt und mit CSS-Eigenschaften wie Hintergrund, Rahmen, Rahmenradius, Boxschatten und Innenabstand gestaltet.
Kopieren Sie den generierten HTML- und CSS-Code und fügen Sie ihn in Ihr Projekt ein. Der Code enthält ein Style-Tag mit dem CSS- und dem HTML-Karten-Markup. Für die Produktion können Sie das CSS in Ihr Stylesheet extrahieren und den HTML-Code in Ihrer Komponente behalten. Den Klassennamen wird „card-designer“ vorangestellt, um Konflikte zu vermeiden.
Ja! Legen Sie das Feld „Breite“ auf der Registerkarte „Design“ fest. Verwenden Sie px für feste Breiten (z. B. „360 px“), Prozentsätze für fließende Breiten (z. B. „100 %“) oder CSS-Funktionen wie min() (z. B. „min(360px, 100 %)“) für reaktionsfähiges Verhalten. Die Vorschau wird in Echtzeit aktualisiert, sodass Sie genau sehen können, wie es aussieht.
Fünf Hover-Effekte: Heben (bewegt die Karte mit Schatten nach oben), Leuchten (fügt farbigen Leuchtschatten hinzu), Rand (hebt den Rand hervor), Skalieren (sanfte Vergrößerung) und Keine. Jeder Effekt verwendet sanfte CSS-Übergänge (0,2 Sekunden Eile) für ein ausgefeiltes Gefühl. Wählen Sie aus der Hover-Effekt-Auswahl auf der Registerkarte „Design“.
Ja – schalten Sie auf der Registerkarte „Inhalt“ die Option „Bildplatzhalter anzeigen“ ein. Oben auf der Karte wird ein Platzhalter mit Farbverlauf angezeigt. Sie können das Bild auch in den „Hintergrund“-Modus versetzen, sodass es hinter dem Inhalt verschmilzt. Ersetzen Sie das Platzhalter-Emoji und den Farbverlauf durch Ihre tatsächliche Bild-URL im generierten Code.
Wickeln Sie mehrere Karteninstanzen in einen CSS-Grid- oder Flexbox-Container ein. Zum Beispiel: display: Grid; Rastervorlagenspalten: wiederholen (automatische Füllung, minmax (300px, 1fr)); Lücke: 24px; Dadurch wird ein reaktionsfähiges Raster erstellt, in dem die Karten basierend auf der Breite des Ansichtsfensters automatisch neu angeordnet werden.
Die Akzentfarbe wird für visuelle Hervorhebungen verwendet: die obere Randakzentleiste auf Karten mit Randakzentstil, den Farbverlauf des Bildplatzhalters und den leuchtenden Hover-Effekt. Es fügt einen Markenfarbkontaktpunkt hinzu, ohne das Kartendesign zu überfordern. Legen Sie es auf der Registerkarte „Inhalt“ unter „Textfarben“ fest.
Der generierte Code verwendet Standard-CSS-Eigenschaften, die in den meisten modernen E-Mail-Clients (Apple Mail, Outlook für Mac, Gmail-App) unterstützt werden. Verwenden Sie für E-Mails einfarbige Hintergrundfarben (keine Farbverläufe), einfache Rahmen und tabellenbasierte Layout-Wrapper um den Karten-HTML für eine breitere Kompatibilität.