Not bad! It would take some extra work, but might be cool to allow backspace but force the user to type over what they've already typed.
Yeah, the obvious way would be to draw the text on a canvas, but you wouldn't get sharp text then.
I could nest a span with a negative translate or negative margin to overlap. It could be worth it to print each letter in a css grid (which would work since all the text is monospace) making it super easy to overlap text.
There may be a more hacky/elegant solution which would be to use weird unicode to overlap characters, but I'm not sure how feasible it would be.
Bad UI Battles
E̖̰͚̠̟̗ͨͫ̚͠͡r̶̢͕̠̹̙̞̯̠̄̏̐̈́ͦͫ͛̿ͨr̴̞̪̦̖̊̄̈́̐o̘͛͐͒ͬ́͜ŗ̶̲̥̣̟̠̭̫̯ͪ̏͒̀ ̷̜̻̝ͦ̀̾̏͢͞ļ͈̺̟̹͔̔̄̊̓͐͟o̶̷̶͕͎̲̙͆͐́̓̃a̛͇̼ͥ͂ͬ͐ͦ͒̽͜ḑ̔͂̊͛͗̓͏̞̤̮̦i̴̞̬͍͔̖̝͓͆ͣ͢ņ̵̮̄́ǧ͎̈̂̓̍̇̽̇̕͡ ̧̗̻̙̣̤̖͑ͬ̓̊ͪ̋ͭs̵̥̯͇͔̦̞̖̘̓͒̆͑͘͟ì҉̛̼̖̭d̷̝͓̟̗̽ͦe̶̸̼̻̲̘ͩ͌́́ͬ͡ͅb̡͓̗̫̫̔̑ͥͤͫ̏̇̿͜a̴̶̾̓͛͏̻̲̠̤͍ȓ̡̟̲̼̱͓̀̐̈ͥͣ͜͞
For intentionally bad and silly user interfaces.
What do I submit?
- A video, gif, or link of your UI in action
Can I share the UI/source code in the comments?
- Yes, please do. It's fun to play with your projects.
- Please leave the source code as a git service (or similar service) link
RULES
-
Be kind. We're here to have fun
-
No racism, sexism, or other kind of discrimination will be tolerated.
-
All posts must be a video/gif submission for an intentionally bad UI design or a request for an intentionally bad UI
Icon base by Skoll under CC BY 3.0 with modifications to add a gradient