Input by OmarN6

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

/*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*/
#SubscribeTXT {
  font-size: 20px;
  color: #9fc4d0;
}

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

button::before {
  margin-left: auto;
}

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

button:hover::after, button: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

1.4K views

Variation of ainput

Copy to Figma

1.4K views

Variation of ainput

Comments

MIT License

Copyright - 2024 MijailVillegas  
Copyright - 2024 OmarN6 (Unknown) 

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.