Card by Tokkstrr

#212121

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

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

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

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: #191919;
}

.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: 20px;
  margin-right: 10px;
  margin-left: 10px;
  text-align: center;
  color: black;
}

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

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 50px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  max-width: 1000px;
  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: #ffcc00;
  opacity: 0%;
  width: 105%;
  height: 105%;
  border-radius: 20px;
  position: absolute;
  z-index: -;
  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 */
}

Toggle prefixes

272 views

Variation of acard

Copy to Figma

272 views

Variation of acard

Comments

MIT License

Copyright - 2024 kennyotsu (kotsu) 
Copyright - 2024 Tokkstrr  

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.