Input by InfinityLoopGames

#212121

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

/*The eye icon on the password can be stylize with any tool you want
to use (the only way i know to do this correctly is using JS)
this is meant to be wide supported and it really depends on you browsers
if i realize any way to stylize the eye it could be added in the future
in other input type*/

.submit {
  color: #9fc4d0;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin: 10px 0 0;
}

.submit::before {
  margin-left: auto;
}

.submit::after,
.submit::before {
  content: "";
  width: 0%;
  height: 2px;
  background: #06aed8;
  display: block;
  transition: 0.5s;
}

.submit:hover::after,
.submit:hover::before {
  width: 100%;
}

.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  display: flex;
  margin: auto;
  aspect-ratio: 16/9;
  align-items: center;
  justify-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1em;
}

.input-container {
  filter: drop-shadow(46px 36px 24px #4090b5)
    drop-shadow(-55px -40px 25px #9e30a9);
  animation: blinkShadowsFilter 8s ease-in infinite;
}

.input-content {
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding-inline: 1em;
}

.input-content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(40px);
  -webkit-clip-path: polygon(
    26% 0,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  clip-path: polygon(
    26% 0,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  background: rgba(122, 251, 255, 0.5568627451);
  transition: all 1s ease-in-out;
}

.input-content::after {
  content: "";
  position: absolute;
  width: 98%;
  height: 98%;
  box-shadow: inset 0px 0px 20px 20px #212121;
  background: repeating-linear-gradient(
      to bottom,
      transparent 0%,
      rgba(64, 144, 181, 0.6) 1px,
      rgb(0, 0, 0) 3px,
      hsl(295, 60%, 12%) 5px,
      #153544 4px,
      transparent 0.5%
    ),
    repeating-linear-gradient(
      to left,
      hsl(295, 60%, 12%) 100%,
      hsla(295, 60%, 12%, 0.99) 100%
    );
  -webkit-clip-path: polygon(
    26% 0,
    31% 5%,
    61% 5%,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  clip-path: polygon(
    26% 0,
    31% 5%,
    61% 5%,
    66% 0,
    92% 0,
    100% 8%,
    100% 89%,
    91% 100%,
    7% 100%,
    0 92%,
    0 0
  );
  animation: backglitch 50ms linear infinite;
}

.input-dist {
  z-index: 80;
  display: grid;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: 1em;
  padding-block: 1.2em;
  grid-template-columns: 1fr;
}

.input-type {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1em;
  font-size: 1.1rem;
  background-color: transparent;
  width: 100%;
  border: none;
}

.input-is {
  color: #fff;
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
  transition: all 1s ease-in-out;
  border-bottom: 1px solid hsl(221, 26%, 43%);
}

.input-is:hover {
  transition: all 1s ease-in-out;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 224, 255, 0.2) 27%,
    rgba(102, 224, 255, 0.2) 63%,
    transparent 100%
  );
}

.input-content:focus-within::before {
  transition: all 1s ease-in-out;
  background: hsla(0, 0%, 100%, 0.814);
}

.input-is:focus {
  outline: none;
  border-bottom: 1px solid hsl(192, 100%, 100%);
  color: hsl(192, 100%, 88%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 224, 255, 0.2) 27%,
    rgba(102, 224, 255, 0.2) 63%,
    transparent 100%
  );
}

.input-is::-moz-placeholder {
  color: hsla(192, 100%, 88%, 0.806);
}

.input-is::placeholder {
  color: hsla(192, 100%, 88%, 0.806);
}

@keyframes backglitch {
  0% {
    box-shadow: inset 0px 20px 20px 30px #212121;
  }

  50% {
    box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);
  }

  to {
    box-shadow: inset 0px 20px 20px 30px #212121;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate(-50%, 20%);
  }

  50% {
    transform: rotate(180deg) translate(40%, 10%);
  }

  to {
    transform: rotate(360deg) translate(-50%, 20%);
  }
}

@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }

  25% {
    filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 24px #9e30a9);
  }

  50% {
    filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
  }

  75% {
    filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))
      drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
  }

  to {
    filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))
      drop-shadow(-55px -40px 28px #9e30a9);
  }
}

Toggle prefixes

750 views

Variation of ainput

Copy to Figma

750 views

Variation of ainput

Comments

MIT License

Copyright - 2024 MijailVillegas  
Copyright - 2024 InfinityLoopGames (InfinityLoop) 

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.