Card by kennyotsu
#212121
1/*works janky on mobile :<*/ 2.container { 3 position: relative; 4 width: 190px; 5 height: 254px; 6 transition: 200ms; 7} 8 9.container:active { 10 width: 180px; 11 height: 245px; 12} 13 14#card { 15 position: absolute; 16 inset: 0; 17 z-index: 0; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 border-radius: 20px; 22 transition: 700ms; 23 background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); 24} 25 26.subtitle { 27 transform: translateY(160px); 28 color: rgb(134, 110, 221); 29 text-align: center; 30 width: 100%; 31} 32 33.title { 34 opacity: 0; 35 transition-duration: 300ms; 36 transition-timing-function: ease-in-out-out; 37 transition-delay: 100ms; 38 position: absolute; 39 font-size: x-large; 40 font-weight: bold; 41 color: white; 42} 43 44.tracker:hover ~ #card .title { 45 opacity: 1; 46} 47 48#prompt { 49 bottom: 8px; 50 left: 12px; 51 z-index: 20; 52 font-size: 20px; 53 font-weight: bold; 54 transition: 300ms ease-in-out-out; 55 position: absolute; 56 max-width: 110px; 57 color: rgb(255, 255, 255); 58} 59 60.tracker { 61 position: absolute; 62 z-index: 200; 63 width: 100%; 64 height: 100%; 65} 66 67.tracker:hover { 68 cursor: pointer; 69} 70 71.tracker:hover ~ #card #prompt { 72 opacity: 0; 73} 74 75.tracker:hover ~ #card { 76 transition: 300ms; 77 filter: brightness(1.1); 78} 79 80.container:hover #card::before { 81 transition: 200ms; 82 content: ''; 83 opacity: 80%; 84} 85 86.canvas { 87 perspective: 800px; 88 inset: 0; 89 z-index: 200; 90 position: absolute; 91 display: grid; 92 grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 93 grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 94 gap: 0px 0px; 95 grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5" 96 "tr-6 tr-7 tr-8 tr-9 tr-10" 97 "tr-11 tr-12 tr-13 tr-14 tr-15" 98 "tr-16 tr-17 tr-18 tr-19 tr-20" 99 "tr-21 tr-22 tr-23 tr-24 tr-25"; 100} 101 102#card::before { 103 content: ''; 104 background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); 105 filter: blur(2rem); 106 opacity: 30%; 107 width: 100%; 108 height: 100%; 109 position: absolute; 110 z-index: -1; 111 transition: 200ms; 112} 113 114.tr-1 { 115 grid-area: tr-1; 116} 117 118.tr-2 { 119 grid-area: tr-2; 120} 121 122.tr-3 { 123 grid-area: tr-3; 124} 125 126.tr-4 { 127 grid-area: tr-4; 128} 129 130.tr-5 { 131 grid-area: tr-5; 132} 133 134.tr-6 { 135 grid-area: tr-6; 136} 137 138.tr-7 { 139 grid-area: tr-7; 140} 141 142.tr-8 { 143 grid-area: tr-8; 144} 145 146.tr-9 { 147 grid-area: tr-9; 148} 149 150.tr-10 { 151 grid-area: tr-10; 152} 153 154.tr-11 { 155 grid-area: tr-11; 156} 157 158.tr-12 { 159 grid-area: tr-12; 160} 161 162.tr-13 { 163 grid-area: tr-13; 164} 165 166.tr-14 { 167 grid-area: tr-14; 168} 169 170.tr-15 { 171 grid-area: tr-15; 172} 173 174.tr-16 { 175 grid-area: tr-16; 176} 177 178.tr-17 { 179 grid-area: tr-17; 180} 181 182.tr-18 { 183 grid-area: tr-18; 184} 185 186.tr-19 { 187 grid-area: tr-19; 188} 189 190.tr-20 { 191 grid-area: tr-20; 192} 193 194.tr-21 { 195 grid-area: tr-21; 196} 197 198.tr-22 { 199 grid-area: tr-22; 200} 201 202.tr-23 { 203 grid-area: tr-23; 204} 205 206.tr-24 { 207 grid-area: tr-24; 208} 209 210.tr-25 { 211 grid-area: tr-25; 212} 213 214.tr-1:hover ~ #card { 215 transition: 125ms ease-in-out; 216 transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); 217} 218 219.tr-2:hover ~ #card { 220 transition: 125ms ease-in-out; 221 transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); 222} 223 224.tr-3:hover ~ #card { 225 transition: 125ms ease-in-out; 226 transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); 227} 228 229.tr-4:hover ~ #card { 230 transition: 125ms ease-in-out; 231 transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); 232} 233 234.tr-5:hover ~ #card { 235 transition: 125ms ease-in-out; 236 transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); 237} 238 239.tr-6:hover ~ #card { 240 transition: 125ms ease-in-out; 241 transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); 242} 243 244.tr-7:hover ~ #card { 245 transition: 125ms ease-in-out; 246 transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); 247} 248 249.tr-8:hover ~ #card { 250 transition: 125ms ease-in-out; 251 transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); 252} 253 254.tr-9:hover ~ #card { 255 transition: 125ms ease-in-out; 256 transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); 257} 258 259.tr-10:hover ~ #card { 260 transition: 125ms ease-in-out; 261 transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); 262} 263 264.tr-11:hover ~ #card { 265 transition: 125ms ease-in-out; 266 transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); 267} 268 269.tr-12:hover ~ #card { 270 transition: 125ms ease-in-out; 271 transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); 272} 273 274.tr-13:hover ~ #card { 275 transition: 125ms ease-in-out; 276 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 277} 278 279.tr-14:hover ~ #card { 280 transition: 125ms ease-in-out; 281 transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); 282} 283 284.tr-15:hover ~ #card { 285 transition: 125ms ease-in-out; 286 transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); 287} 288 289.tr-16:hover ~ #card { 290 transition: 125ms ease-in-out; 291 transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); 292} 293 294.tr-17:hover ~ #card { 295 transition: 125ms ease-in-out; 296 transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); 297} 298 299.tr-18:hover ~ #card { 300 transition: 125ms ease-in-out; 301 transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); 302} 303 304.tr-19:hover ~ #card { 305 transition: 125ms ease-in-out; 306 transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); 307} 308 309.tr-20:hover ~ #card { 310 transition: 125ms ease-in-out; 311 transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); 312} 313 314.tr-21:hover ~ #card { 315 transition: 125ms ease-in-out; 316 transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); 317} 318 319.tr-22:hover ~ #card { 320 transition: 125ms ease-in-out; 321 transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); 322} 323 324.tr-23:hover ~ #card { 325 transition: 125ms ease-in-out; 326 transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); 327} 328 329.tr-24:hover ~ #card { 330 transition: 125ms ease-in-out; 331 transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); 332} 333 334.tr-25:hover ~ #card { 335 transition: 125ms ease-in-out; 336 transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); 337} 338 339.noselect { 340 -webkit-touch-callout: none; 341 /* iOS Safari */ 342 -webkit-user-select: none; 343 /* Safari */ 344 /* Konqueror HTML */ 345 -moz-user-select: none; 346 /* Old versions of Firefox */ 347 -ms-user-select: none; 348 /* Internet Explorer/Edge */ 349 user-select: none; 350 /* Non-prefixed version, currently 351 supported by Chrome, Edge, Opera and Firefox */ 352}
19K views
19K views
BHB7 12. April at 9:17
12. April at 9:17
666
Mdkawsarislam2002 20. September 2023. at 12:35
20. September 2023. at 12:35
wow, Without js! it's Looks awesome
kennyotsu
Pro+
16. October 2023. at 10:4016. October 2023. at 10:40
@Mdkawsarislam2002 Thank you! :D
kntjspr 12. September 2023. at 9:39
12. September 2023. at 9:39
No js🤯
SteveBloX
Pro
23. July 2023. at 10:0323. July 2023. at 10:03
It's very impressive to achieve this without JS. Congrats 👏
kennyotsu
Pro+
23. July 2023. at 11:5623. July 2023. at 11:56
@SteveBloX Ayy! Thank you 😄
Variations
1 MIT License