Card by Peary74 made with CSS

This card was created for Open-Source CSS Odyssey

#212121

1.card {
2  width: 190px;
3  height: 254px;
4  transition: all 0.2s;
5  position: relative;
6  cursor: pointer;
7  color: black;
8  text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff;
9}
10
11.heading {
12  width: inherit;
13  height: inherit;
14  background: rgba(255,255,255,.05);
15  box-shadow: 0 0 10px rgba(0,0,0,0.25);
16  backdrop-filter: blur(10px);
17  border-radius: 8px;
18  color: white;
19  text-shadow: -1px -1px 0px #b0e633, 1px 1px 0px #53ef7d;
20}
21
22.heading span {
23  transform: translateX(10px) translateY(10px);
24  width: 100px;
25  padding: 2px;
26  margin-top: -5px;
27  margin-left: -6.3px;
28  color: white;
29  font-family: 'Orbitron', sans-serif;
30  font-size: 28px;
31  animation-timing-function: steps(2, end);
32  text-shadow: -2px -2px 0px #b0e633, 2px 2px 0px #53ef7d;
33}
34
35.card:hover {
36  transform: scale(1.04) rotate(1deg);
37}
38
39.item {
40  width: 100px;
41  height: 100px;
42  background: radial-gradient(#b0e633, #53ef7d);
43  border-radius: 50%;
44  position: absolute;
45  animation: move-up6 2s ease-in infinite alternate-reverse;
46}
47
48.item:nth-child(1) {
49  top: -55px;
50  left: -40px;
51  z-index: -1;
52}
53
54.item:nth-child(2) {
55  top: -55px;
56  left: 130px;
57  z-index: -1;
58  animation-name: move-down1;
59}
60
61.item:nth-child(3) {
62  top: 210px;
63  left: 130px;
64  z-index: -1;
65  animation-name: move-updown1;
66}
67
68.item--create {
69  width: 100px;
70  height: 100px;
71  background: radial-gradient(#b0e633, #53ef7d);
72  border-radius: 50%;
73  position: absolute;
74  animation: move-up6 2s ease-in infinite alternate-reverse;
75}
76
77.item--create svg {
78  margin-top: 10px;
79  margin-left: 10px;
80}
81
82.item--post svg {
83  margin-top: 10px;
84  margin-left: 13px;
85}
86
87.item--inspire svg {
88  margin-top: 55px;
89  margin-left: 4px;
90}
91
92.item--create:nth-child(2) {
93  top: 210px;
94  left: 130px;
95  animation-name: move-updown1;
96}
97
98.item--create:nth-child(3) {
99  top: 210px;
100  left: 130px;
101  animation-name: move-updown1;
102}
103
104@keyframes move-up6 {
105  to {
106    transform: translateY(-10px);
107  }
108}
109
110@keyframes move-down1 {
111  to {
112    transform: translateY(10px);
113  }
114}
115
116@keyframes move-updown1 {
117  to {
118    transform: translateY(-10px);
119  }
120}
121
122button {
123  display: inline-block;
124  width: 160px;
125  height: 50px;
126  margin-left: -40px;
127  border-radius: 10px;
128  background: radial-gradient(#b0e633, #53ef7d);
129  color: #fff;
130  font-size: 16px;
131  font-weight: bold;
132  text-align: center;
133  text-decoration: none;
134  transition: all 0.3s ease;
135  animation: 2s linear infinite;
136  border: none;
137}
138
139button:hover {
140  background: radial-gradient(#53ef7d, #b0e633);
141  transform: translate(-0.3rem,-0.3rem);
142  box-shadow: 6px 6px #a7fabd;
143  cursor: pointer;
144}
145
146button:active {
147  transform: translate(0);
148  box-shadow: none;
149  color: #000;
150}
151
152.card span::before {
153  content: "";
154  position: absolute;
155  top: 120px;
156  left: 176px;
157  transform: rotate(90deg);
158  bottom: -5px;
159  width: 30px;
160  height: 10px;
161  background: #53ef7d;
162  border-radius: 10px;
163  transition: 0.5s;
164  transition-delay: 0.5;
165}
166
167.card span:nth-child(2)::before {
168  left: -5px;
169}
170
171.card span:nth-child(2)::after {
172  top: 2px;
173  left: 75px;
174}
175
176.card:hover span:nth-child(2)::before {
177  animation-delay: .1s;
178  animation: drop 1s linear infinite;
179}
180
181.card:hover .content:hover span:nth-child(2)::before {
182  display: none;
183}
184
185.card:hover span:nth-child(2)::after {
186  animation-delay: .2s;
187  animation: drop 0.5s linear infinite;
188}
189
190.card:hover .content:hover span:nth-child(2)::after {
191  display: none;
192}
193
194@keyframes drop {
195  0% {
196    top: -10px;
197    transform: translateY(0);
198  }
199
200  100% {
201    top: -10px;
202    transform: translateY(500px);
203  }
204}
205
206.card :hover span::before {
207  left: 90px;
208  top: 60px;
209  height: 50%;
210  width: 10%;
211  border-radius: 30px;
212  transform: rotate(945deg);
213}
214
215.card span::after {
216  content: "";
217  position: absolute;
218  margin-top: 120px;
219  left: -15px;
220  transform: rotate(90deg);
221  top: -5px;
222  width: 30px;
223  height: 10px;
224  background: #53ef7d;
225  border-radius: 10px;
226  transition: 0.5s;
227  transition-delay: 0.5;
228}
229
230.card :hover span::after {
231  left: 90px;
232  top: -60px;
233  height: 50%;
234  width: 10%;
235  border-radius: 30px;
236  transform: rotate(-945deg);
237}
238
239.item--create svg {
240  animation: spin 2s linear infinite;
241}
242
243.item--post svg {
244  animation: upDown 2s ease-in-out infinite alternate;
245}
246
247.item--inspire svg {
248  animation: flash 1.2s linear infinite;
249}
250
251@keyframes spin {
252  
253  0% {
254    transform: rotate(360deg);
255    color: #000;
256  }
257
258  50% {
259    transform: rotate(0deg);
260    color: #fff;
261  }
262
263  100% {
264    transform: rotate(360deg);
265    color: #000;
266  }
267}
268
269@keyframes upDown {
270  0% {
271    transform: translateY(5px);
272    color: #fff;
273    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
274    background-color: transparent;
275    border: none;
276    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
277  }
278
279  100% {
280    transform: translateY(-5px);
281    color: #000;
282  }
283}
284
285@keyframes flash {
286  0% {
287    color: white;
288    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
289    background-color: transparent;
290    border: none;
291    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
292  }
293
294  50% {
295    color: #000;
296  }
297
298  100% {
299    color: white;
300  }
301}
302
303.card:hover .item--create {
304  filter: blur(2px);
305  opacity: .5;
306  transform: scale(.90);
307  box-shadow: none;
308}
309
310.card:hover .item--post {
311  filter: blur(2px);
312  opacity: .5;
313  transform: scale(.90);
314  box-shadow: none;
315}
316
317.card:hover .item--inspire {
318  filter: blur(2px);
319  opacity: .5;
320  transform: scale(.90);
321  box-shadow: none;
322}
323
324.card:hover .item--create:hover {
325  transition: transform .35s ease-in-out;
326  filter: blur(0px);
327  opacity: 1;
328  width: 120px;
329  height: 120px;
330  background: radial-gradient(#53ef7d, #b0e633);
331  transform: translate(-0.3rem,-0.3rem);
332}
333
334.card:hover .item--post:hover {
335  transition: transform .35s ease-in-out;
336  filter: blur(0px);
337  opacity: 1;
338  width: 120px;
339  height: 120px;
340  background: radial-gradient(#53ef7d, #b0e633);
341  transform: translate(-0.3rem,-0.3rem);
342}
343
344.card:hover .item--inspire:hover {
345  transition: transform .35s ease-in-out;
346  filter: blur(0px);
347  opacity: 1;
348  width: 120px;
349  height: 120px;
350  background: radial-gradient(#53ef7d, #b0e633);
351  transform: translate(-0.3rem,-0.3rem);
352}
353

.card {
  width: 190px;
  height: 254px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
  color: black;
  text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff;
}

.heading {
  width: inherit;
  height: inherit;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  text-shadow: -1px -1px 0px #b0e633, 1px 1px 0px #53ef7d;
}

.heading span {
  transform: translateX(10px) translateY(10px);
  width: 100px;
  padding: 2px;
  margin-top: -5px;
  margin-left: -6.3px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  animation-timing-function: steps(2, end);
  text-shadow: -2px -2px 0px #b0e633, 2px 2px 0px #53ef7d;
}

.card:hover {
  transform: scale(1.04) rotate(1deg);
}

.item {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.item:nth-child(1) {
  top: -55px;
  left: -40px;
  z-index: -1;
}

.item:nth-child(2) {
  top: -55px;
  left: 130px;
  z-index: -1;
  animation-name: move-down1;
}

.item:nth-child(3) {
  top: 210px;
  left: 130px;
  z-index: -1;
  animation-name: move-updown1;
}

.item--create {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up6 2s ease-in infinite alternate-reverse;
}

.item--create svg {
  margin-top: 10px;
  margin-left: 10px;
}

.item--post svg {
  margin-top: 10px;
  margin-left: 13px;
}

.item--inspire svg {
  margin-top: 55px;
  margin-left: 4px;
}

.item--create:nth-child(2) {
  top: 210px;
  left: 130px;
  animation-name: move-updown1;
}

.item--create:nth-child(3) {
  top: 210px;
  left: 130px;
  animation-name: move-updown1;
}

@keyframes move-up6 {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down1 {
  to {
    transform: translateY(10px);
  }
}

@keyframes move-updown1 {
  to {
    transform: translateY(-10px);
  }
}

button {
  display: inline-block;
  width: 160px;
  height: 50px;
  margin-left: -40px;
  border-radius: 10px;
  background: radial-gradient(#b0e633, #53ef7d);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: 2s linear infinite;
  border: none;
}

button:hover {
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
  box-shadow: 6px 6px #a7fabd;
  cursor: pointer;
}

button:active {
  transform: translate(0);
  box-shadow: none;
  color: #000;
}

.card span::before {
  content: "";
  position: absolute;
  top: 120px;
  left: 176px;
  transform: rotate(90deg);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #53ef7d;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.card span:nth-child(2)::before {
  left: -5px;
}

.card span:nth-child(2)::after {
  top: 2px;
  left: 75px;
}

.card:hover span:nth-child(2)::before {
  animation-delay: .1s;
  animation: drop 1s linear infinite;
}

.card:hover .content:hover span:nth-child(2)::before {
  display: none;
}

.card:hover span:nth-child(2)::after {
  animation-delay: .2s;
  animation: drop 0.5s linear infinite;
}

.card:hover .content:hover span:nth-child(2)::after {
  display: none;
}

@keyframes drop {
  0% {
    top: -10px;
    transform: translateY(0);
  }

  100% {
    top: -10px;
    transform: translateY(500px);
  }
}

.card :hover span::before {
  left: 90px;
  top: 60px;
  height: 50%;
  width: 10%;
  border-radius: 30px;
  transform: rotate(945deg);
}

.card span::after {
  content: "";
  position: absolute;
  margin-top: 120px;
  left: -15px;
  transform: rotate(90deg);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #53ef7d;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.card :hover span::after {
  left: 90px;
  top: -60px;
  height: 50%;
  width: 10%;
  border-radius: 30px;
  transform: rotate(-945deg);
}

.item--create svg {
  animation: spin 2s linear infinite;
}

.item--post svg {
  animation: upDown 2s ease-in-out infinite alternate;
}

.item--inspire svg {
  animation: flash 1.2s linear infinite;
}

@keyframes spin {
  
  0% {
    transform: rotate(360deg);
    color: #000;
  }

  50% {
    transform: rotate(0deg);
    color: #fff;
  }

  100% {
    transform: rotate(360deg);
    color: #000;
  }
}

@keyframes upDown {
  0% {
    transform: translateY(5px);
    color: #fff;
    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
    background-color: transparent;
    border: none;
    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
  }

  100% {
    transform: translateY(-5px);
    color: #000;
  }
}

@keyframes flash {
  0% {
    color: white;
    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
    background-color: transparent;
    border: none;
    box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
  }

  50% {
    color: #000;
  }

  100% {
    color: white;
  }
}

.card:hover .item--create {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--post {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--inspire {
  filter: blur(2px);
  opacity: .5;
  transform: scale(.90);
  box-shadow: none;
}

.card:hover .item--create:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

.card:hover .item--post:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

.card:hover .item--inspire:hover {
  transition: transform .35s ease-in-out;
  filter: blur(0px);
  opacity: 1;
  width: 120px;
  height: 120px;
  background: radial-gradient(#53ef7d, #b0e633);
  transform: translate(-0.3rem,-0.3rem);
}

Toggle prefixes

462 views

Comments

No variations yet

MIT License

Copyright - 2023 Peary74 (Peary) 

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.