Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gnat/html-dialog-animated-demo
Minimalist animated HTML <dialog> element / tag demo.
https://github.com/gnat/html-dialog-animated-demo
css design dialog html html5 modal ux
Last synced: about 1 month ago
JSON representation
Minimalist animated HTML <dialog> element / tag demo.
- Host: GitHub
- URL: https://github.com/gnat/html-dialog-animated-demo
- Owner: gnat
- License: unlicense
- Created: 2022-07-02T02:56:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-02T14:16:07.000Z (over 2 years ago)
- Last Synced: 2024-11-08T10:54:19.386Z (3 months ago)
- Topics: css, design, dialog, html, html5, modal, ux
- Language: HTML
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern animated HTML Dialog in 2022
Minimalist, `` example, keeping it simple.
### References
[Adam Argyle / argyleink](https://github.com/argyleink) from Google, extended Dialog Tutorial (2022)
[](https://www.youtube.com/watch?v=GDzzIlRhEzM "Adam Argyle's Dialog Tutorial")
* [MDN: dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
* [MDN: HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)
* [Can I use dialog ?](https://caniuse.com/dialog)
### Source (demo.html)
```html
dialog {
display: grid;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
transition: all 2s;
}
dialog:not([open]) {
animation: slideout 2s forwards;
pointer-events: none;
opacity: 0;
}
dialog[open] {
animation: slidein 2s forwards;
}
@keyframes slidein {
0% { margin-top: -10vh; }
100% { margin-top: 10vh; }
}
@keyframes slideout {
0% { margin-top: 10vh; }
100% { margin-top: -10vh; }
}
Hello World
Close
Open Dialog
```