Card by escannord made with CSS

This card was created for Open-Source CSS Odyssey

#212121

1.card {
2  background-color: black;
3  box-shadow: 5px 5px 2px rgb(43, 44, 44);
4  position: relative;
5  padding: 20px;
6  border: 1px solid #ccc;
7  border-radius: 5px;
8  overflow: hidden;
9}
10
11.card button {
12  width: 100%;
13  background-color: blue;
14  color: white;
15  font-weight: bolder;
16  padding: 10px;
17  margin: 10px 0;
18  border: 0;
19  cursor: pointer;
20  box-shadow: 5px 5px  lightblue;
21  transition: box-shadow .5s;
22}
23
24.card * {
25  position: relative;
26  z-index: 2;
27}
28
29.card button:hover {
30  box-shadow: 7px 7px  lightblue;
31}
32
33.card .heading {
34  color: rgb(171, 171, 236);
35  font-weight: bolder;
36  text-transform: uppercase;
37  font-size: 22px;
38  animation: lim 5s infinite  alternate-reverse;
39}
40
41.card button:active {
42  box-shadow: 1px 1px lightblue;
43}
44
45.card .item {
46  background-color: rgba(23, 19, 26,.8);
47  margin: 10px 0;
48  padding: 5px 15px;
49  position: relative;
50}
51
52.card .item::before {
53  content: " ";
54  position: absolute;
55  display: inline-block;
56  width: 0px;
57  height: 30%;
58  left: -10px;
59  border: 10px solid rgb(84, 76, 90);
60  top: -5px;
61}
62
63.card .item::after {
64  content: " ";
65  position: absolute;
66  width: 0;
67  height: 0;
68  border-style: solid;
69  border-width: 0 7px 7px 7px;
70  border-color: transparent transparent rgb(0, 0, 0) transparent;
71  transform: rotate(-45deg);
72  left: -5px;
73  bottom: 3px;
74}
75
76.card .item:hover {
77  transform: scale(1.01);
78  background-color: grey;
79}
80
81.card .item svg {
82  vertical-align: middle;
83  margin-right: 10px;
84}
85
86.card:active:before {
87  content: "";
88  position: absolute;
89  top: -10px;
90  left: -10px;
91  right: -10px;
92  bottom: -10px;
93  z-index: -1;
94  border-radius: 5px;
95  background: rgba(0, 0, 0, 0.1);
96  animation: ripple 5s linear;
97}
98
99.card:hover {
100  animation: shake 0.5s linear;
101  box-shadow: 0px 0px 20px rgb(168, 168, 168);
102}
103
104@keyframes ripple {
105  0% {
106    transform: scale(1);
107    opacity: 0.5;
108  }
109
110  100% {
111    transform: scale(10);
112    opacity: 0;
113  }
114}
115
116@keyframes shake {
117  0% {
118    transform: rotate(10deg) translate(20px);
119  }
120
121  25% {
122    transform: rotate(-10deg) translate(-20px);
123  }
124
125  50% {
126    transform: rotate(5deg) translate(20px);
127  }
128
129  75% {
130    transform: rotate(-5deg) translate(-20px);
131  }
132
133  100% {
134    transform: rotate(0deg) translate(0px);
135  }
136}
137
138.card::after {
139  content: " ";
140  position: absolute;
141  display: inline-block;
142  width: 150%;
143  height: 200%;
144  z-index: 1;
145  top: 50%;
146  left: 50%;
147  transform: translate(-50%,-50%);
148  border: 1px solid rgb(187, 182, 182);
149  background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
150  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
151  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
152  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
153  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
154  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
155   linear-gradient(315deg, rgba(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
156  background-size: 1% 1%;
157  animation: wavy 20s linear infinite alternate-reverse;
158}
159
160@keyframes wavy {
161  0% {
162    background-position-x: 0;
163    transform: translate(-50%,-50%) rotate(0deg);
164  }
165
166  50% {
167    background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
168  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
169  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
170  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
171  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
172  radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),
173   linear-gradient(315deg, rgba(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
174  }
175
176  75% {
177  }
178
179  100% {
180    background-position-y: -100%;
181    transform: translate(-50%,-50%) rotate(360deg);
182  }
183}
184
185@keyframes lim {
186  0% {
187    text-shadow: 2px 2px 10px white;
188  }
189
190  25% {
191    text-shadow: 2px 2px 15px white;
192  }
193
194  50% {
195    text-shadow: 2px 2px 5px white;
196  }
197
198  75% {
199    text-shadow: 2px 2px 20px white;
200  }
201
202  100% {
203    text-shadow: 0px 0px 0px white;
204  }
205}
206
207

.card {
  background-color: black;
  box-shadow: 5px 5px 2px rgb(43, 44, 44);
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.card button {
  width: 100%;
  background-color: blue;
  color: white;
  font-weight: bolder;
  padding: 10px;
  margin: 10px 0;
  border: 0;
  cursor: pointer;
  box-shadow: 5px 5px  lightblue;
  transition: box-shadow .5s;
}

.card * {
  position: relative;
  z-index: 2;
}

.card button:hover {
  box-shadow: 7px 7px  lightblue;
}

.card .heading {
  color: rgb(171, 171, 236);
  font-weight: bolder;
  text-transform: uppercase;
  font-size: 22px;
  animation: lim 5s infinite  alternate-reverse;
}

.card button:active {
  box-shadow: 1px 1px lightblue;
}

.card .item {
  background-color: rgba(23, 19, 26,.8);
  margin: 10px 0;
  padding: 5px 15px;
  position: relative;
}

.card .item::before {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 0px;
  height: 30%;
  left: -10px;
  border: 10px solid rgb(84, 76, 90);
  top: -5px;
}

.card .item::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent rgb(0, 0, 0) transparent;
  transform: rotate(-45deg);
  left: -5px;
  bottom: 3px;
}

.card .item:hover {
  transform: scale(1.01);
  background-color: grey;
}

.card .item svg {
  vertical-align: middle;
  margin-right: 10px;
}

.card:active:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
  animation: ripple 5s linear;
}

.card:hover {
  animation: shake 0.5s linear;
  box-shadow: 0px 0px 20px rgb(168, 168, 168);
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(10);
    opacity: 0;
  }
}

@keyframes shake {
  0% {
    transform: rotate(10deg) translate(20px);
  }

  25% {
    transform: rotate(-10deg) translate(-20px);
  }

  50% {
    transform: rotate(5deg) translate(20px);
  }

  75% {
    transform: rotate(-5deg) translate(-20px);
  }

  100% {
    transform: rotate(0deg) translate(0px);
  }
}

.card::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 150%;
  height: 200%;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgb(187, 182, 182);
  background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 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(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
  background-size: 1% 1%;
  animation: wavy 20s linear infinite alternate-reverse;
}

@keyframes wavy {
  0% {
    background-position-x: 0;
    transform: translate(-50%,-50%) rotate(0deg);
  }

  50% {
    background-image: linear-gradient(to top,rgba(0, 0, 0, 0.466) ,rgba(44, 38, 38, 0.342)),
  radial-gradient(circle at 100% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% , rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 0% 100%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),
  radial-gradient(circle at 100% 0%, rgba(0, 238, 40, 0.329), rgb(39, 59, 168) 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(101, 0, 94, 0.308) 3%, rgba(60,132,206,1) 38%, rgba(48, 238, 225, 0.301) 68%, rgba(18, 21, 27, 0.37) 98%);
  }

  75% {
  }

  100% {
    background-position-y: -100%;
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes lim {
  0% {
    text-shadow: 2px 2px 10px white;
  }

  25% {
    text-shadow: 2px 2px 15px white;
  }

  50% {
    text-shadow: 2px 2px 5px white;
  }

  75% {
    text-shadow: 2px 2px 20px white;
  }

  100% {
    text-shadow: 0px 0px 0px white;
  }
}

Toggle prefixes

324 views

Comments

No variations yet

MIT License

Copyright - 2023 escannord  

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.