5 ms·

Drunk CSS

97 points by FromTheArchives 1y ago

NSPG911 1y ago
now that i got to experience being drunk, id rather not, thanks
- throwaway127482 1y ago
  It's really nothing like being drunk, not to say that you should try it though.
marcelr 1y ago
i have been drunk, this is not it
- crummy 1y ago
  yeah but reading this is difficult and annoying, which reminds me of squinting at my blurry phone trying to read it while drunk
kelnos 1y ago
This is not what things look like when you are drunk. (Source: have been drunk many times, and used a computer.)
- SchemaLoad 1y ago
  I'm not sure it would even be possible to replicate with visual tricks since it's more your thinking which is altered, and not just vision.
- transitorykris 1y ago
  It was, you just covered one eye!
culi 1y ago
The theme switcher in general is really cool. Especially being able to see and compare the "nude" version. It's like a modern day CSS Zen Garden https://csszengarden.com/ https://csszengarden.com/
- stevage 1y ago
  Except that on mobile it's very not obvious how to access the themes other than dark and light, including drunk.
  - edent 1y ago
    That's true. I did have it as a grid originally, but it pushed the content too far down. Happy to take suggestions on how to make it more obvious.
    - svat 1y ago
      Having the horizontal scroll bar always visible and with good contrast may help (right now it auto-hides for me, Chrome on Android). Though in the initial position it may still not be obvious that it's a scroll bar...
- bobbinson 1y ago
  I was excited for zen garden but didn’t see anything there that stood out as I was expecting more of a focus on the design rather than the css purist lens. There are some amazing things that can be done purely through css, https://a.singlediv.com/2014-2019/ https://a.singlediv.com/2014-2019/ comes to mind.
  - culi 1y ago
    Not sure what the accessibility implications of (abusing?) html/css in this way are. Perhaps wrapping adding aria-role=figure would alleviate my concerns
lelandfe 1y ago
Relevantly: https://theuserisdrunk.com/ https://theuserisdrunk.com/
- Rendello 1y ago
  > Your website should be so simple, a drunk person could use it. I remember the first time I read this post, the message really stuck with me. "The user is drunk" is a brilliant line. That being said, I don't think every website or tool needs to aim for the lowest common denominator.
  - aidenn0 1y ago
    > That being said, I don't think every website or tool needs to aim for the lowest common denominator. Any application that will be used occasionally with the goal of not using it as quickly as possible should work this way. A counterexample would be e.g. retail POS software, which should be optimized for minimum work and maximum responsiveness for trained users.
    - whilenot-dev 1y ago
      Huh? "The user is drunk" as a rule is great, there's no need to redefine it. Especially for POS interfaces! You'd want them as intuitive as it gets, because their users can be under a lot of stress, and could, in fact, be drunk. I understand GP's "I don't think every website or tool needs to aim for the lowest common denominator" in two ways: 1. This rule isn't an excuse to stop raising the bar when it comes to interaction design ("drunk people won't notice the difference anyway"). 2. Some machines should only be operated when absolutely sober and the interface should reflect that requirement ("don't drink and drive!").
      - aidenn0 1y ago
        Maybe things have changed in the past two decades, but I definitely would have been fired from my retail job if I showed up drunk. The POS interface there was super non-intuitive, but very efficient. This was 20 years ago so the classic text-mode interface with F1-F12 keys assigned to different functions.
aidenn0 1y ago
Does "cursive font" do anything useful on windows or popular linux distributions? I haven't used either of those for about 20 years. I know on Macs a decade ago, it used to display the lovely Zapfino font, but on Windows XP SP2, I seem to recall it falling back to something like Arial.
- Hackbraten 1y ago
  Anecdata: I have `urw-base35-fonts` [0] installed (as a system package called gsfonts, which was pulled in as a dependency for GNOME Document Viewer). The gsfonts package comes with a fontconfig file that automatically aliases `cursive` to the Z003 font, which is also what the browser shows me. [0]: https://github.com/ArtifexSoftware/urw-base35-fonts https://github.com/ArtifexSoftware/urw-base35-fonts
  - aidenn0 1y ago
    I don't have those installed; for me: $ fc-match cursive NotoSans[wdth,wght].ttf: "Noto Sans" "Regular" Also I believe that Firefox doesn't use the same font resolution as fontconfig. I certainly remember it doing some very baroque unicode fallback as compared to other programs.
    - Hackbraten 1y ago
      I specifically remember writing fontconfig overrides after I felt dissatisfied with some aspect of font rendering in the browser, mostly when it failed to pick up a FOSS drop-in replacement, e.g. Jost* for Futura. My experience is that Firefox picked up every change to `~/.config/fontconfig/fonts.conf` so far, immediately after I ran `fc-cache -f` and then restarted the browser.
rbits 1y ago
On mobile everything being slanted pushes some text offscreen so I can't read it
- type0 1y ago
  > so I can't read it exactly how it becomes when sufficiently drunk
dalmo3 1y ago
The irony is that, at least on mobile, you have to be sober to even find the Drunk button.
- 0xfffafaCrash 1y ago
  thats a feautre! prevnets the pregmaing drunsk from getitng double drukn or having the drunknness cancle out or watever
asadm 1y ago
https://web.archive.org/web/20250927161012/https://shkspr.mobi/blog/2025/09/drunk-css/ https://web.archive.org/web/20250927161012/https://shkspr.mo...
vunderba 1y ago
Related but I wrote a Tampermonkey/Greasemonkey extension script [1] that when activated randomly rotated all the letters on a website from between -25 to +25 degrees as a part of my experiments around forcing more active "visual engagement" when reading to see if it made a measurable difference for recall. [1] https://greasyfork.org/en/scripts/551208-rotate-letters-script https://greasyfork.org/en/scripts/551208-rotate-letters-scri...
AfterHIA 1y ago
Dude I'm fucked as shit (but not, "I can't think anymore fricked") and your shit satisfies thoroughly. Have a link because my eloquence has left me: https://www.youtube.com/watch?v=-Dc6Pre77AY https://www.youtube.com/watch?v=-Dc6Pre77AY
nilslindemann 1y ago
How about, the reader is old and computer illiterate. Being drunk is not needed. For example, here on this site, there is this unused space left and right. I meanwhile scale all websites with such unused space, using Ctrl+`+` to get the font bigger without losing functionality. But this site has an attribute `width=75%` in the outermost table #main, which makes this unused space stay there. So scaling up the font using the mentioned key combination is losing functionality (= less space). Luckily I can tweak that here using a user CSS (`#hnmain {width: revert;}`) but an old computer illiterate will probably have a slight problem. So, don't make your users drunk, just ensure they are, like, 80 and do not have advanced computer skills.
- bobbinson 1y ago
  Not quite 80, but the same premise http://theuserismymom.com/ http://theuserismymom.com/ There is also so much more to designing for low tech literate than spacing. The accessibility guidelines focus so much on UI and being able to see what is there, but don’t focus enough on understanding what can be done with the website/app. Making sure your buttons actually look like buttons is a decent start but knowing that you can press a button, what it will do as the action, and being able to undo it and go back are so so valuable to helping them learn how to engage with sites.
cadamsdotcom 1y ago
CSS is amazing. So much can be done with so little code - blur, animation, insanely tiny loading spinners.. but there are SO many things I didn’t know about on display here. To the author - hats off! A toast!

Drunk CSS

NSPG911 1y ago

now that i got to experience being drunk, id rather not, thanks

throwaway127482 1y ago
It's really nothing like being drunk, not to say that you should try it though.

marcelr 1y ago

i have been drunk, this is not it

crummy 1y ago
yeah but reading this is difficult and annoying, which reminds me of squinting at my blurry phone trying to read it while drunk

kelnos 1y ago

This is not what things look like when you are drunk. (Source: have been drunk many times, and used a computer.)

SchemaLoad 1y ago
I'm not sure it would even be possible to replicate with visual tricks since it's more your thinking which is altered, and not just vision.
transitorykris 1y ago
It was, you just covered one eye!

culi 1y ago

The theme switcher in general is really cool. Especially being able to see and compare the "nude" version. It's like a modern day CSS Zen Garden https://csszengarden.com/ https://csszengarden.com/

stevage 1y ago
Except that on mobile it's very not obvious how to access the themes other than dark and light, including drunk.
- edent 1y ago
  That's true. I did have it as a grid originally, but it pushed the content too far down. Happy to take suggestions on how to make it more obvious.
  - svat 1y ago
    Having the horizontal scroll bar always visible and with good contrast may help (right now it auto-hides for me, Chrome on Android). Though in the initial position it may still not be obvious that it's a scroll bar...
bobbinson 1y ago
I was excited for zen garden but didn’t see anything there that stood out as I was expecting more of a focus on the design rather than the css purist lens. There are some amazing things that can be done purely through css, https://a.singlediv.com/2014-2019/ https://a.singlediv.com/2014-2019/ comes to mind.
- culi 1y ago
  Not sure what the accessibility implications of (abusing?) html/css in this way are. Perhaps wrapping adding aria-role=figure would alleviate my concerns

lelandfe 1y ago

Relevantly: https://theuserisdrunk.com/ https://theuserisdrunk.com/

Rendello 1y ago
> Your website should be so simple, a drunk person could use it. I remember the first time I read this post, the message really stuck with me. "The user is drunk" is a brilliant line. That being said, I don't think every website or tool needs to aim for the lowest common denominator.
- aidenn0 1y ago
  > That being said, I don't think every website or tool needs to aim for the lowest common denominator. Any application that will be used occasionally with the goal of not using it as quickly as possible should work this way. A counterexample would be e.g. retail POS software, which should be optimized for minimum work and maximum responsiveness for trained users.
  - whilenot-dev 1y ago
    Huh? "The user is drunk" as a rule is great, there's no need to redefine it. Especially for POS interfaces! You'd want them as intuitive as it gets, because their users can be under a lot of stress, and could, in fact, be drunk. I understand GP's "I don't think every website or tool needs to aim for the lowest common denominator" in two ways: 1. This rule isn't an excuse to stop raising the bar when it comes to interaction design ("drunk people won't notice the difference anyway"). 2. Some machines should only be operated when absolutely sober and the interface should reflect that requirement ("don't drink and drive!").
    - aidenn0 1y ago
      Maybe things have changed in the past two decades, but I definitely would have been fired from my retail job if I showed up drunk. The POS interface there was super non-intuitive, but very efficient. This was 20 years ago so the classic text-mode interface with F1-F12 keys assigned to different functions.

aidenn0 1y ago

Does "cursive font" do anything useful on windows or popular linux distributions? I haven't used either of those for about 20 years. I know on Macs a decade ago, it used to display the lovely Zapfino font, but on Windows XP SP2, I seem to recall it falling back to something like Arial.

Hackbraten 1y ago
Anecdata: I have `urw-base35-fonts` [0] installed (as a system package called gsfonts, which was pulled in as a dependency for GNOME Document Viewer). The gsfonts package comes with a fontconfig file that automatically aliases `cursive` to the Z003 font, which is also what the browser shows me. [0]: https://github.com/ArtifexSoftware/urw-base35-fonts https://github.com/ArtifexSoftware/urw-base35-fonts
- aidenn0 1y ago
  I don't have those installed; for me: $ fc-match cursive NotoSans[wdth,wght].ttf: "Noto Sans" "Regular" Also I believe that Firefox doesn't use the same font resolution as fontconfig. I certainly remember it doing some very baroque unicode fallback as compared to other programs.
  - Hackbraten 1y ago
    I specifically remember writing fontconfig overrides after I felt dissatisfied with some aspect of font rendering in the browser, mostly when it failed to pick up a FOSS drop-in replacement, e.g. Jost* for Futura. My experience is that Firefox picked up every change to `~/.config/fontconfig/fonts.conf` so far, immediately after I ran `fc-cache -f` and then restarted the browser.

rbits 1y ago

On mobile everything being slanted pushes some text offscreen so I can't read it

type0 1y ago
> so I can't read it exactly how it becomes when sufficiently drunk

dalmo3 1y ago

The irony is that, at least on mobile, you have to be sober to even find the Drunk button.

0xfffafaCrash 1y ago
thats a feautre! prevnets the pregmaing drunsk from getitng double drukn or having the drunknness cancle out or watever

asadm 1y ago

https://web.archive.org/web/20250927161012/https://shkspr.mobi/blog/2025/09/drunk-css/ https://web.archive.org/web/20250927161012/https://shkspr.mo...

vunderba 1y ago

Related but I wrote a Tampermonkey/Greasemonkey extension script [1] that when activated randomly rotated all the letters on a website from between -25 to +25 degrees as a part of my experiments around forcing more active "visual engagement" when reading to see if it made a measurable difference for recall. [1] https://greasyfork.org/en/scripts/551208-rotate-letters-script https://greasyfork.org/en/scripts/551208-rotate-letters-scri...

AfterHIA 1y ago

Dude I'm fucked as shit (but not, "I can't think anymore fricked") and your shit satisfies thoroughly. Have a link because my eloquence has left me: https://www.youtube.com/watch?v=-Dc6Pre77AY https://www.youtube.com/watch?v=-Dc6Pre77AY

nilslindemann 1y ago

How about, the reader is old and computer illiterate. Being drunk is not needed. For example, here on this site, there is this unused space left and right. I meanwhile scale all websites with such unused space, using Ctrl+`+` to get the font bigger without losing functionality. But this site has an attribute `width=75%` in the outermost table #main, which makes this unused space stay there. So scaling up the font using the mentioned key combination is losing functionality (= less space). Luckily I can tweak that here using a user CSS (`#hnmain {width: revert;}`) but an old computer illiterate will probably have a slight problem. So, don't make your users drunk, just ensure they are, like, 80 and do not have advanced computer skills.

bobbinson 1y ago
Not quite 80, but the same premise http://theuserismymom.com/ http://theuserismymom.com/ There is also so much more to designing for low tech literate than spacing. The accessibility guidelines focus so much on UI and being able to see what is there, but don’t focus enough on understanding what can be done with the website/app. Making sure your buttons actually look like buttons is a decent start but knowing that you can press a button, what it will do as the action, and being able to undo it and go back are so so valuable to helping them learn how to engage with sites.

cadamsdotcom 1y ago

CSS is amazing. So much can be done with so little code - blur, animation, insanely tiny loading spinners.. but there are SO many things I didn’t know about on display here. To the author - hats off! A toast!