Contenidos
🎨 8 Tipos de Cajas Diferentes:
- Tip Box (Azul) – Para consejos clave
- Warning Box (Naranja) – Para advertencias y errores comunes
- Step Box (Verde) – Para pasos numerados
- Result Box (Púrpura) – Para mostrar resultados/beneficios
- Product Box (Gradiente) – Para destacar productos con CTA
- Checklist Box (Amarillo) – Para autoevaluaciones
- Timeline Box (Verde Agua) – Para mostrar progreso temporal
- Note Box (Gris) – Para notas importantes
🔧 Características del Código:
✅ Responsive – Se adapta a móviles ✅ Accesible – Buenos contrastes y tipografía legible ✅ Animaciones sutiles – Efectos hover y shimmer ✅ Iconos integrados – Emojis que se ven en todos los dispositivos ✅ Fácil personalización – Variables CSS claras ✅ SEO-friendly – Estructura semántica correcta
Para notas importantes
Estructura semántica correcta Estructura semántica correcta Estructura semántica correcta🚀 Para Implementar en tu CMS:
Si usas WordPress, puedes crear shortcodes así:
// En functions.php
function tip_box_shortcode($atts, $content = null) {
return '<div class="tip-box"><h3>💡 Consejo Clave</h3><p>' . $content . '</p></div>';
}
add_shortcode('tip', 'tip_box_shortcode');Luego usar:
¿Necesitas que adapte algún estilo específico para tu marca o que te ayude con la implementación en tu CMS particular?
________
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Cajas Destacadas – Sistema Completo</title>
<style>
/* ==========================================
RESET Y BASE STYLES
========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.2em;
}
h2 {
color: #2c3e50;
margin: 30px 0 20px 0;
font-size: 1.6em;
border-left: 4px solid #3498db;
padding-left: 15px;
}
p {
margin-bottom: 15px;
}
/* ==========================================
CAJA DE CONSEJO/TIP (Azul)
========================================== */
.tip-box {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #2196f3;
padding: 20px;
margin: 25px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
position: relative;
}
.tip-box::before {
content: «💡»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
opacity: 0.6;
}
.tip-box h3 {
color: #1565c0;
margin-bottom: 12px;
font-size: 1.2em;
font-weight: 600;
}
.tip-box p {
color: #0d47a1;
margin-bottom: 0;
font-size: 0.95em;
}
.tip-box strong {
color: #0d47a1;
}
/* ==========================================
CAJA DE ADVERTENCIA (Naranja/Rojo)
========================================== */
.warning-box {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
border-left: 5px solid #ff9800;
padding: 20px;
margin: 25px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
position: relative;
}
.warning-box::before {
content: «⚠️»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
opacity: 0.7;
}
.warning-box h3 {
color: #e65100;
margin-bottom: 12px;
font-size: 1.2em;
font-weight: 600;
}
.warning-box p {
color: #bf360c;
margin-bottom: 0;
font-size: 0.95em;
}
.warning-box strong {
color: #bf360c;
}
/* ==========================================
CAJA DE PASO A PASO (Verde)
========================================== */
.step-box {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
border: 2px solid #4caf50;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
position: relative;
padding-top: 30px;
}
.step-number {
position: absolute;
top: -15px;
left: 20px;
background: #4caf50;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.1em;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
.step-box h3 {
color: #2e7d32;
margin-bottom: 12px;
font-size: 1.2em;
font-weight: 600;
}
.step-box p {
color: #1b5e20;
margin-bottom: 0;
font-size: 0.95em;
}
.step-box strong {
color: #1b5e20;
}
/* ==========================================
CAJA DE RESULTADO/BENEFICIO (Púrpura)
========================================== */
.result-box {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
border: 2px dashed #9c27b0;
padding: 20px;
margin: 25px 0;
border-radius: 8px;
position: relative;
}
.result-box::before {
content: «✨»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
}
.result-box h3 {
color: #7b1fa2;
margin-bottom: 12px;
font-size: 1.2em;
font-weight: 600;
}
.result-box p {
color: #4a148c;
margin-bottom: 0;
font-size: 0.95em;
}
.result-box strong {
color: #4a148c;
}
/* ==========================================
CAJA DE PRODUCTO (Gradiente Premium)
========================================== */
.product-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
margin: 25px 0;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
text-align: center;
position: relative;
overflow: hidden;
}
.product-box::before {
content: «»;
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
.product-box h3 {
margin-bottom: 15px;
font-size: 1.3em;
font-weight: 600;
}
.product-box p {
margin-bottom: 20px;
opacity: 0.95;
}
.cta-button {
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
color: white;
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.cta-button:hover {
background: white;
color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* ==========================================
CAJA DE AUTOEVALUACIÓN (Checklist)
========================================== */
.checklist-box {
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
border-left: 5px solid #ffc107;
padding: 20px;
margin: 25px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);
position: relative;
}
.checklist-box::before {
content: «🔍»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
opacity: 0.7;
}
.checklist-box h3 {
color: #f57f17;
margin-bottom: 15px;
font-size: 1.2em;
font-weight: 600;
}
.checklist {
list-style: none;
padding: 0;
margin: 0;
}
.checklist li {
padding: 8px 0;
padding-left: 30px;
position: relative;
color: #f57f17;
font-size: 0.95em;
}
.checklist li::before {
content: «☐»;
position: absolute;
left: 0;
font-size: 1.2em;
color: #ff8f00;
}
.checklist li:hover::before {
content: «☑️»;
}
/* ==========================================
CAJA DE TIMELINE (Progreso)
========================================== */
.timeline-box {
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
border: 2px solid #26a69a;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(38, 166, 154, 0.15);
position: relative;
}
.timeline-box::before {
content: «📅»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
}
.timeline-box h3 {
color: #00695c;
margin-bottom: 15px;
font-size: 1.2em;
font-weight: 600;
}
.timeline-item {
margin: 12px 0;
padding-left: 25px;
position: relative;
color: #004d40;
font-size: 0.95em;
}
.timeline-item::before {
content: «→»;
position: absolute;
left: 0;
color: #26a69a;
font-weight: bold;
}
.timeline-item strong {
color: #00695c;
}
/* ==========================================
CAJA DE NOTA IMPORTANTE (Destacado)
========================================== */
.note-box {
background: linear-gradient(135deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bdbdbd;
border-left: 5px solid #607d8b;
padding: 20px;
margin: 25px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(96, 125, 139, 0.1);
position: relative;
}
.note-box::before {
content: «📝»;
font-size: 1.8em;
position: absolute;
top: 15px;
right: 20px;
opacity: 0.6;
}
.note-box h3 {
color: #37474f;
margin-bottom: 12px;
font-size: 1.2em;
font-weight: 600;
}
.note-box p {
color: #455a64;
margin-bottom: 0;
font-size: 0.95em;
font-style: italic;
}
/* ==========================================
LISTA DE BENEFICIOS (Para usar dentro de cajas)
========================================== */
.benefits-list {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
.benefits-list li {
padding: 8px 0;
padding-left: 25px;
position: relative;
font-size: 0.95em;
}
.benefits-list li::before {
content: «✓»;
position: absolute;
left: 0;
color: #4caf50;
font-weight: bold;
font-size: 1.1em;
}
/* ==========================================
RESPONSIVE DESIGN
========================================== */
@media (max-width: 768px) {
.container {
padding: 20px;
margin: 10px;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
.tip-box, .warning-box, .result-box, .product-box,
.checklist-box, .timeline-box, .note-box, .step-box {
padding: 15px;
margin: 20px 0;
}
.step-box {
padding-top: 25px;
}
.step-number {
width: 28px;
height: 28px;
font-size: 1em;
}
.cta-button {
padding: 10px 20px;
font-size: 0.9em;
}
}
/* ==========================================
UTILIDADES ADICIONALES
========================================== */
.highlight {
background: linear-gradient(120deg, #a8e6cf 0%, #ffd93d 100%);
padding: 2px 6px;
border-radius: 3px;
font-weight: 600;
}
.text-center {
text-align: center;
}
.mt-large {
margin-top: 40px;
}
.mb-large {
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class=»container»>
<h1>Sistema Completo de Cajas Destacadas</h1>
<p>Aquí tienes todos los estilos HTML y CSS listos para usar en tu contenido de hidratación capilar:</p>
<h2>1. Caja de Consejo/Tip (Azul)</h2>
<div class=»tip-box»>
<h3>💡 Consejo Clave</h3>
<p><strong>Recuerda:</strong> el pelo no se rompe solo por fuera. Se rompe porque <span class=»highlight»>por dentro ya no tiene reservas suficientes</span> para resistir. La hidratación debe empezar desde la fibra capilar.</p>
</div>
<h2>2. Caja de Advertencia (Naranja)</h2>
<div class=»warning-box»>
<h3>⚠️ Error Común</h3>
<p><strong>No cometas este error:</strong> Usar mascarillas pesadas en verano puede obstruir los poros del cuero cabelludo. Busca fórmulas ligeras con activos penetrantes como péptidos.</p>
</div>
<h2>3. Cajas de Pasos (Verde)</h2>
<div class=»step-box»>
<div class=»step-number»>1</div>
<h3>Protege antes de exponerte al sol</h3>
<p>Aplica la <strong>Crema capilar fotoprotectora Protection</strong> de medios a puntas antes de cualquier exposición solar. No olvides las zonas más sensibles.</p>
</div>
<div class=»step-box»>
<div class=»step-number»>2</div>
<h3>Limpia sin agredir</h3>
<p>Usa el <strong>Champú Sensitive Botanic Solar</strong> con agua tibia, masajeando suavemente el cuero cabelludo sin frotar agresivamente.</p>
</div>
<h2>4. Caja de Resultados (Púrpura)</h2>
<div class=»result-box»>
<h3>✨ Resultados en 3-4 semanas</h3>
<ul class=»benefits-list»>
<li>El cabello está visiblemente más fuerte</li>
<li>Se cae bastante menos al cepillar o lavar</li>
<li>Tiene más cuerpo, elasticidad y movimiento</li>
<li>El color se mantiene más vibrante</li>
</ul>
</div>
<h2>5. Caja de Producto (Gradiente Premium)</h2>
<div class=»product-box»>
<h3>🌟 Producto Recomendado</h3>
<p><strong>Sun Peptides Botanic Solar</strong><br>
Protección intensa con 10 beneficios en un solo gesto: péptidos, aceite de coco y filtros solares naturales.</p>
<a href=»#» class=»cta-button»>Descubre Sun Peptides</a>
</div>
<h2>6. Caja de Autoevaluación (Amarillo)</h2>
<div class=»checklist-box»>
<h3>🔍 ¿Tu pelo está pidiendo ayuda?</h3>
<ul class=»checklist»>
<li>Notas el pelo más áspero al tacto, incluso recién lavado</li>
<li>Se enreda con facilidad, como si estuviera desprotegido</li>
<li>Has perdido ese brillo natural</li>
<li>El efecto de los tratamientos dura menos</li>
</ul>
</div>
<h2>7. Caja de Timeline (Verde Agua)</h2>
<div class=»timeline-box»>
<h3>📅 Qué Esperar – Timeline</h3>
<div class=»timeline-item»><strong>Semana 1:</strong> Pelo más suave y fácil de peinar</div>
<div class=»timeline-item»><strong>Semana 3-4:</strong> Cabello visiblemente más fuerte</div>
<div class=»timeline-item»><strong>Octubre:</strong> Caída controlada y mínima</div>
</div>
<h2>8. Caja de Nota Importante (Gris)</h2>
<div class=»note-box»>
<h3>📝 Nota Importante</h3>
<p>El mejor momento para prevenir la caída de otoño es ahora, en pleno verano, cuando tu cabello aún tiene margen de respuesta y puede fortalecerse desde dentro.</p>
</div>
<div class=»mt-large text-center»>
<p><strong>¡Sistema completo listo para implementar!</strong> 🚀</p>
</div>
</div>
</body>
</html>
🌟 Producto Recomendado
Sun Peptides Botanic Solar
Protección intensa con 10 beneficios en un solo gesto: péptidos, aceite de coco y filtros solares naturales.
🔥 Edición Limitada
Fórmula avanzada con péptidos biomiméticos y antioxidantes para un acabado luminoso.
🌟 Producto Recomendado
Este tratamiento es ideal para cabellos expuestos al sol, con alta protección y acabado ligero.
🌟 Producto Recomendado
Sun Peptides Botanic Solar
Protección intensa con 10 beneficios en un solo gesto: péptidos, aceite de coco y filtros solares naturales.
Atributos disponibles del shortcode
title → Título del bloque.
Default: 🌟 Producto Recomendado
name → Nombre del producto (aparece en negrita antes de la descripción).
Default: «» (opcional)
cta_text → Texto del botón.
Default: Descubre más
cta_url → URL del botón (acepta absoluta o relativa).
Default: #
bg1 → Color inicio del gradiente.
Default: #667eea
bg2 → Color fin del gradiente.
Default: #764ba2
text → Color del texto.
Default: #ffffff
shimmer → Activa/desactiva el efecto brillo.
Valores: true | false (también acepta no, 0, off)
Default: true
target → Comportamiento del enlace.
Valores: _self | _blank
Default: _self
rel → Atributo rel del enlace (opcional), por ejemplo nofollow, ugc, etc.
Nota: si target=»_blank», se añade noopener automáticamente.
img → URL de la imagen del producto (opcional).
Default: «»
img_alt → Texto alternativo para la imagen (accesibilidad y SEO).
Default: «»
size → Tamaño fijo de la imagen en px (igual en todos los dispositivos).
Default: 400
1) Ejemplo básico recomendado
Uso sencillo con imagen, nombre de producto, CTA y texto por defecto.
🌟 Producto Recomendado
Peptide T98 Concentrado Anticaída
Tratamiento intensivo para frenar la caída capilar y fortalecer desde la raíz.
2) Ejemplo con colores personalizados y sin shimmer
Modifica el gradiente y el color de texto, quitando el brillo animado.
✨ Nueva Fórmula Mejorada
Peptide T98 Concentrado Anticaída
Activos concentrados para estimular el crecimiento y reforzar la fibra capilar.
3) Ejemplo con enlace externo y atributos SEO
Enlace que abre en nueva pestaña con rel específico.
🌍 Disponible en Amazon
Peptide T98 Concentrado Anticaída
Compra este tratamiento de alto rendimiento con envío rápido en Amazon.
4) Ejemplo compacto cambiando tamaño de imagen
Imagen más pequeña (320px) para integrarse en espacios reducidos.
💎 Tratamiento Premium
Peptide T98 Concentrado Anticaída
Nutrición profunda, mayor densidad y cabello visiblemente más fuerte en 4 semanas.
5) Ejemplo “campaña especial” con todos los atributos
Se aprovechan todos los atributos: título especial, colores, imagen, tamaño, shimmer, target y rel.
🔥 Edición Limitada – Verano 2025
Peptide T98 Concentrado Anticaída
Versión limitada con aroma fresco y fórmula optimizada para proteger tu cabello en verano.
Deja una respuesta