Card by andrew-demchenk0 made with CSS

This card was created for Open-Source CSS Odyssey

#e8e8e8

1.card {
2  height: 300px;
3  width: 220px;
4  padding: 15px;
5  position: relative;
6  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
7  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
8  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
9  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
10  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
11  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
12  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
13  background-size: 200% 200%;
14  animation: cosmic 10s ease-in-out infinite;
15  box-sizing: border-box;
16  transform: skewY(-5deg);
17  transition: all 0.3s;
18  display: flex;
19  flex-direction: column;
20  justify-content: flex-end;
21  gap: 50px;
22  align-items: center;
23}
24
25.card::before {
26  content: '';
27  width: 10px;
28  height: 300px;
29  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
30  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
31  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
32  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
33  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
34  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
35  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
36  background-size: 200% 200%;
37  animation: cosmic 10s ease-in-out infinite;
38  position: absolute;
39  top: 0px;
40  left: -9.5px;
41  transform-origin: right;
42  transform: skewY(45deg);
43  border: none;
44  transition: all 0.5s;
45}
46
47.card::after {
48  content: '';
49  height: 10px;
50  width: 220px;
51  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
52  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
53  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
54  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
55  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
56  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
57  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
58  background-size: 200% 200%;
59  animation: cosmic 10s ease-in-out infinite;
60  position: absolute;
61  top: -9.5px;
62  left: 0px;
63  transform-origin: bottom;
64  transform: skewX(45deg);
65  transition: all 0.5s;
66  box-shadow: -310px 315px 6px rgba(36, 4, 41, 0.5);
67}
68
69@keyframes cosmic {
70  0% {
71    background-position: 0% 0%;
72  }
73
74  50% {
75    background-position: 100% 100%;
76  }
77
78  100% {
79    background-position: 0% 0%;
80  }
81}
82
83.card:hover {
84  transform: skewY(0deg);
85}
86
87.card:hover::before {
88  width: 0px;
89  height: 300px;
90  left: 0;
91  top: 0.1px;
92}
93
94.card:hover::after {
95  width: 220px;
96  height: 0px;
97  left: 0.1px;
98  top: 0;
99  border: none;
100}
101
102.card > *:not(.heading) {
103  opacity: 0;
104}
105
106.card .heading {
107  width: 200px;
108  position: absolute;
109  top: 50%;
110  left: 50%;
111  transform: translate(-50%, -50%);
112  text-align: center;
113  transition: 0.7s;
114  color: #fff;
115  font-size: 17px;
116  font-weight: 500;
117}
118
119.card .heading span {
120  font-weight: 700;
121  letter-spacing: 1.5px;
122  animation: flickering 3s linear infinite;
123}
124
125.card .heading span::before {
126  content: '☞';
127  position: absolute;
128  top: 40px;
129  left: 40%;
130  transform: rotate(-90deg);
131  font-size: 30px;
132  transition: all 0.5s;
133}
134
135.card:hover .heading span::before {
136  transform: rotate(90deg);
137  left: 45%;
138}
139
140@keyframes flickering {
141  0% {
142    opacity: 1;
143  }
144
145  50% {
146    opacity: 1;
147  }
148
149  52% {
150    opacity: 1;
151  }
152
153  54% {
154    opacity: 0;
155  }
156
157  56% {
158    opacity: 1;
159  }
160
161  90% {
162    opacity: 1;
163  }
164
165  92% {
166    opacity: 0;
167  }
168
169  94% {
170    opacity: 1;
171  }
172
173  96% {
174    opacity: 0;
175  }
176
177  98% {
178    opacity: 1;
179  }
180
181  99% {
182    opacity: 0;
183  }
184
185  100% {
186    opacity: 1;
187  }
188}
189
190.card:hover .heading {
191  top: 13%;
192}
193
194.card:hover > *:not(.heading) {
195  animation: fadeIn 1s ease 0.5s forwards;
196}
197
198@keyframes fadeIn {
199  to {
200    opacity: 1;
201  }
202}
203
204.card .content {
205  display: flex;
206  flex-direction: column;
207  gap: 10px;
208  color: #fff;
209}
210
211.card .content .item {
212  border-radius: 0px 5px 0 5px;
213  cursor: pointer;
214  display: flex;
215  gap: 15px;
216  transition: all 0.5s;
217  background-color: rgba(0, 0, 0, 0.2);
218  padding: 2px 30px;
219  justify-content: start;
220  align-items: center;
221}
222
223.card .content .item:hover {
224  background-color: rgba(0, 0, 0, 0.4);
225}
226
227.content .item--create:hover svg {
228  animation: create 4s infinite;
229  stroke: #DB0F5A;
230}
231
232@keyframes create {
233  0% {
234    transform: translateX(1px);
235  }
236
237  10% {
238    transform: translateX(-1px);
239  }
240
241  20% {
242    transform: translateX(1px);
243  }
244
245  30% {
246    transform: translateX(-1px);
247  }
248
249  40% {
250    transform: translateX(1px);
251  }
252
253  50% {
254    transform: translateX(-1px);
255  }
256
257  60% {
258    transform: translateX(1px);
259  }
260
261  70% {
262    transform: translateX(-1px);
263  }
264
265  80% {
266    transform: translateX(1px);
267  }
268
269  90% {
270    transform: translateX(-1px);
271  }
272
273  100% {
274    transform: translateX(1px);
275  }
276}
277
278.content .item--post:hover svg {
279  animation: rocket 1s infinite;
280  stroke: #DB0F5A;
281}
282
283@keyframes rocket {
284  0% {
285    transform: rotate(0deg);
286  }
287
288  10% {
289    transform: rotate(-2deg);
290  }
291
292  20% {
293    transform: rotate(2deg);
294  }
295
296  30% {
297    transform: rotate(-2deg);
298  }
299
300  40% {
301    transform: rotate(2deg);
302  }
303
304  50% {
305    transform: rotate(-2deg);
306  }
307
308  60% {
309    transform: rotate(2deg);
310  }
311
312  70% {
313    transform: rotate(-2deg);
314  }
315
316  80% {
317    transform: rotate(2deg);
318  }
319
320  90% {
321    transform: rotate(-2deg);
322  }
323
324  100% {
325    transform: rotate(2deg);
326  }
327}
328
329.content .item--inspire:hover svg {
330  animation: inspire 2s infinite;
331  stroke: #DB0F5A;
332}
333
334@keyframes inspire {
335  0% {
336    transform: scale(1);
337  }
338
339  10% {
340    transform: scale(0.97);
341  }
342
343  20% {
344    transform: scale(1.03);
345  }
346
347  30% {
348    transform: scale(1);
349  }
350
351  40% {
352    transform: scale(0.97);
353  }
354
355  50% {
356    transform: scale(1.03);
357  }
358
359  60% {
360    transform: scale(1);
361  }
362
363  70% {
364    transform: scale(0.97);
365  }
366
367  80% {
368    transform: scale(1.03);
369  }
370
371  90% {
372    transform: scale(1);
373  }
374
375  100% {
376    transform: scale(0.97);
377  }
378}
379
380button {
381  cursor: pointer;
382  border-radius: 0px 5px 0 5px;
383  height: 30px;
384  width: calc(100% + 50px);
385  position: relative;
386  border: none;
387  transition: 0.2s;
388  background-color: #CC014D;
389  color: #fff;
390  text-align: center;
391  font-size: 17px;
392  z-index: 0 !important;
393}
394
395.content::before {
396  content: '';
397  position: absolute;
398  bottom: 5px;
399  border: 15px solid #DB0F5A;
400  right: -30px;
401  border-right-color: transparent;
402  pointer-events: none;
403  z-index: -1;
404}
405
406.content::after {
407  content: '';
408  position: absolute;
409  border-style: solid;
410  bottom: 5px;
411  right: -10px;
412  border-width: 10px 10px 0 0;
413  border-color: #6B043A transparent transparent transparent;
414}
415
416button:hover {
417  letter-spacing: 1px;
418}
419
420button:active {
421  transform: translateY(1px);
422}

.card {
  height: 300px;
  width: 220px;
  padding: 15px;
  position: relative;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  box-sizing: border-box;
  transform: skewY(-5deg);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 50px;
  align-items: center;
}

.card::before {
  content: '';
  width: 10px;
  height: 300px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  position: absolute;
  top: 0px;
  left: -9.5px;
  transform-origin: right;
  transform: skewY(45deg);
  border: none;
  transition: all 0.5s;
}

.card::after {
  content: '';
  height: 10px;
  width: 220px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),
  radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),
  radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),
  radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
  linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);
  background-size: 200% 200%;
  animation: cosmic 10s ease-in-out infinite;
  position: absolute;
  top: -9.5px;
  left: 0px;
  transform-origin: bottom;
  transform: skewX(45deg);
  transition: all 0.5s;
  box-shadow: -310px 315px 6px rgba(36, 4, 41, 0.5);
}

@keyframes cosmic {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

.card:hover {
  transform: skewY(0deg);
}

.card:hover::before {
  width: 0px;
  height: 300px;
  left: 0;
  top: 0.1px;
}

.card:hover::after {
  width: 220px;
  height: 0px;
  left: 0.1px;
  top: 0;
  border: none;
}

.card > *:not(.heading) {
  opacity: 0;
}

.card .heading {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: 0.7s;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.card .heading span {
  font-weight: 700;
  letter-spacing: 1.5px;
  animation: flickering 3s linear infinite;
}

.card .heading span::before {
  content: '☞';
  position: absolute;
  top: 40px;
  left: 40%;
  transform: rotate(-90deg);
  font-size: 30px;
  transition: all 0.5s;
}

.card:hover .heading span::before {
  transform: rotate(90deg);
  left: 45%;
}

@keyframes flickering {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  52% {
    opacity: 1;
  }

  54% {
    opacity: 0;
  }

  56% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  94% {
    opacity: 1;
  }

  96% {
    opacity: 0;
  }

  98% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.card:hover .heading {
  top: 13%;
}

.card:hover > *:not(.heading) {
  animation: fadeIn 1s ease 0.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.card .content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.card .content .item {
  border-radius: 0px 5px 0 5px;
  cursor: pointer;
  display: flex;
  gap: 15px;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 30px;
  justify-content: start;
  align-items: center;
}

.card .content .item:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.content .item--create:hover svg {
  animation: create 4s infinite;
  stroke: #DB0F5A;
}

@keyframes create {
  0% {
    transform: translateX(1px);
  }

  10% {
    transform: translateX(-1px);
  }

  20% {
    transform: translateX(1px);
  }

  30% {
    transform: translateX(-1px);
  }

  40% {
    transform: translateX(1px);
  }

  50% {
    transform: translateX(-1px);
  }

  60% {
    transform: translateX(1px);
  }

  70% {
    transform: translateX(-1px);
  }

  80% {
    transform: translateX(1px);
  }

  90% {
    transform: translateX(-1px);
  }

  100% {
    transform: translateX(1px);
  }
}

.content .item--post:hover svg {
  animation: rocket 1s infinite;
  stroke: #DB0F5A;
}

@keyframes rocket {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-2deg);
  }

  20% {
    transform: rotate(2deg);
  }

  30% {
    transform: rotate(-2deg);
  }

  40% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  60% {
    transform: rotate(2deg);
  }

  70% {
    transform: rotate(-2deg);
  }

  80% {
    transform: rotate(2deg);
  }

  90% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

.content .item--inspire:hover svg {
  animation: inspire 2s infinite;
  stroke: #DB0F5A;
}

@keyframes inspire {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.97);
  }

  20% {
    transform: scale(1.03);
  }

  30% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.97);
  }

  50% {
    transform: scale(1.03);
  }

  60% {
    transform: scale(1);
  }

  70% {
    transform: scale(0.97);
  }

  80% {
    transform: scale(1.03);
  }

  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.97);
  }
}

button {
  cursor: pointer;
  border-radius: 0px 5px 0 5px;
  height: 30px;
  width: calc(100% + 50px);
  position: relative;
  border: none;
  transition: 0.2s;
  background-color: #CC014D;
  color: #fff;
  text-align: center;
  font-size: 17px;
  z-index: 0 !important;
}

.content::before {
  content: '';
  position: absolute;
  bottom: 5px;
  border: 15px solid #DB0F5A;
  right: -30px;
  border-right-color: transparent;
  pointer-events: none;
  z-index: -1;
}

.content::after {
  content: '';
  position: absolute;
  border-style: solid;
  bottom: 5px;
  right: -10px;
  border-width: 10px 10px 0 0;
  border-color: #6B043A transparent transparent transparent;
}

button:hover {
  letter-spacing: 1px;
}

button:active {
  transform: translateY(1px);
}

Toggle prefixes

1.7K views

Comments

No variations yet

MIT License

Copyright - 2023 andrew-demchenk0 (A) 

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.