<!DOCTYPE html> | |
<link rel="stylesheet" href="./dark-theme.css"> | |
<dialog> | |
<h1>This is a pretty dialog</h1> | |
<p>The backdrop animates!</p> | |
</dialog> | |
<button onclick="document.querySelector('dialog').showModal()">Show the dialog</button> | |
<style> | |
dialog { | |
box-shadow: 0 2px 5px rgba(0,0,0,0.3); | |
border: none; | |
border-radius: 10px; | |
} | |
dialog::backdrop { | |
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)); | |
animation: fade-in 1s; | |
} | |
@keyframes fade-in { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
</style> |