Skeuomorphes Modal
Eine einfache, reaktionsschnelle, skeuomorph inspirierte Modalkomponente für Unterhaltungs-/Medienplattformen mit coolen neutralen Farben und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-950 bg-opacity-75 dark:bg-black dark:bg-opacity-85">
<div class="relative w-full max-w-md mx-auto overflow-hidden rounded-xl shadow-2xl
bg-gradient-to-br from-gray-200 to-gray-400
dark:from-gray-700 dark:to-gray-900
border border-gray-300 dark:border-gray-600
transform transition-all duration-300 ease-in-out
scale-95 opacity-0 animate-modal-open
sm:p-6 p-4">
<!-- Close Button - Mimics a physical button -->
<button class="absolute top-3 right-3 text-gray-600 dark:text-gray-300
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800
p-2 rounded-full
bg-gray-300 dark:bg-gray-800
shadow-md inner-shadow-light dark:inner-shadow-dark
hover:scale-105 active:scale-95 active:shadow-inner
transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" 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>
<!-- Modal Header - Embossed text effect -->
<h2 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4
text-shadow-emboss dark:text-shadow-emboss-dark sm:text-3xl lg:text-4xl">
Welcome Back!
</h2>
<!-- Content Section - Sunken Panel -->
<div class="p-4 sm:p-5 mb-6
bg-gray-100 dark:bg-gray-800
rounded-lg
shadow-inner-light dark:shadow-inner-dark
border border-gray-200 dark:border-gray-700">
<p class="text-gray-800 dark:text-gray-300 text-base sm:text-lg mb-4 leading-relaxed ">
Pick up where you left off. Explore new shows and movies curated just for you.
</p>
<img class="w-full h-32 sm:h-40 object-cover rounded-md mb-4
shadow-md border border-gray-300 dark:border-gray-600"
src="https://picsum.photos/400/250?random=1" alt="Placeholder image for media content">
<p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Now Playing: "Mysteries of the Deep"</p>
</div>
<!-- Action Buttons - Pill-shaped, pushable buttons -->
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 py-3 px-6 rounded-full
bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
text-white font-semibold text-lg
shadow-md inner-shadow-blue dark:inner-shadow-blue-dark
hover:scale-105 active:scale-98 active:shadow-inner
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
Continue Watching
</button>
<button class="flex-1 py-3 px-6 rounded-full
bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
text-gray-800 dark:text-gray-200 font-semibold text-lg
shadow-md inner-shadow-light dark:inner-shadow-dark
hover:scale-105 active:scale-98 active:shadow-inner
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800">
Browse More
</button>
</div>
</div>
</div>
<!-- Custom Styles for Skeuomorphism -->
<style>
/* Base for general shadows */
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Light Skeuomorphic Inner Shadow */
.inner-shadow-light {
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(180, 180, 180, 0.5);
}
.dark .inner-shadow-dark {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
}
/* Light Skeuomorphic Sunken Panel */
.shadow-inner-light {
box-shadow: inset 3px 3px 6px rgba(190, 190, 190, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}
.dark .shadow-inner-dark {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.7), inset -3px -3px 6px rgba(100, 100, 100, 0.4);
}
/* Blue buttons inner shadow */
.inner-shadow-blue {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.4);
}
.dark .inner-shadow-blue-dark {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.6), inset -2px -2px 5px rgba(0,50,100,0.3);
}
/* Embossed Text Effect */
.text-shadow-emboss {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.dark .text-shadow-emboss-dark {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(100, 100, 100, 0.3);
}
/* Keyframe for modal entry animation */
@keyframes modal-open {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate-modal-open {
animation: modal-open 0.3s ease-out forwards;
}
</style>
Verwandte Komponenten
Memphis_Dating_Modal
Eine komplexe, reaktionsschnelle modale Komponente, die im Memphis/Retro-Stil für Dating- und Social-Media-Plattformen entwickelt wurde, mit kräftigen Farben, geometrischen Formen, interaktiven Elementen und Unterstützung für den Dunkelmodus.
Komplexes erdiges Business Modal mit Mikrointeraktionen
Eine komplexe, reaktionsschnelle, erdfarbene Modalkomponente mit Mikrointeraktionen, die für Unternehmenswebsites geeignet ist und den Dunkelmodus unterstützt.
Neon Dashboard Modal
Ein komplexes, reaktionsschnelles Dashboard-Modal mit Neon-/Leuchteffekten, Herbstfarben, Unterstützung für den Dunkelmodus und interaktiven Elementen. Entwickelt für Datenvisualisierung und Bedienfelder.