this post was submitted on 21 Jun 2023
18 points (100.0% liked)

Bad UI Battles

1075 readers
1 users here now

E̖̰͚̠̟̗ͨͫ̚͠͡r̶̢͕̠̹̙̞̯̠̄̏̐̈́ͦͫ͛̿ͨr̴̞̪̦̖̊̄̈́̐o̘͛͐͒ͬ́͜ŗ̶̲̥̣̟̠̭̫̯ͪ̏͒̀ ̷̜̻̝ͦ̀̾̏͢͞ļ͈̺̟̹͔̔̄̊̓͐͟o̶̷̶͕͎̲̙͆͐́̓̃a̛͇̼ͥ͂ͬ͐ͦ͒̽͜ḑ̔͂̊͛͗̓͏̞̤̮̦i̴̞̬͍͔̖̝͓͆ͣ͢ņ̵̮̄́ǧ͎̈̂̓̍̇̽̇̕͡ ̧̗̻̙̣̤̖͑ͬ̓̊ͪ̋ͭs̵̥̯͇͔̦̞̖̘̓͒̆͑͘͟ì҉̛̼̖̭d̷̝͓̟̗̽ͦe̶̸̼̻̲̘ͩ͌́́ͬ͡ͅb̡͓̗̫̫̔̑ͥͤͫ̏̇̿͜a̴̶̾̓͛͏̻̲̠̤͍ȓ̡̟̲̼̱͓̀̐̈ͥͣ͜͞

For intentionally bad and silly user interfaces.

Discord

What do I submit?

Can I share the UI/source code in the comments?

RULES

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[–] spartanatreyu 2 points 1 year ago* (last edited 1 year ago)

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.