Card by kennyotsu

Posted by

@kennyotsu

Theme:

Dark

#complex#3d#card

#212121

6.1K views

Add prefixes

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

/*works janky on mobile :<*/
.container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
}

.container:active {
  width: 180px;
  height: 245px;
}

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
}

.tracker:hover ~ #card .title {
  opacity: 1;
}

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover {
  cursor: pointer;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: '';
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

kennyotsu

kotsu

Fullstack MERN web developer from Saint-Petersburg, Russia. 1+ years of commercial developement. Lead of ongoing ATG LLC projects

MIT License

Copyright - 2023 kennyotsu (kotsu) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.