Card by tofe812

1.card {
2  display: flex;
3  flex-direction: column;
4  padding: 20px;
5  border: 1px solid a2a2a2;
6  color: black;
7  border-radius: 20px;
8  background-color: rgba(255, 255, 255, 0.5);
9  backdrop-filter: blur(10px);
10  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75),
11              0px 0px 10px 0px rgba(255, 255, 255, 0.75),
12              0px 0px 20px 0px rgba(156, 156, 156, 0.75);
13  transform: rotateX(-25deg) rotateY(45deg) rotateZ(0deg) translateX(-40px) translateY(-40px);
14  transition: all 0.3s ease-in-out;
15  -webkit-user-select: none;
16 /* Safari */
17  user-select: none;
18 /* Standard syntax */
19}
20
21.card:hover {
22  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75),
23              0px 0px 20px 0px rgba(255, 255, 255, 0.75),
24              0px 0px 50px 0px rgba(156, 156, 156, 0.75);
25  transform: scale(1.1);
26}
27
28.heading {
29  font-size: 18px;
30  margin-bottom: 10px;
31  text-align: center;
32}
33
34.heading span {
35  margin: 0;
36  font-size: 38px;
37  font-weight: bold;
38  color: transparent;
39  text-transform: uppercase;
40  background-image: linear-gradient(to left, #2ecc71, #3498db, #9b59b6, #f39c12, #2ecc71, #3498db);
41  background-clip: text;
42  animation: spanAnimate 5s linear infinite;
43  background-size: 500%;
44}
45
46.heading span::before {
47  content: "\a";
48  white-space: pre;
49}
50
51.item {
52  display: flex;
53  padding-block: 5px;
54  padding-left: 10px;
55}
56
57.item--create {
58  color: rgb(255, 165, 0);
59  filter: drop-shadow(0 0 5px rgb(255 165 0 / 0.6));
60}
61
62.item--post {
63  color: rgb(220, 20, 60);
64  filter: drop-shadow(0 0 5px rgb(220 20 60 / 0.6));
65}
66
67.item--inspire {
68  color: rgb(20, 213, 220);
69  filter: drop-shadow(0 0 5px rgb(20 213 220 / 0.6));
70}
71
72.item svg {
73  margin: 5px;
74}
75
76.item span {
77  align-self: center;
78}
79
80button {
81  margin: 5px;
82  padding: 10px;
83  background-color: rgb(100, 149, 237);
84  /* color: white; */
85  border: 1px solid cornflowerblue;
86  border-radius: 10px;
87  box-shadow: 0px 0px 20px 0px rgba(100, 149, 237, 0.75);
88  transition: all 0.3s ease-in-out;
89  cursor: pointer;
90}
91
92button:hover {
93  box-shadow: 0px 0px 5px 0px rgba(100, 149, 237, 0.75),
94              0px 0px 20px 0px rgba(100, 149, 237, 0.75),
95              0px 0px 50px 0px rgba(100, 149, 237, 0.75);
96  transform: scale(1.1);
97}
98
99@keyframes spanAnimate {
100  0% {
101    background-position: 0 100%;
102  }
103
104  100% {
105    background-position: 100% 0;
106  }
107}
108
109@media (prefers-color-scheme: dark) {
110  .card {
111    color: white;
112  }
113
114  button {
115    color: white;
116  }
117}