Form by roroland made with CSS

#e8e8e8

1/* Initial form state */
2.form {
3  --col1: #fff;
4  --col2: #252325;
5  --col3: rgba(232, 213, 196, 0.9);
6  --col4: #ffffff;
7  --col5: #683363;
8  --sh: rgba(80, 80, 80, 0.35);
9  --rad: 4px;
10  --radBig: 10px;
11  border-radius: 0 0 var(--radBig) var(--radBig);
12  box-shadow: 0 0 20px var(--sh);
13  display: flex;
14  flex-direction: column;
15  gap: 1.5em 1em;
16  padding: 1em;
17  position: relative;
18  max-width: 75%;
19  max-height: 90px;
20  transition: background .3s ease-out, max-height .3s ease-out;
21  overflow: hidden;
22}
23
24.form::before {
25  content: 'Ready to purchase?';
26  color: var(--col2);
27  font-size: 1.2em;
28  font-weight: 700;
29  display: grid;
30  width: calc(100% - 2em);
31  height: 60%;
32  position: absolute;
33  place-items: center;
34  z-index: 99999;
35}
36
37.form::after {
38  content: '';
39  backdrop-filter: blur(6px) grayscale(100%);
40  background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0.3) 90%);
41  height: 100%;
42  width: 100%;
43  left: 0;
44  top: 0;
45  display: block;
46  position: absolute;
47  z-index: 999;
48}
49
50.form::after,
51.form::before {
52  border-radius: 0 0 var(--radBig) var(--radBig);
53  pointer-events: none;
54  transition: all .5s ease-out;
55}
56
57/* Form hover and focus */
58.form:hover,
59.form:focus-within {
60  max-width: 100%;
61  max-height: 380px;
62}
63
64.form:focus-within {
65  overflow: initial;
66}
67
68.form:hover::before,
69.form:hover::after {
70  opacity: 0;
71}
72
73.form:hover::after {
74  backdrop-filter: blur(0) grayscale(0%);
75}
76
77.form header {
78  color: var(--col1);
79  font-size: 1.25rem;
80  font-weight: 600;
81}
82/* Labels and inputs UI */
83:is(.form) label span, label input {
84  flex: 1 100%;
85  transition: all .3s ease-out;
86}
87
88:is(.form) input, select, button {
89  appearance: none;
90  border: 0;
91  padding: .75em;
92  border-radius: var(--rad);
93  transition: all .3s ease-out;
94}
95
96.form label {
97  display: flex;
98  flex-flow: row wrap;
99  color: var(--col4);
100  gap: .5em;
101}
102
103.form input {
104  box-shadow: inset 3px 3px 1px var(--sh);
105}
106
107.form fieldset {
108  display: flex;
109  backdrop-filter: blur(10px);
110  flex-flow: row nowrap;
111  gap: 1em;
112  position: relative;
113  transition: all .3s ease-out;
114  padding: 1rem;
115  z-index: 10;
116  border: 3px double var(--col1);
117  border-radius: var(--rad);
118}
119
120.form fieldset label {
121  flex: 1;
122  display: flex;
123  flex-flow: row wrap;
124  font-size: .75em;
125}
126
127.sm {
128  justify-content: space-around;
129}
130
131.sm span {
132  text-align: center;
133}
134
135.form select {
136  box-shadow: inset 3px 3px 1px var(--sh);
137  padding: .75em 1.75em .75em 0.5em;
138  position: relative;
139}
140
141.custom-select {
142  position: relative;
143}
144
145.custom-select::after {
146  position: absolute;
147  content: "";
148  top: 45%;
149  right: 5px;
150  width: 0;
151  height: 0;
152  border: 6px solid transparent;
153  border-color: var(--col5) transparent transparent transparent;
154}
155
156.form fieldset span {
157  flex: 1 100%;
158}
159
160.form fieldset input {
161  flex: 0 1 40px;
162}
163
164.form button {
165  background-color: var(--col1);
166  color: var(--col4);
167  border: 2px solid var(--col4);
168  font-size: 1em;
169  font-weight: 700;
170  align-self: center;
171  padding: .5em 1.5em;
172  appearance: none;
173}
174
175/* Form and UI valid and invalid states */
176.form input:focus,
177.form select:focus {
178  outline: 3px solid var(--col3);
179  outline-offset: 1px;
180}
181
182.form input:invalid:not(:focus),
183.form select:invalid:not(:focus) {
184  background-color: var(--col3);
185  outline: 3px solid var(--col4);
186  outline-offset: 1px;
187}
188
189.form input:valid:not(:focus),
190.form select:valid:not(:focus) {
191  outline: 3px solid var(--col1);
192  outline-offset: 1px;
193}
194
195.form .message {
196  display: block;
197  opacity: 0;
198  font-size: .75em;
199  font-weight: 400;
200  transition: all .3s ease-out;
201  margin: -1rem 0 0;
202}
203
204.form:has(:invalid) .message {
205  opacity: 1;
206  margin: .25rem 0 0 0;
207}
208
209label:has(input:invalid),
210label:has(select:invalid) {
211  color: var(--col3);
212  opacity: .8;
213}
214
215label:has(input:valid),
216label:has(select:valid) {
217  opacity: 1;
218}
219
220.form:hover:has(:focus, :active):valid .submitCard {
221  max-height: 180px;
222  opacity: 1;
223  transition: opacity 1s ease-out .5s, translate 1.3s ease-out;
224  translate: 0 100%;
225}
226
227.form:hover:invalid {
228  transition: all .3s ease-out;
229  background-color: var(--col5);
230}
231
232.form:hover:valid {
233  transition: all .3s ease-out;
234  background-color: var(--col1);
235}
236
237.form:hover:valid * {
238  color: var(--col2);
239}
240
241.form:hover:valid input,
242.form:hover:valid select {
243  outline: 3px solid var(--col2);
244}
245
246.form:hover:invalid fieldset {
247  border: 1px dashed var(--col3);
248}
249
250.form:hover:valid fieldset {
251  border: 1px dashed var(--col2);
252}
253
254/* Submit block */
255.form .submitCard {
256  display: flex;
257  justify-content: center;
258  background-color: var(--col2);
259  border-radius: 0 0 var(--rad) var(--rad);
260  bottom: 0;
261  padding: .5em;
262  opacity: 0;
263  max-height: 0;
264  translate: 0 -100%;
265  position: absolute;
266  width: calc(100% - 2em);
267  transition: all .5s ease-out .1s;
268  z-index: -1;
269}

/* Initial form state */
.form {
  --col1: #fff;
  --col2: #252325;
  --col3: rgba(232, 213, 196, 0.9);
  --col4: #ffffff;
  --col5: #683363;
  --sh: rgba(80, 80, 80, 0.35);
  --rad: 4px;
  --radBig: 10px;
  border-radius: 0 0 var(--radBig) var(--radBig);
  box-shadow: 0 0 20px var(--sh);
  display: flex;
  flex-direction: column;
  gap: 1.5em 1em;
  padding: 1em;
  position: relative;
  max-width: 75%;
  max-height: 90px;
  transition: background .3s ease-out, max-height .3s ease-out;
  overflow: hidden;
}

.form::before {
  content: 'Ready to purchase?';
  color: var(--col2);
  font-size: 1.2em;
  font-weight: 700;
  display: grid;
  width: calc(100% - 2em);
  height: 60%;
  position: absolute;
  place-items: center;
  z-index: 99999;
}

.form::after {
  content: '';
  backdrop-filter: blur(6px) grayscale(100%);
  background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0.3) 90%);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  z-index: 999;
}

.form::after,
.form::before {
  border-radius: 0 0 var(--radBig) var(--radBig);
  pointer-events: none;
  transition: all .5s ease-out;
}

/* Form hover and focus */
.form:hover,
.form:focus-within {
  max-width: 100%;
  max-height: 380px;
}

.form:focus-within {
  overflow: initial;
}

.form:hover::before,
.form:hover::after {
  opacity: 0;
}

.form:hover::after {
  backdrop-filter: blur(0) grayscale(0%);
}

.form header {
  color: var(--col1);
  font-size: 1.25rem;
  font-weight: 600;
}
/* Labels and inputs UI */
:is(.form) label span, label input {
  flex: 1 100%;
  transition: all .3s ease-out;
}

:is(.form) input, select, button {
  appearance: none;
  border: 0;
  padding: .75em;
  border-radius: var(--rad);
  transition: all .3s ease-out;
}

.form label {
  display: flex;
  flex-flow: row wrap;
  color: var(--col4);
  gap: .5em;
}

.form input {
  box-shadow: inset 3px 3px 1px var(--sh);
}

.form fieldset {
  display: flex;
  backdrop-filter: blur(10px);
  flex-flow: row nowrap;
  gap: 1em;
  position: relative;
  transition: all .3s ease-out;
  padding: 1rem;
  z-index: 10;
  border: 3px double var(--col1);
  border-radius: var(--rad);
}

.form fieldset label {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  font-size: .75em;
}

.sm {
  justify-content: space-around;
}

.sm span {
  text-align: center;
}

.form select {
  box-shadow: inset 3px 3px 1px var(--sh);
  padding: .75em 1.75em .75em 0.5em;
  position: relative;
}

.custom-select {
  position: relative;
}

.custom-select::after {
  position: absolute;
  content: "";
  top: 45%;
  right: 5px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--col5) transparent transparent transparent;
}

.form fieldset span {
  flex: 1 100%;
}

.form fieldset input {
  flex: 0 1 40px;
}

.form button {
  background-color: var(--col1);
  color: var(--col4);
  border: 2px solid var(--col4);
  font-size: 1em;
  font-weight: 700;
  align-self: center;
  padding: .5em 1.5em;
  appearance: none;
}

/* Form and UI valid and invalid states */
.form input:focus,
.form select:focus {
  outline: 3px solid var(--col3);
  outline-offset: 1px;
}

.form input:invalid:not(:focus),
.form select:invalid:not(:focus) {
  background-color: var(--col3);
  outline: 3px solid var(--col4);
  outline-offset: 1px;
}

.form input:valid:not(:focus),
.form select:valid:not(:focus) {
  outline: 3px solid var(--col1);
  outline-offset: 1px;
}

.form .message {
  display: block;
  opacity: 0;
  font-size: .75em;
  font-weight: 400;
  transition: all .3s ease-out;
  margin: -1rem 0 0;
}

.form:has(:invalid) .message {
  opacity: 1;
  margin: .25rem 0 0 0;
}

label:has(input:invalid),
label:has(select:invalid) {
  color: var(--col3);
  opacity: .8;
}

label:has(input:valid),
label:has(select:valid) {
  opacity: 1;
}

.form:hover:has(:focus, :active):valid .submitCard {
  max-height: 180px;
  opacity: 1;
  transition: opacity 1s ease-out .5s, translate 1.3s ease-out;
  translate: 0 100%;
}

.form:hover:invalid {
  transition: all .3s ease-out;
  background-color: var(--col5);
}

.form:hover:valid {
  transition: all .3s ease-out;
  background-color: var(--col1);
}

.form:hover:valid * {
  color: var(--col2);
}

.form:hover:valid input,
.form:hover:valid select {
  outline: 3px solid var(--col2);
}

.form:hover:invalid fieldset {
  border: 1px dashed var(--col3);
}

.form:hover:valid fieldset {
  border: 1px dashed var(--col2);
}

/* Submit block */
.form .submitCard {
  display: flex;
  justify-content: center;
  background-color: var(--col2);
  border-radius: 0 0 var(--rad) var(--rad);
  bottom: 0;
  padding: .5em;
  opacity: 0;
  max-height: 0;
  translate: 0 -100%;
  position: absolute;
  width: calc(100% - 2em);
  transition: all .5s ease-out .1s;
  z-index: -1;
}

Toggle prefixes

2K views

Comments

No variations yet

MIT License

Copyright - 2023 roroland (Ronoales) 

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.