| <!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> |