Introducción
Este tutorial muestra, paso a paso y con explicaciones detalladas, cómo crear tarjetas (cards) para WordPress con un efecto de borde doble usando box-shadow múltiple. Verás la técnica base, variantes estéticas, consideraciones de accesibilidad, cómo integrarlo en tu tema o mediante CSS adicional en el personalizador y ejemplos listos para copiar e incorporar en tus bloques, plantillas o archivos del tema.
Concepto y por qué usar box-shadow múltiple
La propiedad box-shadow permite aplicar una o varias sombras a un elemento. Al encadenar varias sombras separadas por comas se pueden crear anillos concéntricos que simulan un borde doble sin añadir elementos extra ni romper el flujo del documento. Esta técnica es flexible, respetuosa con el radio de bordes (border-radius) y muy ligera a nivel de rendimiento.
Sintaxis esencial de box-shadow
- offset-x y offset-y: desplazamiento horizontal y vertical.
- blur-radius: desenfoque (0 para un borde nítido).
- spread-radius: cuánto se expande la sombra (útil para crear anillos).
- color: color de la sombra puede ser transparente para crear huecos visuales.
- Varias sombras se separan con comas y se pintan en orden de izquierda a derecha (la primera aparece más cercana al elemento).
Técnica básica: borde doble con separador (gap) transparente
La idea habitual es crear tres capas con box-shadow: un anillo interior (fino), un anillo transparente que actúa como separación y un anillo exterior (más grueso o difuso). El anillo transparente permite mantener un espacio visual entre las dos líneas coloreadas.
Ejemplo de marcado HTML
Título de la tarjeta
Pequeña descripción o extracto.
CSS base para la tarjeta con borde doble
.card {
background: #ffffff
padding: 1.25rem
border-radius: 12px
box-shadow:
0 0 0 2px var(--card-surface, #ffffff), / anillo interior (de separación si el fondo es distinto) /
0 0 0 6px transparent, / gap transparente entre líneas /
0 0 0 10px rgba(0,0,0,0.08) / anillo externo sutil /
transition: box-shadow 220ms ease, transform 220ms ease
will-change: box-shadow, transform
}
Variante con color de outline y hover
.card.doble-outline {
--outline-1: #2563eb / color línea 1 /
--outline-2: rgba(37,99,235,0.12) / color línea 2 (transparente para efecto externo) /
box-shadow:
0 0 0 2px var(--outline-1), / línea fina junto al elemento /
0 0 0 6px transparent, / espacio (gap) /
0 0 0 12px var(--outline-2) / segunda línea más amplia /
}
/ Interacción /
.card.doble-outline:hover {
transform: translateY(-6px)
box-shadow:
0 12px 28px rgba(0,0,0,0.12), / sombra real para elevar la tarjeta /
0 0 0 2px var(--outline-1),
0 0 0 8px transparent,
0 0 0 16px rgba(37,99,235,0.18)
}
/ Respetar reducción de movimiento /
@media (prefers-reduced-motion: reduce) {
.card { transition: none transform: none }
}
Variaciones avanzadas
Usar currentColor para que el outline dependa del color del texto
.card.outline-current {
color: #d946ef / color principal de la tarjeta /
box-shadow:
0 0 0 2px currentColor,
0 0 0 6px transparent,
0 0 0 12px rgba(217,70,239,0.12)
}
Efecto neón con doble contorno brillante
.card.neon {
background: #0b1220
color: #fff
box-shadow:
0 0 0 2px #06b6d4, / línea nítida interior (neón fuerte) /
0 0 12px rgba(6,182,212,0.35), / halo difuso /
0 0 0 8px transparent,
0 0 24px rgba(6,182,212,0.12) / segunda corona difusa /
}
Uso de pseudo-elementos (opcional) para control extra
Si necesitas un control aún más refinado (por ejemplo, cuando la tarjeta tiene efecto de recorte con overflow), puedes crear anillos con pseudo-elementos (:before/:after) que utilicen box-shadow. Ese enfoque añade más DOM visual pero permite tamaños y posiciones independientes. El ejemplo queda fuera de este bloque por simplicidad, pero se puede combinar con los ejemplos anteriores si fuera necesario.
Integración en WordPress
Opciones prácticas para añadir este CSS a un sitio WordPress:
- Personalizador (Appearance → Customize → Additional CSS): pega las reglas CSS directamente allí para pruebas rápidas o ajustes globales.
- Archivo CSS del tema: crea un archivo (por ejemplo css/card-outline.css) y encola el estilo desde functions.php.
- Bloque reutilizable o bloque HTML personalizado en Gutenberg: añade la estructura HTML y asigna la clase card o doble-outline.
Ejemplo: encolar el CSS en functions.php
function theme_enqueue_card_outline_styles() {
wp_enqueue_style(
card-outline,
get_stylesheet_directory_uri() . /css/card-outline.css,
array(),
1.0
)
}
add_action( wp_enqueue_scripts, theme_enqueue_card_outline_styles )
Buenas prácticas y rendimiento
- Limita el uso de sombras complejas en páginas con muchas tarjetas demasiadas sombras pueden afectar la pintura en dispositivos modestos. Aplicar la sombra solo al contenedor visible es suficiente.
- Usa variables CSS (–outline-1, –outline-2) para mantener consistencia y permitir personalización desde el tema.
- Respeta prefers-reduced-motion para no forzar animaciones a usuarios con sensibilidad al movimiento.
- Comprueba contraste entre el fondo y el anillo para accesibilidad evita outlines que desaparezcan contra el fondo.
- Prueba en móviles: el borde doble mantiene la proporción con border-radius y no requiere contenedores extra, lo que favorece la responsividad.
Consejos prácticos y trucos
- Para bordes perfectamente nítidos, usa spread radius y blur a 0 (ej.: 0 0 0 2px #color).
- Para un gap visible, coloca entre las dos líneas un spread mayor y una sombra de color transparente. Esa sombra transparente actúa como separador visual.
- Si quieres que el outline no se recorte por overflow del padre, asegurate de que el contenedor padre no tenga overflow: hidden o aplica box-shadow en un elemento fuera del recorte.
- Combina con backdrop-filter y semitransparencias para efectos modernos (con precaución: soporte y rendimiento).
Ejemplo completo minimal listo para copiar
.card { background: #fff padding: 1rem border-radius: 10px box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px transparent, 0 6px 18px -6px rgba(0,0,0,0.12) transition: box-shadow .22s ease, transform .22s ease } .card.doble-outline { --o1: #10b981 --o2: rgba(16,185,129,0.12) box-shadow: 0 0 0 2px var(--o1), 0 0 0 6px transparent, 0 0 0 12px var(--o2) } .card.doble-outline:hover { transform: translateY(-6px) box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 0 0 2px var(--o1), 0 0 0 8px transparent, 0 0 0 16px rgba(16,185,129,0.18) }Producto destacado
Resumen corto que invita a leer más.
Con estos conceptos y ejemplos tienes todo lo necesario para implementar tarjetas con borde doble en WordPress de forma elegante, ligera y totalmente personalizable. Integra el CSS en tu tema o en el personalizador, asigna la clase a tus bloques y ajusta colores y radios según la identidad visual del sitio.
Leave a Reply