├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Envelope + Letter (Open/Close on Click) 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | Dear Person. 17 |

18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 19 | Numquam labore omnis minus maiores laboriosam, facere in beatae esse. 20 |

21 |
22 |
23 |
24 |
25 |
26 |
27 | 33 | 34 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary: #fff; 3 | --bg-color: rgb(5, 53, 61); 4 | --bg-envelope-color: #f5edd1; 5 | --envelope-tab: #ecdeb8; 6 | --envelope-cover: #e6cfa7; 7 | --shadow-color: rgba(0, 0, 0, 0.2); 8 | --txt-color: #444; 9 | --heart-color: rgb(252, 8, 231); 10 | } 11 | body{ 12 | margin: 0; 13 | padding: 0; 14 | box-sizing: border-box; 15 | background: var(--bg-color); 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | .container { 21 | height: 100vh; 22 | display: grid; 23 | place-items: center; 24 | } 25 | .container > .envelope-wrapper { 26 | background: var(--bg-envelope-color); 27 | box-shadow: 0 0 40px var(--shadow-color); 28 | } 29 | .envelope-wrapper > .envelope { 30 | position: relative; 31 | width: 300px; 32 | height: 230px; 33 | } 34 | .envelope-wrapper > .envelope::before { 35 | content: ""; 36 | position: absolute; 37 | top: 0; 38 | z-index: 2; 39 | border-top: 130px solid var(--envelope-tab); 40 | border-right: 150px solid transparent; 41 | border-left: 150px solid transparent; 42 | transform-origin: top; 43 | transition: all 0.5s ease-in-out 0.7s; 44 | } 45 | .envelope-wrapper > .envelope::after { 46 | content: ""; 47 | position: absolute; 48 | z-index: 2; 49 | width: 0px; 50 | height: 0px; 51 | border-top: 130px solid transparent; 52 | border-right: 150px solid var(--envelope-cover); 53 | border-bottom: 100px solid var(--envelope-cover); 54 | border-left: 150px solid var(--envelope-cover); 55 | } 56 | .envelope > .letter { 57 | position: absolute; 58 | right: 20%; 59 | bottom: 0; 60 | width: 54%; 61 | height: 80%; 62 | background: var(--primary); 63 | text-align: center; 64 | transition: all 1s ease-in-out; 65 | box-shadow: 0 0 5px var(--shadow-color); 66 | padding: 20px 10px; 67 | } 68 | 69 | .envelope > .letter > .text { 70 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 71 | color: var(--txt-color); 72 | text-align: left; 73 | font-size: 10px; 74 | } 75 | .heart { 76 | position: absolute; 77 | top: 50%; 78 | left: 50%; 79 | width: 15px; 80 | height: 15px; 81 | background: var(--heart-color); 82 | z-index: 4; 83 | transform: translate(-50%, -20%) rotate(45deg); 84 | transition: transform 0.5s ease-in-out 1s; 85 | box-shadow: 0 1px 6px var(--shadow-color); 86 | cursor: pointer; 87 | } 88 | .heart:before, 89 | .heart:after { 90 | content: ""; 91 | position: absolute; 92 | width: 15px; 93 | height: 15px; 94 | background-color: var(--heart-color); 95 | border-radius: 50%; 96 | } 97 | .heart:before { 98 | top: -7.5px; 99 | } 100 | .heart:after { 101 | right: 7.5px; 102 | } 103 | .flap > .envelope:before { 104 | transform: rotateX(180deg); 105 | z-index: 0; 106 | } 107 | .flap > .envelope > .letter { 108 | bottom: 100px; 109 | transform: scale(1.5); 110 | transition-delay: 1s; 111 | } 112 | .flap > .heart { 113 | transform: rotate(90deg); 114 | transition-delay: 0.4s; 115 | } 116 | --------------------------------------------------------------------------------