炫彩门票卡片

01.card {
02  --width: 180px;
03  --height: 320px;
04  --perforation-size: 12px;
05  --cutouts-adjust: 70px;
06
07  position: relative;
08  display: grid;
09  grid-template-rows: auto 1fr auto;
10  gap: 1rem;
11  grid-template-areas:
12    "header"
13    "body"
14    "footer";
15
16  width: var(--width);
17  height: var(--height);
18  padding: var(--perforation-size) 0;
19
20  font-family: "Inter", sans-serif;
21  font-size: 1rem;
22  user-select: none;
23  overflow: hidden;
24
25  filter: drop-shadow(0 2px 1px #00000025) drop-shadow(0 4px 3px #00000025)
26    drop-shadow(0 10px 9px #00000025) drop-shadow(0 20px 20px #00000025)
27    drop-shadow(0 40px 40px #00000025);
28  animation: hover 3s ease infinite;
29  will-change: transform, filter;
30}
31
32@keyframes hover {
33  50% {
34    filter: drop-shadow(0 4px 3px #00000015) drop-shadow(0 6px 6px #00000015)
35      drop-shadow(0 16px 14px #00000015) drop-shadow(0 30px 28px #00000015)
36      drop-shadow(0 60px 60px #00000015);
37    transform: translateY(-7px) scale(1.02);
38  }
39}
40
41.filter {
42  position: absolute;
43}
44
45.bg {
46  position: absolute;
47  inset: 0;
48  border-radius: inherit;
49  background-color: #fff;
50  filter: url(#bump);
51  mask:
52    /* top perforations */
53    radial-gradient(
54      circle at 50% 0,
55      #fff0 calc(var(--perforation-size) - 5px),
56      #000 calc(var(--perforation-size) - 4px)
57    ),
58    /* bottom perforations */
59      radial-gradient(
60        circle at 50% 100%,
61        #fff0 calc(var(--perforation-size) - 5px),
62        #000 calc(var(--perforation-size) - 4px)
63      ),
64    /* left notch */
65      radial-gradient(circle 8px at left center, #000 98%, #0000 100%),
66    /* right notch */
67      radial-gradient(circle 8px at right center, #000 98%, #0000 100%),
68    /* cut perforation */
69      repeating-linear-gradient(
70        90deg,
71        #000 10px,
72        #000 15px,
73        #0000 16px,
74        #0000 24px
75      );
76
77  mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, repeat-x;
78
79  mask-size:
80    calc(var(--perforation-size) * 2) 100%,
81    calc(var(--perforation-size) * 2) 100%,
82    16px 16px,
83    16px 16px,
84    10px 2px;
85
86  mask-position:
87    calc(0.5 * var(--perforation-size)) top,
88    calc(0.5 * var(--perforation-size)) bottom,
89    left var(--cutouts-adjust),
90    right var(--cutouts-adjust),
91    0 calc(var(--cutouts-adjust) + 7px);
92
93  mask-composite: intersect, exclude, add, add;
94}
95
96.holographic {
97  background-image: linear-gradient(to bottom, #fe58, 90%, #0002),
98    conic-gradient(
99      at 60% 50%,
100      #ccc,
101      #ff6bfe,
102      #00f9f8,
103      #ddd,
104      #0081fd,
105      #eef0bc,
106      #0081fd,
107      #ff6bfe,
108      #0002,
109      #0081fd,
110      #ddd,
111      #01fefb,
112      #ccc
113    );
114}
115.holographic::before {
116  content: "";
117  position: absolute;
118  inset: 0;
119  border-radius: inherit;
120  background: radial-gradient(circle at 70% 20%, #f0f, #0000),
121    repeating-radial-gradient(circle at 30% 80%, #fff, #f4a 48px, #eeeeee 150px);
122  mix-blend-mode: color-burn;
123}
124.holographic::after {
125  content: "";
126  position: absolute;
127  inset: 0;
128  border-radius: inherit;
129  background: linear-gradient(to bottom, #f205, #f00, #0f0, #f205);
130  mix-blend-mode: difference;
131
132  animation: bg-pos 3s ease-in-out infinite alternate;
133  background-position: 0 0;
134  background-size: 100% 300%;
135  background-repeat: repeat;
136}
137
138@keyframes bg-pos {
139  to {
140    background-position: 0 500px;
141  }
142}
143
144.header {
145  position: relative;
146  grid-area: header;
147  margin: 0 8px;
148  text-align: center;
149  z-index: 1;
150  font-family: "Impact", sans-serif;
151  font-size: 2.75rem;
152  letter-spacing: 2px;
153  color: #ffffff9f;
154  text-shadow: 0 0 0 #000;
155  -webkit-text-stroke: #fff 0.5px;
156  mix-blend-mode: difference;
157}
158
159.body {
160  grid-area: body;
161  margin: 0 1em;
162  padding: 0.5em;
163  font-weight: 200;
164  z-index: 1;
165}
166
167.footer {
168  grid-area: footer;
169  z-index: 1;
170
171  margin: 0 1em 1em 1em;
172}
173
174.number {
175  margin-bottom: 0.75rem;
176  text-align: center;
177  border-radius: 999px 0;
178  color: #000;
179  font-weight: 200;
180  .bold {
181    font-weight: 600;
182  }
183}
184
185.barcode {
186  justify-self: center;
187  width: 0;
188  height: 32px;
189  box-shadow:
190    0px 0 0 1px #000,
191    5px 0 0 1px #000,
192    7px 0 0 1px #000,
193    11px 0 0 1px #000,
194    15px 0 0 1px #000,
195    16px 0 0 1px #000,
196    22px 0 0 1px #000,
197    27px 0 0 1px #000,
198    30px 0 0 1px #000,
199    35px 0 0 1px #000,
200    36px 0 0 1px #000,
201    39px 0 0 1px #000,
202    43px 0 0 1px #000,
203    47px 0 0 1px #000,
204    50px 0 0 1px #000,
205    55px 0 0 1px #000,
206    59px 0 0 1px #000,
207    60px 0 0 1px #000,
208    64px 0 0 1px #000,
209    69px 0 0 1px #000,
210    70px 0 0 1px #000,
211    74px 0 0 1px #000;
212  transform: translateX(37px);
213}
214
215.symbol {
216  position: absolute;
217  top: 1.3em;
218  right: 0px;
219  rotate: 185deg;
220  font-size: 1.1em;
221  color: #fff;
222  line-height: 0.5;
223  opacity: 0.2;
224}
225.notes {
226  position: absolute;
227  inset: 0;
228  overflow: hidden;
229  font-size: 5rem;
230  color: #e7e7e7;
231  mix-blend-mode: color-burn;
232  transform: translateY(20%);
233  z-index: 1;
234}
235.notes:nth-child(2) {
236  transform: translateY(40%);
237}
238.notes:nth-child(3) {
239  transform: translateY(60%);
240}