├── .gitignore ├── README.md └── modal #1 ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A collection of ready to use modals built using CSS. -------------------------------------------------------------------------------- /modal #1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modal #1 | AsmrProg 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |

Modal Window

18 |

19 | You have opened the modal, they are great for displaying critical informations or confirming actions! 20 |

21 |
22 | 23 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /modal #1/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap'); 2 | 3 | html, body{ 4 | height: 100%; 5 | } 6 | 7 | body{ 8 | margin: 0; 9 | display: grid; 10 | place-items: center; 11 | font-family: 'Ubuntu'; 12 | background: #37353b; 13 | } 14 | 15 | button{ 16 | font-family: inherit; 17 | cursor: pointer; 18 | background: #1a1a1a; 19 | color: #f9f9f9; 20 | border: 0; 21 | border-radius: 8px; 22 | padding: 20px 36px; 23 | font-size: 16px; 24 | } 25 | 26 | .modal-background{ 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | display: grid; 33 | place-items: center; 34 | opacity: 0; 35 | visibility: hidden; 36 | transform: scale(1, 1); 37 | background: rgba(0, 0, 0, 0.5); 38 | transition: 0.5s; 39 | } 40 | 41 | body.open .modal-background{ 42 | visibility: visible; 43 | opacity: 1; 44 | animation: background-in 1s both; 45 | } 46 | 47 | .modal{ 48 | position: fixed; 49 | top: 50%; 50 | left: 50%; 51 | background: #37353b; 52 | color: #f9f9f9; 53 | padding: 48px 40px; 54 | border-radius: 12px; 55 | width: 300px; 56 | translate: -50% -50%; 57 | opacity: 0; 58 | visibility: hidden; 59 | transition: 0.3s; 60 | } 61 | 62 | body.open .modal{ 63 | opacity: 1; 64 | visibility: visible; 65 | animation: modal-in 1s; 66 | } 67 | 68 | body.closed .modal{ 69 | opacity: 0; 70 | visibility: hidden; 71 | translate: -50% -50%; 72 | } 73 | 74 | h2{ 75 | margin: 0 0 8px; 76 | font-weight: 400; 77 | font-size: 21px; 78 | } 79 | 80 | p{ 81 | margin: 0; 82 | color: rgba(255, 255, 255, 0.5); 83 | } 84 | 85 | @keyframes background-in{ 86 | 0%{ 87 | scale: 0 0.005; 88 | } 89 | 33%{ 90 | scale: 1 0.005; 91 | } 92 | 66%, 100%{ 93 | scale: 1 1; 94 | } 95 | } 96 | 97 | 98 | @keyframes modal-in{ 99 | 0%, 66%{ 100 | opacity: 0; 101 | visibility: hidden; 102 | translate: -50% -30%; 103 | } 104 | 100%{ 105 | opacity: 1; 106 | visibility: visible; 107 | } 108 | } --------------------------------------------------------------------------------