Card by csozidev made with CSS

This card was created for Open-Source CSS Odyssey

#212121

1/* CSS Challange card made by: csozi | Website: www.csozi.hu*/
2
3.card {
4  background-color: #161617;
5  height: 290px;
6  width: 230px;
7  position: relative;
8  padding: 10px;
9  padding-top: 10px;
10  border-radius: 20px;
11}
12
13.card::before {
14  content: '';
15  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
16  height: 298px;
17  width: 238px;
18  position: absolute;
19  top: -4px;
20  left: -4px;
21  z-index: -1;
22  border-radius: 24px;
23}
24
25.heading {
26  line-height: 10px;
27  font-size: 18px;
28  text-align: center;
29  font-weight: bold;
30  color: white;
31}
32
33.heading span {
34  position: relative;
35  top: 22px;
36  font-size: 50px;
37  font-weight: bolder;
38  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
39  background-size: 400% 400%;
40  animation: galaxy_background 7s ease infinite;
41  -webkit-background-clip: text;
42  -webkit-text-fill-color: transparent;
43  z-index: 10;
44}
45
46.heading span::after {
47  content: 'Galaxy';
48  position: absolute;
49  padding-top: 20px;
50  translate: 0px -19px;
51  left: 0;
52  top: 25px;
53  width: 100%;
54  height: 100%;
55  background-image: radial-gradient(#ffffff 1px, transparent 0);
56  background-size: 15px 20px;
57  -webkit-background-clip: text;
58  -webkit-text-fill-color: transparent;
59  color: rgba(0, 0, 0, 0);
60  animation: infinite galaxy_bg_dots 3s linear;
61  pointer-events: none;
62}
63
64.item {
65  color: white;
66  font-weight: bold;
67  width: fit-content;
68  height: fit-content;
69  position: absolute;
70  transition: 0.2s;
71  cursor: pointer;
72}
73
74.item--create:hover {
75  color: #9e45af;
76}
77
78.item--post:hover {
79  color: #580aab;
80}
81
82.item--inspire:hover {
83  color: #e54dd3;
84}
85
86.item svg {
87}
88
89.item--create {
90  top: 80px;
91  left: 15px;
92  rotate: -5deg;
93}
94
95.item--create::before {
96  content: '';
97  position: absolute;
98  height: 6px;
99  width: 6px;
100  border-radius: 3px;
101  background-color: white;
102  top: 25px;
103  left: 80px;
104  animation: infinite dots 3.5s;
105  animation-delay: 0s;
106  scale: 0;
107  opacity: 0;
108}
109
110.item--create::after {
111  content: '';
112  position: absolute;
113  height: 6px;
114  width: 6px;
115  border-radius: 3px;
116  background-color: white;
117  top: 40px;
118  left: 95px;
119  animation: infinite dots 3.5s;
120  animation-delay: 0.5s;
121  scale: 0;
122  opacity: 0;
123}
124
125.item--post {
126  top: 130px;
127  right: 20px;
128  rotate: 6deg;
129}
130
131.item--post::before {
132  content: '';
133  position: absolute;
134  height: 6px;
135  width: 6px;
136  border-radius: 3px;
137  background-color: white;
138  bottom: 25px;
139  right: 70px;
140  animation: infinite dots 3.5s;
141  animation-delay: 1s;
142  scale: 0;
143  opacity: 0;
144}
145
146.item--post::after {
147  content: '';
148  position: absolute;
149  height: 6px;
150  width: 6px;
151  border-radius: 3px;
152  background-color: white;
153  top: 30px;
154  right: 55px;
155  animation: infinite dots 3.5s;
156  animation-delay: 1.5s;
157  scale: 0;
158  opacity: 0;
159}
160
161.item--inspire {
162  top: 180px;
163  left: 20px;
164  rotate: -3deg;
165}
166
167.item--inspire::before {
168  content: '';
169  position: absolute;
170  height: 6px;
171  width: 6px;
172  border-radius: 3px;
173  background-color: white;
174  bottom: 27px;
175  left: 110px;
176  animation: infinite dots 3.5s;
177  animation-delay: 2s;
178  scale: 0;
179  opacity: 0;
180}
181
182.item--inspire::after {
183  content: '';
184  position: absolute;
185  height: 6px;
186  width: 6px;
187  border-radius: 3px;
188  background-color: white;
189  bottom: 20px;
190  left: 90px;
191  animation: infinite dots 3.5s;
192  animation-delay: 2.5s;
193  scale: 0;
194  opacity: 0;
195}
196
197.item span {
198  position: relative;
199  bottom: 5px;
200}
201
202.card button {
203  position: absolute;
204  bottom: 10px;
205  width: calc(100% - 20px);
206  height: 50px;
207  border-radius: 10px;
208  background-color: #323232;
209  background-image: linear-gradient(27deg, #323232 40%, #091296 50%, #580aab 65%, #9e45af 80%, #e54dd3 100%);
210  background-size: 400% 400%;
211  background-position: 0%;
212  transition: 0.3s ease-in-out;
213  border: none;
214  color: white;
215  font-size: 22px;
216  font-weight: bolder;
217  cursor: pointer;
218}
219
220.card button:hover {
221  background-position: 100% 100%;
222  translate: 0px -2px;
223}
224
225@keyframes dots {
226  0% {
227    scale: 0;
228    opacity: 0;
229  }
230
231  25% {
232    scale: 1.4;
233    opacity: 1;
234  }
235
236  90% {
237    scale: 0;
238    opacity: 0;
239  }
240
241  100% {
242    scale: 0;
243    opacity: 0;
244  }
245}
246
247@keyframes galaxy_background {
248  0% {
249    background-position: 0% 50%
250  }
251
252  50% {
253    background-position: 100% 50%
254  }
255
256  100% {
257    background-position: 0% 50%
258  }
259}
260
261@keyframes galaxy_bg_dots {
262  from {
263    background-position: 0px 0px;
264  }
265
266  to {
267    background-position: -100px 100px;
268  }
269}

/* CSS Challange card made by: csozi | Website: www.csozi.hu*/

.card {
  background-color: #161617;
  height: 290px;
  width: 230px;
  position: relative;
  padding: 10px;
  padding-top: 10px;
  border-radius: 20px;
}

.card::before {
  content: '';
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  height: 298px;
  width: 238px;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 24px;
}

.heading {
  line-height: 10px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.heading span {
  position: relative;
  top: 22px;
  font-size: 50px;
  font-weight: bolder;
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  background-size: 400% 400%;
  animation: galaxy_background 7s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 10;
}

.heading span::after {
  content: 'Galaxy';
  position: absolute;
  padding-top: 20px;
  translate: 0px -19px;
  left: 0;
  top: 25px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff 1px, transparent 0);
  background-size: 15px 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(0, 0, 0, 0);
  animation: infinite galaxy_bg_dots 3s linear;
  pointer-events: none;
}

.item {
  color: white;
  font-weight: bold;
  width: fit-content;
  height: fit-content;
  position: absolute;
  transition: 0.2s;
  cursor: pointer;
}

.item--create:hover {
  color: #9e45af;
}

.item--post:hover {
  color: #580aab;
}

.item--inspire:hover {
  color: #e54dd3;
}

.item svg {
}

.item--create {
  top: 80px;
  left: 15px;
  rotate: -5deg;
}

.item--create::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 25px;
  left: 80px;
  animation: infinite dots 3.5s;
  animation-delay: 0s;
  scale: 0;
  opacity: 0;
}

.item--create::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 40px;
  left: 95px;
  animation: infinite dots 3.5s;
  animation-delay: 0.5s;
  scale: 0;
  opacity: 0;
}

.item--post {
  top: 130px;
  right: 20px;
  rotate: 6deg;
}

.item--post::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 25px;
  right: 70px;
  animation: infinite dots 3.5s;
  animation-delay: 1s;
  scale: 0;
  opacity: 0;
}

.item--post::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 30px;
  right: 55px;
  animation: infinite dots 3.5s;
  animation-delay: 1.5s;
  scale: 0;
  opacity: 0;
}

.item--inspire {
  top: 180px;
  left: 20px;
  rotate: -3deg;
}

.item--inspire::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 27px;
  left: 110px;
  animation: infinite dots 3.5s;
  animation-delay: 2s;
  scale: 0;
  opacity: 0;
}

.item--inspire::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 20px;
  left: 90px;
  animation: infinite dots 3.5s;
  animation-delay: 2.5s;
  scale: 0;
  opacity: 0;
}

.item span {
  position: relative;
  bottom: 5px;
}

.card button {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 20px);
  height: 50px;
  border-radius: 10px;
  background-color: #323232;
  background-image: linear-gradient(27deg, #323232 40%, #091296 50%, #580aab 65%, #9e45af 80%, #e54dd3 100%);
  background-size: 400% 400%;
  background-position: 0%;
  transition: 0.3s ease-in-out;
  border: none;
  color: white;
  font-size: 22px;
  font-weight: bolder;
  cursor: pointer;
}

.card button:hover {
  background-position: 100% 100%;
  translate: 0px -2px;
}

@keyframes dots {
  0% {
    scale: 0;
    opacity: 0;
  }

  25% {
    scale: 1.4;
    opacity: 1;
  }

  90% {
    scale: 0;
    opacity: 0;
  }

  100% {
    scale: 0;
    opacity: 0;
  }
}

@keyframes galaxy_background {
  0% {
    background-position: 0% 50%
  }

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

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

@keyframes galaxy_bg_dots {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -100px 100px;
  }
}

Toggle prefixes

436 views

Comments

No variations yet

MIT License

Copyright - 2023 csozidev (Csőke Zalán) 

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.