Worked on a project that wanted to make everything a different grayscale color. It was out of control already when someone one day complained that two pieces of text were a different color.
They weren’t. They were identical. But they were on two different background colors which make the optical illusion that they weren’t. And I reminded them for the twentieth time that we were using too goddamned much gray.
myfonj 17 hours ago [-]
These "dots appearing only while (not) focused" are known as "extinction illusions", namely
"25 - Appearing Dots"
is "McAnany's type" [1], and
"26 - Disappearing Dots"
is known as "Ninio's type" [2], according Akiyoshi Kitaoka's materials. (I have recreated them too few years ago [3][4], before getting to the source.)
Coca cola appears red when no red at all is used in whole image
sandpaper26 19 hours ago [-]
This is cool, but more as a demonstration of interesting CSS techniques than optical illusions in my opinion.
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
nilslindemann 19 hours ago [-]
33 - color fan: There is another interesting optical illusion here: The fan seems to rotate faster when not directly looking at it.
layer8 15 hours ago [-]
Heh, I used to do these in Excel.
aj7 8 hours ago [-]
What would be most interesting is using optical illusions to help decode how brain visual processing is done.
encom 19 hours ago [-]
These are all super dark, for some reason.
christophilus 19 hours ago [-]
You have to actually run them. Otherwise, they're just a dark CodePen preview.
encom 18 hours ago [-]
Why the extra step of having to click each one? Only a few of them are interactive.
d-us-vb 18 hours ago [-]
Because codepens can run javascript. And if a page has 50 of them, it might make the page load time much longer. I know that all these examples are pure CSS, and maybe there is a setting in codepen to disable the "Run" button and automatically run it. Still, getting to decide is generally a better pattern than presuming that that's what the user wants, especially when the fact that the code is inside a codepen makes it explicitly not an integral function of the page. "I thought this was just a blog, and now you want me to run all this javascript??" -- some JS hater, probably.
I appreciate getting to choose as much as possible when code runs.
zamadatix 17 hours ago [-]
Somewhat ironically, Codepen ended up introducing the JS execution requirement to view the content.
moralestapia 20 hours ago [-]
Wow, this is great!
I want to put some of them in my UIs.
herpdyderp 17 hours ago [-]
I've often run into these unintentionally messing up my UIs!
eulgro 14 hours ago [-]
They could make capchas out of these.
17 hours ago [-]
Rendered at 13:40:31 GMT+0000 (Coordinated Universal Time) with Vercel.
Worked on a project that wanted to make everything a different grayscale color. It was out of control already when someone one day complained that two pieces of text were a different color.
They weren’t. They were identical. But they were on two different background colors which make the optical illusion that they weren’t. And I reminded them for the twentieth time that we were using too goddamned much gray.
[1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[3] https://codepen.io/myf/full/XjdmJy ( scintillation warning)
[4] https://codepen.io/myf/full/jMqoMW ( scintillation warning)
I did something similar for my personal favorite illusion, the Ames window illusion. Recreated with CSS: https://brandondong.github.io/blog/ames_window/
Coca cola appears red when no red at all is used in whole image
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
I appreciate getting to choose as much as possible when code runs.
I want to put some of them in my UIs.