🔮 1. Der Glassmorphism-Effekt
Glassmorphism erzeugt eine futuristische Milchglas-Optik, indem es den darunterliegenden Hintergrund weichzeichnet:
✦ FROSTED GLASS UI
Glassmorphism Card
Lichtbrechung und Transparenz ganz ohne Grafikprogramm – direkt in nativem CSS.
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}💬 2. Natives HTML5 <dialog> & CSS Tooltips
Keine schweren JavaScript-Plugins mehr: Das HTML5 <dialog> Element bringt Barrierefreiheit und ::backdrop out of the box mit.
/* 🎯 Modal-Hintergrund abdunkeln und weichzeichnen: */
dialog::backdrop {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(8px);
}
/* 🎯 Pure CSS Tooltip über data-tooltip: */
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #0f172a;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
opacity: 0;
transition: opacity 0.2s ease;
}
[data-tooltip]:hover::after {
opacity: 1;
}🪟 Didaktische Analogie: Das Milchglasfenster
Ein normales Fensterglas lässt alles scharf durch (normale `opacity`). Backdrop-Filter wirkt wie ein Milchglasfenster mit Regentropfen: Licht und Farben schimmern durch, aber die Details dahinter verschwimmen in einem sanften Glow.
🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.