Input by MijailVillegas

1/*The eye icon on the password can be stylize with any tool you want
2to use (the only way i know to do this correctly is using JS)
3this is meant to be wide supported and it really depends on you browsers
4if i realize any way to stylize the eye it could be added in the future
5in other input type*/
6
7.container {
8  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9  font-style: italic;
10  font-weight: bold;
11  display: flex;
12  margin: auto;
13  aspect-ratio: 16/9;
14  align-items: center;
15  justify-items: center;
16  justify-content: center;
17  flex-wrap: nowrap;
18  flex-direction: column;
19  gap: 1em;
20}
21
22.input-container {
23  filter: drop-shadow(46px 36px 24px #4090b5)
24    drop-shadow(-55px -40px 25px #9e30a9);
25  animation: blinkShadowsFilter 8s ease-in infinite;
26}
27
28.input-content {
29  display: grid;
30  align-content: center;
31  justify-items: center;
32  align-items: center;
33  text-align: center;
34  padding-inline: 1em;
35}
36
37.input-content::before {
38  content: "";
39  position: absolute;
40  width: 100%;
41  height: 100%;
42  filter: blur(40px);
43  -webkit-clip-path: polygon(
44    26% 0,
45    66% 0,
46    92% 0,
47    100% 8%,
48    100% 89%,
49    91% 100%,
50    7% 100%,
51    0 92%,
52    0 0
53  );
54  clip-path: polygon(
55    26% 0,
56    66% 0,
57    92% 0,
58    100% 8%,
59    100% 89%,
60    91% 100%,
61    7% 100%,
62    0 92%,
63    0 0
64  );
65  background: rgba(122, 251, 255, 0.5568627451);
66  transition: all 1s ease-in-out;
67}
68
69.input-content::after {
70  content: "";
71  position: absolute;
72  width: 98%;
73  height: 98%;
74  box-shadow: inset 0px 0px 20px 20px #212121;
75  background: repeating-linear-gradient(
76      to bottom,
77      transparent 0%,
78      rgba(64, 144, 181, 0.6) 1px,
79      rgb(0, 0, 0) 3px,
80      hsl(295, 60%, 12%) 5px,
81      #153544 4px,
82      transparent 0.5%
83    ),
84    repeating-linear-gradient(
85      to left,
86      hsl(295, 60%, 12%) 100%,
87      hsla(295, 60%, 12%, 0.99) 100%
88    );
89  -webkit-clip-path: polygon(
90    26% 0,
91    31% 5%,
92    61% 5%,
93    66% 0,
94    92% 0,
95    100% 8%,
96    100% 89%,
97    91% 100%,
98    7% 100%,
99    0 92%,
100    0 0
101  );
102  clip-path: polygon(
103    26% 0,
104    31% 5%,
105    61% 5%,
106    66% 0,
107    92% 0,
108    100% 8%,
109    100% 89%,
110    91% 100%,
111    7% 100%,
112    0 92%,
113    0 0
114  );
115  animation: backglitch 50ms linear infinite;
116}
117
118.input-dist {
119  z-index: 80;
120  display: grid;
121  align-items: center;
122  text-align: center;
123  width: 100%;
124  padding-inline: 1em;
125  padding-block: 1.2em;
126  grid-template-columns: 1fr;
127}
128
129.input-type {
130  display: flex;
131  flex-wrap: wrap;
132  flex-direction: column;
133  gap: 1em;
134  font-size: 1.1rem;
135  background-color: transparent;
136  width: 100%;
137  border: none;
138}
139
140.input-is {
141  color: #fff;
142  font-size: 0.9rem;
143  background-color: transparent;
144  width: 100%;
145  box-sizing: border-box;
146  padding-inline: 0.5em;
147  padding-block: 0.7em;
148  border: none;
149  transition: all 1s ease-in-out;
150  border-bottom: 1px solid hsl(221, 26%, 43%);
151}
152
153.input-is:hover {
154  transition: all 1s ease-in-out;
155  background: linear-gradient(
156    90deg,
157    transparent 0%,
158    rgba(102, 224, 255, 0.2) 27%,
159    rgba(102, 224, 255, 0.2) 63%,
160    transparent 100%
161  );
162}
163
164.input-content:focus-within::before {
165  transition: all 1s ease-in-out;
166  background: hsla(0, 0%, 100%, 0.814);
167}
168
169.input-is:focus {
170  outline: none;
171  border-bottom: 1px solid hsl(192, 100%, 100%);
172  color: hsl(192, 100%, 88%);
173  background: linear-gradient(
174    90deg,
175    transparent 0%,
176    rgba(102, 224, 255, 0.2) 27%,
177    rgba(102, 224, 255, 0.2) 63%,
178    transparent 100%
179  );
180}
181
182.input-is::-moz-placeholder {
183  color: hsla(192, 100%, 88%, 0.806);
184}
185
186.input-is::placeholder {
187  color: hsla(192, 100%, 88%, 0.806);
188}
189
190.submit-button {
191  width: 50%;
192  border: none;
193  color: hsla(192, 100%, 88%, 0.806);
194  background: linear-gradient(
195    90deg,
196    transparent 0%,
197    rgba(102, 224, 255, 0.2) 27%,
198    rgba(102, 224, 255, 0.2) 63%,
199    transparent 100%
200  );
201  clip-path: polygon(0 0, 85% 0%, 100% 0, 100% 15%, 100% 90%, 91% 100%, 0 100%);
202  padding: 0.5em;
203  animation: blinkShadowsFilter 0.5s ease-in infinite;
204  transition: all 500ms;
205}
206
207.submit-button:hover {
208  color: hsl(0, 0%, 100%);
209  cursor: pointer;
210  font-size: medium;
211  font-weight: bold;
212}
213
214@keyframes backglitch {
215  0% {
216    box-shadow: inset 0px 20px 20px 30px #212121;
217  }
218
219  50% {
220    box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);
221  }
222
223  to {
224    box-shadow: inset 0px 20px 20px 30px #212121;
225  }
226}
227
228@keyframes rotate {
229  0% {
230    transform: rotate(0deg) translate(-50%, 20%);
231  }
232
233  50% {
234    transform: rotate(180deg) translate(40%, 10%);
235  }
236
237  to {
238    transform: rotate(360deg) translate(-50%, 20%);
239  }
240}
241
242@keyframes blinkShadowsFilter {
243  0% {
244    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
245      drop-shadow(-55px -40px 28px #9e30a9);
246  }
247
248  25% {
249    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))
250      drop-shadow(-55px 40px 24px #9e30a9);
251  }
252
253  50% {
254    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))
255      drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
256  }
257
258  75% {
259    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))
260      drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
261  }
262
263  to {
264    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
265      drop-shadow(-55px -40px 28px #9e30a9);
266  }
267}
268