Componente de la caja de luz de la imagen - Skeuomorphic Purple
Un componente de caja de luz de imagen simple y receptivo con un diseño esqueuomórfico en el espectro púrpura/violeta, adecuado para plataformas de trabajo/carrera. Incluye soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">
<!-- Lightbox Container -->
<div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-inset-xl dark:from-purple-800 dark:to-indigo-900 dark:shadow-inset-dark overflow-hidden">
<!-- Skeuomorphic Top Bar -->
<div class="absolute top-0 left-0 w-full h-12 bg-gradient-to-b from-purple-400 to-indigo-500 dark:from-purple-900 dark:to-indigo-800 rounded-t-3xl shadow-sm-light dark:shadow-sm-dark flex items-center justify-between px-4 sm:px-6">
<span class="text-white opacity-75 text-sm font-semibold tracking-wider">VIEW IMAGE</span>
<button aria-label="Close Lightbox" class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-tl from-red-500 to-red-700 dark:from-red-600 dark:to-red-800 border border-red-800 dark:border-red-900 shadow-neu-sm hover:shadow-neu-md transition-all duration-200">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Image Wrapper with Skeuomorphic Border -->
<div class="relative w-full aspect-video mt-12 bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden shadow-neu-xl dark:shadow-neu-dark-xl border-4 border-purple-500 dark:border-purple-700 p-2 sm:p-3">
<img src="https://picsum.photos/800/600?random=1" alt="Placeholder Image for Job/Career" class="w-full h-full object-cover rounded-md shadow-inner-dark dark:shadow-inner-light">
<!-- Image Overlay for Skeuomorphism -->
<div class="absolute inset-0 rounded-md pointer-events-none style-none-grain"></div>
</div>
<!-- Image Title/Description -->
<div class="mt-6 text-center">
<h2 class="text-2xl sm:text-3xl font-extrabold text-indigo-800 dark:text-indigo-200 subpixel-antialiased text-shadow-sm">Job Offer Details</h2>
<p class="mt-2 text-base text-purple-700 dark:text-purple-300 opacity-90 leading-relaxed max-w-md mx-auto">
Reviewing key metrics and growth opportunities for the new software engineering role. A detailed look at the project scope.
</p>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex justify-center space-x-4">
<button aria-label="Download Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-700 dark:from-indigo-700 dark:to-indigo-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download
</button>
<button aria-label="Share Image" class="px-6 py-3 rounded-full bg-gradient-to-br from-purple-500 to-purple-700 dark:from-purple-700 dark:to-purple-900 text-white font-semibold shadow-neu-sm hover:shadow-neu-md hover:scale-105 transition-all outline-none focus:ring-2 focus:ring-purple-300 focus:ring-offset-2 focus:ring-offset-purple-300 dark:focus:ring-offset-gray-800">
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9 12.723 9 12c0-.723-.118-1.07-.316-1.342m0 0C8.423 10.4 7.9 10 7 10c-1.105 0-2 .895-2 2s.895 2 2 2c.9 0 1.4-.4 1.684-.658zm0 0c.277-.282.63-.424 1.13-.424h5.272c.49 0 .848.14 1.13.424m0 0c.282.277.424.63.424 1.13v2.24c0 .49-.14.848-.424 1.13m0 0C16.895 18 16 18.895 16 20s.895 2 2 2 2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658zm-11.316 0A2.001 2.001 0 015 20c0 1.105.895 2 2 2s2-.895 2-2-.895-2-2-2c-.9 0-1.4-.4-1.684-.658z"></svg>
Share
</button>
</div>
</div>
<!-- Custom Styles for Skeuomorphism -->
<style>
.shadow-inset-xl {
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3),
inset -5px -5px 15px rgba(255, 255, 255, 0.7);
}
.dark .shadow-inset-dark {
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.7),
inset -5px -5px 15px rgba(255, 255, 255, 0.05);
}
.shadow-sm-light {
box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3);
}
.dark .shadow-sm-dark {
box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
}
.shadow-neu-sm {
box-shadow: 3px 3px 6px rgba(0,0,0,0.2), -3px -3px 6px rgba(255,255,255,0.7);
}
.dark .shadow-neu-sm {
box-shadow: 3px 3px 6px rgba(0,0,0,0.7), -3px -3px 6px rgba(255,255,255,0.05);
}
.shadow-neu-md {
box-shadow: 6px 6px 12px rgba(0,0,0,0.2), -6px -6px 12px rgba(255,255,255,0.7);
}
.dark .shadow-neu-md {
box-shadow: 6px 6px 12px rgba(0,0,0,0.7), -6px -6px 12px rgba(255,255,255,0.05);
}
.shadow-neu-xl {
box-shadow: 8px 8px 16px rgba(0,0,0,0.3), -8px -8px 16px rgba(255,255,255,0.8);
}
.dark .shadow-neu-dark-xl {
box-shadow: 8px 8px 16px rgba(0,0,0,0.7), -8px -8px 16px rgba(255,255,255,0.08);
}
.shadow-inner-dark {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4),
inset -1px -1px 3px rgba(255, 255, 255, 0.1);
}
.dark .shadow-inner-light {
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6),
inset -1px -1px 3px rgba(255, 255, 255, 0.05);
}
.text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.dark .text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.style-none-grain {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWZmzLpAAAAHnRSTlMAAAAABgYGDg4OFBQWHh4eICAgLCwsMDQ0ODg4QEBAqH5o5wAAALNJREFUeNrlksuOgkAQRG9s3Jt7Z//_P6zEioQ3Mwev4Lqu6y49h2v0f7N4j7eXz7O2b3Cefl4T59n0d3Ce7j4s5-F6eX5On6v0f5V2d3gPezj2f9G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bw5v4u3G-9vYt3Bk4A4-d8C0jO_bAAAAAASUVORK5CYII=");
opacity: 0.05;
filter: grayscale(100%);
}
</style>
</div>
Componentes relacionados
Componente de caja de luz de imagen
Componente de caja de luz de imagen minimalista con diseño receptivo y soporte de tema oscuro para fines de tablero. Utiliza picsum.photos para las imágenes.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado en el estilo Material Design, con un esquema de color triádico y soporte para el modo oscuro. Es adecuado para mostrar trabajos o productos en portafolios.
Componente de caja de luz de imagen
Un complejo componente de caja de luz de imagen diseñado en un estilo brutalista, adecuado para interfaces de redes sociales, con un esquema de color en escala de grises y alto contraste para compatibilidad con el modo oscuro.