Card by Smit-Prajapati
#212121
1.card { 2 position: relative; 3 height: 300px; 4 width: 230px; 5} 6 7.card .boxshadow { 8 position: absolute; 9 height: 100%; 10 width: 100%; 11 border: 1px solid red; 12 transform: scale(0.8); 13 box-shadow: rgb(255, 0, 0) 0px 30px 70px 0px; 14 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 15} 16 17.card .main { 18 width: 100%; 19 height: 100%; 20 overflow: hidden; 21 background: red; 22 background: linear-gradient(0deg, rgb(62, 0, 0) 0%, rgb(255, 0, 0) 60%, rgb(62, 0, 0) 100%); 23 position: relative; 24 -webkit-clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px)); 25 clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px)); 26 -webkit-clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px)); 27 clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px)); 28 box-shadow: rgb(255, 0, 0) 0px 7px 29px 0px; 29 transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 30} 31 32.card .main .top { 33 position: absolute; 34 top: 0px; 35 left: 0; 36 width: 0px; 37 height: 0px; 38 z-index: 2; 39 border-top: 115px solid black; 40 border-left: 115px solid transparent; 41 border-right: 115px solid transparent; 42 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 43} 44 45.card .main .side { 46 position: absolute; 47 width: 100%; 48 top: 0; 49 transform: translateX(-50%); 50 height: 101%; 51 background: black; 52 -webkit-clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%); 53 clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%); 54 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s; 55} 56 57.card .main .left { 58 left: 0; 59} 60 61.card .main .right { 62 right: 0; 63 transform: translateX(50%) scale(-1, 1); 64} 65 66.card .main .title { 67 position: absolute; 68 left: 50%; 69 transform: translateX(-50%); 70 top: 90px; 71 font-weight: bold; 72 font-size: 25px; 73 opacity: 0; 74 z-index: -1; 75 transition: all 0.2s ease-out 0s; 76} 77 78.card .main .button-container { 79 position: absolute; 80 bottom: 10px; 81 left: 50%; 82 transform: translateX(-50%); 83} 84 85.card .main .button-container .button { 86 position: absolute; 87 transform: translateX(-50%); 88 padding: 5px 10px; 89 -webkit-clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%); 90 clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%); 91 background: black; 92 border: none; 93 color: white; 94 display: grid; 95 place-content: center; 96 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 97} 98 99.card .main .button-container .button .svg { 100 width: 15px; 101 transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86); 102} 103 104.card .main .button-container .button:nth-child(1) { 105 bottom: 300px; 106 transition-delay: 0.4s; 107} 108 109.card .main .button-container .button:nth-child(2) { 110 bottom: 300px; 111 transition-delay: 0.6s; 112} 113 114.card .main .button-container .button:nth-child(3) { 115 bottom: 300px; 116 transition-delay: 0.8s; 117} 118 119.card .main .button-container .button:hover .svg { 120 transform: scale(1.2); 121} 122 123.card .main .button-container .button:active .svg { 124 transform: scale(0.7); 125} 126 127.card:hover .main { 128 transform: scale(1.1); 129} 130 131.card:hover .main .top { 132 top: -50px; 133} 134 135.card:hover .main .left { 136 left: -50px; 137 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s; 138} 139 140.card:hover .main .right { 141 right: -50px; 142 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s; 143} 144 145.card:hover .main .title { 146 opacity: 1; 147 transition: all 0.2s ease-out 1.3s; 148} 149 150.card:hover .main .button-container .button:nth-child(1) { 151 bottom: 80px; 152 transition-delay: 0.8s; 153} 154 155.card:hover .main .button-container .button:nth-child(2) { 156 bottom: 40px; 157 transition-delay: 0.6s; 158} 159 160.card:hover .main .button-container .button:nth-child(3) { 161 bottom: 0; 162 transition-delay: 0.4s; 163}
1.1K views
1.1K views
MIT License