Paper Form

 

★ Experimental CSS-Only paper form

This was a fun excersize on trying to make more animations with only CSS (a recent trend among web designers). I was inspired by a real paper form I was filling out which was printed on recycled paper. I liked the way the texture interacted with the colors, so I replicated it here.

The design is completely different, obviously. I wanted to have the unfilled/invalid on the left, and the filled/valid fields move to the right when completed. I think it adds a unique change to the way most forms are done, and it takes advantage of the blank space usually present in forms like these without compromising the white space feel.

See the Pen Dynamic Paper Form (CSS Only) by PJ Mullen (@tectix) on CodePen.

Experimental, WebPJMComment