Generador de diseño de tarjetas
Diseñe visualmente hermosos componentes de tarjetas CSS. Personalice el fondo, el borde, la sombra, el relleno y el contenido, luego copie el código HTML + CSS listo para producción con un solo clic.
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>Características
- Visual Card Builder: personalice cada aspecto de su tarjeta (fondo, borde, sombra, relleno y colores), todo con vista previa en tiempo real. No se requieren conocimientos de CSS.
- Salida HTML + CSS limpia: copie código HTML y CSS listo para producción con un solo clic. El código generado utiliza nombres de clases semánticas y propiedades CSS modernas que funcionan en todas partes.
- 6 diseños preestablecidos: comience con ajustes preestablecidos seleccionados: blanco limpio, acento degradado, elegante oscuro, brillo de neón, pastel suave y acento de borde. Cada ajuste preestablecido es totalmente personalizable.
- Efectos de desplazamiento incluidos: agregue efectos de desplazamiento interactivos (levantar, iluminar, resaltar bordes o escalar) sin escribir una sola línea de CSS. Todos los efectos utilizan transiciones CSS suaves.
Casos de uso
- Tarjetas de blogs y artículos: cree diseños de tarjetas coherentes para vistas previas de publicaciones de blogs con imágenes destacadas, títulos, extractos y metadatos, perfectos para páginas de destino con mucho contenido.
- Perfiles de miembros del equipo: diseñe tarjetas de miembros del equipo con marcadores de posición de avatar, nombres, roles y secciones de biografía. Utilice los diseños preestablecidos y personalice el color de acento por tarjeta.
- Tarjetas de productos: cree tarjetas de productos de comercio electrónico con áreas de imágenes, nombres de productos, descripciones y secciones de pie de página para precios o botones de llamada a la acción.
- Widgets del panel: genere widgets de tarjetas del panel con fondos personalizados, bordes sutiles y efectos de desplazamiento para paneles interactivos de visualización de datos.
- Cuadrículas de funciones: cree tarjetas de presentación de funciones para páginas de destino con íconos o imágenes en la parte superior, títulos de funciones y texto de cuerpo descriptivo en diseños de cuadrícula responsivos.
- Tarjetas de boletines informativos por correo electrónico: diseñe bloques de contenido de correo electrónico basados en tarjetas con colores de fondo sólidos, esquinas redondeadas y tipografía limpia que se reproduzca bien en los clientes de correo electrónico.
Preguntas frecuentes
Un componente de tarjeta es un contenedor de interfaz de usuario autónomo que normalmente se utiliza para agrupar contenido relacionado (como una imagen, un título, una descripción y un botón de acción) en una única unidad visual. Las tarjetas se crean con HTML estándar (elementos div) y se les da estilo con propiedades CSS como fondo, borde, radio de borde, sombra de cuadro y relleno.
Copie el código HTML + CSS generado y péguelo en su proyecto. El código incluye una etiqueta de estilo con el CSS y el marcado de la tarjeta HTML. Para producción, puede extraer el CSS en su hoja de estilo y mantener el HTML en su componente. Los nombres de las clases tienen el prefijo "card-designer" para evitar conflictos.
¡Sí! Establezca el campo Ancho en la pestaña Diseño. Utilice px para anchos fijos (por ejemplo, "360px"), porcentajes para anchos fluidos (por ejemplo, "100%") o funciones CSS como min() (por ejemplo, "min(360px, 100%)") para un comportamiento receptivo. La vista previa se actualiza en tiempo real para que puedas ver exactamente cómo se ve.
Cinco efectos de desplazamiento: Levantar (mueve la tarjeta hacia arriba con sombra), Resplandor (agrega sombra luminosa de color), Borde (resalta el borde), Escala (amplia suavemente) y Ninguno. Cada efecto utiliza transiciones CSS suaves (facilidad de 0,2 s) para una sensación pulida. Elija del selector Efecto de desplazamiento en la pestaña Diseño.
Sí: active "Mostrar marcador de posición de imagen" en la pestaña Contenido. Aparecerá un marcador de posición degradado en la parte superior de la tarjeta. También puedes configurar la imagen en modo "Fondo", donde se mezcla detrás del contenido. Reemplace el emoji del marcador de posición y el degradado con la URL de su imagen real en el código generado.
Envuelva varias instancias de tarjetas en un contenedor CSS Grid o Flexbox. Por ejemplo: pantalla: cuadrícula; columnas-plantilla-cuadrícula: repetir(autocompletar, minmax(300px, 1fr)); espacio: 24px; Esto crea una cuadrícula receptiva donde las tarjetas se reorganizan automáticamente según el ancho de la ventana gráfica.
El color de acento se utiliza para aspectos destacados visuales: la barra de acento del borde superior en tarjetas de estilo con acento de borde, el degradado del marcador de posición de la imagen y el efecto de desplazamiento luminoso. Agrega un punto de contacto de color de marca sin abrumar el diseño de la tarjeta. Configúrelo en la pestaña Contenido en Colores de texto.
El código generado utiliza propiedades CSS estándar que son compatibles con la mayoría de los clientes de correo electrónico modernos (Apple Mail, Outlook para Mac, aplicación Gmail). Para el correo electrónico, utilice colores de fondo sólidos (no degradados), bordes simples y envoltorios de diseño basados en tablas alrededor del HTML de la tarjeta para una mayor compatibilidad.