Card by Galahhad made with CSS

This card was created for One <div> challenge

#212121

1.one-div {
2  --circle-color: #212121;
3  width: 300px;
4  height: 150px;
5  position: relative;
6}
7
8.one-div::before {
9  content: "Golden Ticket";
10  color: transparent;
11  text-shadow: -55px 0 #2E2205;
12  text-transform: uppercase;
13  font-family: "Anton", Impact, sans-serif;
14  font-size: 1.6rem;
15  display: -webkit-box;
16  display: -ms-flexbox;
17  display: flex;
18  -webkit-box-align: center;
19  -ms-flex-align: center;
20  align-items: center;
21  -webkit-box-pack: center;
22  -ms-flex-pack: center;
23  justify-content: center;
24  position: absolute;
25  inset: 0;
26  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
27      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
28      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
29      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
30      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
31      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
32      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
33      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
34      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
35      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
36      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
37      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
38      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
39      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
40      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
41      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
42      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
43      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
44      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
45      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
46      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
47      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
48      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
49      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
50      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
51      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
52      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
53      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
54      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
55      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
56      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
57      -o-radial-gradient(right bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
58      -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
59  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
60      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
61      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
62      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
63      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
64      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
65      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
66      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
67      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
68      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
69      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
70      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
71      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
72      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
73      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
74      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
75      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
76      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
77      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
78      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
79      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
80      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
81      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
82      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
83      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
84      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
85      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
86      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
87      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
88      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
89      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
90      radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
91      radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
92  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
93  background-position: 8px -6px, 8px 125px, 198px 3px, 198px 20px, 198px 37px, 198px 54px, 198px 71px, 198px 88px, 198px 105px, 235px 15px, 235px 20px, 235px 27px, 235px 31px, 235px 39px, 235px 43px, 235px 50px, 235px 54px, 235px 58px, 235px 65px, 235px 69px, 235px 76px, 235px 80px, 235px 87px, 235px 91px, 235px 95px, 235px 103px, 235px 106px, 50px -90px, 50px 90px, 200px, -200px, 0, 0;
94  background-repeat: no-repeat;
95  -webkit-backface-visibility: hidden;
96  backface-visibility: hidden;
97  -webkit-transition: .8s;
98  -o-transition: .8s;
99  transition: .8s;
100  -webkit-transform-style: preserve-3d;
101  transform-style: preserve-3d;
102}
103
104.one-div::after {
105  content: "This golden ticket\A ensures admittance";
106  white-space: pre;
107  color: transparent;
108  text-shadow: 55px 0 #2E2205;
109  font-family: "Anton", Impact, sans-serif;
110  text-align: center;
111  font-size: 14px;
112  display: -webkit-box;
113  display: -ms-flexbox;
114  display: flex;
115  -webkit-box-align: center;
116  -ms-flex-align: center;
117  align-items: center;
118  -webkit-box-pack: center;
119  -ms-flex-pack: center;
120  justify-content: center;
121  position: absolute;
122  inset: 0;
123  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
124      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
125      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
126      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
127      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
128      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
129      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
130      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
131      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
132      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
133      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
134      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
135      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
136      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
137      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
138      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
139      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
140      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
141      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
142      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
143      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
144      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
145      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
146      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
147      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
148      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
149      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
150      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
151      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
152      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
153      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
154      -o-radial-gradient(left bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
155      -o-radial-gradient(right top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
156  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
157      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
158      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
159      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
160      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
161      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
162      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
163      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
164      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
165      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
166      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
167      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
168      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
169      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
170      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
171      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
172      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
173      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
174      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
175      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
176      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
177      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
178      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
179      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
180      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
181      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
182      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
183      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
184      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
185      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
186      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
187      radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
188      radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
189  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
190  background-position: 126px -6px, 126px 125px, 98px 3px, 98px 20px, 98px 37px, 98px 54px, 98px 71px, 98px 88px, 98px 105px, 20px 15px, 20px 20px, 20px 27px, 20px 31px, 20px 39px, 20px 43px, 20px 50px, 20px 54px, 20px 58px, 20px 65px, 20px 69px, 20px 76px, 20px 80px, 20px 87px, 20px 91px, 20px 95px, 20px 103px, 20px 106px, -50px -90px, -50px 90px, 200px, -200px, 0, 0;
191  background-repeat: no-repeat;
192  -webkit-backface-visibility: hidden;
193  backface-visibility: hidden;
194  -webkit-transition: .8s;
195  -o-transition: .8s;
196  transition: .8s;
197  -webkit-transform: rotateY(180deg);
198  transform: rotateY(180deg);
199  -webkit-transform-style: preserve-3d;
200  transform-style: preserve-3d;
201}
202
203.one-div:hover::before {
204  -webkit-transform: rotateY(180deg);
205  transform: rotateY(180deg);
206}
207
208.one-div:hover::after {
209  -webkit-transform: rotateY(0);
210  transform: rotateY(0);
211}

.one-div {
  --circle-color: #212121;
  width: 300px;
  height: 150px;
  position: relative;
}

.one-div::before {
  content: "Golden Ticket";
  color: transparent;
  text-shadow: -55px 0 #2E2205;
  text-transform: uppercase;
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(right bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
  background-position: 8px -6px, 8px 125px, 198px 3px, 198px 20px, 198px 37px, 198px 54px, 198px 71px, 198px 88px, 198px 105px, 235px 15px, 235px 20px, 235px 27px, 235px 31px, 235px 39px, 235px 43px, 235px 50px, 235px 54px, 235px 58px, 235px 65px, 235px 69px, 235px 76px, 235px 80px, 235px 87px, 235px 91px, 235px 95px, 235px 103px, 235px 106px, 50px -90px, 50px 90px, 200px, -200px, 0, 0;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.one-div::after {
  content: "This golden ticket\A ensures admittance";
  white-space: pre;
  color: transparent;
  text-shadow: 55px 0 #2E2205;
  font-family: "Anton", Impact, sans-serif;
  text-align: center;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-image: -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      -o-radial-gradient(left bottom, ellipse farthest-corner, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      -o-radial-gradient(right top, ellipse farthest-corner, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-image: linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 27px, transparent 27px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 18px, transparent 18px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 20px, transparent 20px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      linear-gradient(transparent, transparent 15px, #2E2205 15px, #2E2205 17px, transparent 17px),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 15%, transparent 15.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(circle, var(--circle-color) 35%, transparent 35.5%),
      radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
      radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 55%, 55%, 1%, 1%, 1%, 1%, 1%, 1%, 1%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 15%, 100%, 100%, 100%, 100%, 100%, 100%;
  background-position: 126px -6px, 126px 125px, 98px 3px, 98px 20px, 98px 37px, 98px 54px, 98px 71px, 98px 88px, 98px 105px, 20px 15px, 20px 20px, 20px 27px, 20px 31px, 20px 39px, 20px 43px, 20px 50px, 20px 54px, 20px 58px, 20px 65px, 20px 69px, 20px 76px, 20px 80px, 20px 87px, 20px 91px, 20px 95px, 20px 103px, 20px 106px, -50px -90px, -50px 90px, 200px, -200px, 0, 0;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.one-div:hover::before {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.one-div:hover::after {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

Toggle prefixes

759 views

Comments

No variations yet

MIT License

Copyright - 2023 Galahhad (Galahad) 

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.