Drunk CSS
https://shkspr.mobi/blog/2025/09/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.
#css #drunk #HTML #ui #ux #webdev
