Drunk CSS

A decade ago, I was writing about how you should test your user interface on drunk people. It was a semi-serious idea. Some of your users will be drunk when using your app or website. If it is easy for them to use, then it should be easy for sober people to use.

Of course, necking a few shots every time you update your website isn't great for your health - so is there another way?

Click the "🥴 Drunk" button at the top of the page and see what happens!

These are a relatively simple set of CSS rules which you can apply to any site in order to simulate inebriation.

(I may have changed these since writing the post. Check the source for the latest version.)

First, monkey around with the fonts. This sets all the lower-case vowels to be rendered in a different font - as discussed in "targetting specific characters with CSS rules":

 CSS/* Drunk */
@font-face {
font-family: "Drunk";
src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
/* Lower-Case Vowels */
unicode-range: U+61, U+65, U+69, U+6F, U+75 ;
size-adjust: 105%;
}

The rest of the characters will be rendered in the system's default Cursive font. Characters will also be slanted. The first character of every paragraph will be shrunk:

 CSS:root:has(input#drunk:checked) * {
font-family: "Drunk", cursive;
font-style: oblique -12deg;
text-align: end;
}
:root:has(input#drunk:checked) p::first-letter {
font-size: .5em;
}

Next, use the child selectors to rotate and skew various elements. While we wait for CSS randomness to come to all browsers this is a simple way to select various elements:

 CSS:root:has(input#drunk:checked) *:nth-child(3n) {
transform: rotate(2deg);
}
:root:has(input#drunk:checked) *:nth-child(5n) {
transform: skew(5deg, 5deg);
}
:root:has(input#drunk:checked) *:nth-child(7n) {
transform: rotate(-3deg);
}

Make the entire page blurred and saturate the colours:

 CSS:root:has(input#drunk:checked) body {
filter: blur(1px) saturate(2.5);
}

Make any hyperlink harder to click by having it gently bounce up and down:

 CSS:root:has(input#drunk:checked) a {
animation-name: bounce;
animation-duration: 4s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% { margin-top: 0px; }
25% { margin-top:-10px; }
50% { margin-top: 0px; }
75% { margin-top: 10px; }
100% { margin-top: 0px; }
}

Does this really simulate drunkenness? No. It is a pale simulacrum. What it is, however, is deliberately inaccessible to the majority of people.

How does it make you feel using the site in Drunk-Mode? Does it frustrate you? Do your eyes hurt due to the garish colour scheme? Do you keep missing the thing that you try and click on? Are the words so hard to read that it takes you extra time to do anything useful? Will you recommend this experience to your friends and family?

I've written before about cosplaying as being disabled. Strapping on a pair of Glaucoma Goggles will give you an idea of what a visual impairment is like. But it won't give you the experience of living that way for months or years.

You should test your stuff with people who have cognitive impairments or physical disabilities. Find out how usable your site is for someone lacking fine motor control or for those with learning disabilities. Pay disable people to take part in usability studies. Integrate their feedback.

Faffing around with CSS will only get you so far.

I must say, this is in character for new Tesla owners, though.

Jan 3 2026 12:40PM [1] [1] SB 101 TRANS EB 10 -- GRY TESLA IN GP // DRIVER PASSED OUT BEHIND WHEEL // FSP VIS OF OPEN CONTAINER[Shared]

#Tesla #drunk

Better photos (from FB), Hanover County Animal Protection and Shelter

"🚨 Black Friday Break-In at Ashland ABC Store 🚨
Suspect Apprehended After Liquor-Fueled Rampage
On Saturday morning, Officer Martin responded to an unusual call at the Ashland ABC Store. Upon arrival, she discovered the “suspect” had broken in, ransacked several shelves, and then… passed out in the bathroom.
The suspect?
A very intoxicated raccoon. 🦝🥃
Officer Martin safely secured our masked bandit and transported him back to the shelter to sober up before questioning. After a few hours of sleep and zero signs of injury (other than maybe a hangover and poor life choices), he was safely released back to the wild, hopefully having learned that breaking and entering is not the answer.
A big shout-out to Officer Martin for handling this chaotic scene with professionalism and good humor. Just another day in the life at Hanover Animal Protection!"

#raccoon #drunk #alcohol #wildlife

Drunk CSS

A decade ago, I was writing about how you should test your user interface on drunk people. It was a semi-serious idea. Some of your users will be drunk when using your app or website. If it is easy for them to use, then it should be easy for sober people to use.

Of course, necking a few shots every time you update your website isn't great for your health - so is there another way?

Click the "🥴 Drunk" button at the top of the page and see what happens!

These are a relatively simple set of CSS rules which you can apply to any site in order to simulate inebriation.

(I may have changed these since writing the post. Check the source for the latest version.)

First, monkey around with the fonts. This sets all the lower-case vowels to be rendered in a different font - as discussed in "targetting specific characters with CSS rules":

 CSS/* Drunk */
@font-face {
font-family: "Drunk";
src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
/* Lower-Case Vowels */
unicode-range: U+61, U+65, U+69, U+6F, U+75 ;
size-adjust: 105%;
}

The rest of the characters will be rendered in the system's default Cursive font. Characters will also be slanted. The first character of every paragraph will be shrunk:

 CSS:root:has(input#drunk:checked) * {
font-family: "Drunk", cursive;
font-style: oblique -12deg;
text-align: end;
}
:root:has(input#drunk:checked) p::first-letter {
font-size: .5em;
}

Next, use the child selectors to rotate and skew various elements. While we wait for CSS randomness to come to all browsers this is a simple way to select various elements:

 CSS:root:has(input#drunk:checked) *:nth-child(3n) {
transform: rotate(2deg);
}
:root:has(input#drunk:checked) *:nth-child(5n) {
transform: skew(5deg, 5deg);
}
:root:has(input#drunk:checked) *:nth-child(7n) {
transform: rotate(-3deg);
}

Make the entire page blurred and saturate the colours:

 CSS:root:has(input#drunk:checked) body {
filter: blur(1px) saturate(2.5);
}

Make any hyperlink harder to click by having it gently bounce up and down:

 CSS:root:has(input#drunk:checked) a {
animation-name: bounce;
animation-duration: 4s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% { margin-top: 0px; }
25% { margin-top:-10px; }
50% { margin-top: 0px; }
75% { margin-top: 10px; }
100% { margin-top: 0px; }
}

Does this really simulate drunkenness? No. It is a pale simulacrum. What it is, however, is deliberately inaccessible to the majority of people.

How does it make you feel using the site in Drunk-Mode? Does it frustrate you? Do your eyes hurt due to the garish colour scheme? Do you keep missing the thing that you try and click on? Are the words so hard to read that it takes you extra time to do anything useful? Will you recommend this experience to your friends and family?

I've written before about cosplaying as being disabled. Strapping on a pair of Glaucoma Goggles will give you an idea of what a visual impairment is like. But it won't give you the experience of living that way for months or years.

You should test your stuff with people who have cognitive impairments or physical disabilities. Find out how usable your site is for someone lacking fine motor control or for those with learning disabilities. Pay disable people to take part in usability studies. Integrate their feedback.

Faffing around with CSS will only get you so far.