7 ms·

CSS Optical Illusions

224 points by ulrischa 9mo ago

moralestapia 9mo ago
Wow, this is great! I want to put some of them in my UIs.
- herpdyderp 9mo ago
  I've often run into these unintentionally messing up my UIs!
encom 9mo ago
These are all super dark, for some reason.
- christophilus 9mo ago
  You have to actually run them. Otherwise, they're just a dark CodePen preview.
  - encom 9mo ago
    Why the extra step of having to click each one? Only a few of them are interactive.
    - d-us-vb 9mo 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 9mo ago
        Somewhat ironically, Codepen ended up introducing the JS execution requirement to view the content.
sandpaper26 9mo 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 9mo ago
33 - color fan: There is another interesting optical illusion here: The fan seems to rotate faster when not directly looking at it.
myfonj 9mo 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.) [1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text=McAnany%27s%20typeMcAnany https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text=Ninio%27s%20type https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [3] https://codepen.io/myf/full/XjdmJy https://codepen.io/myf/full/XjdmJy ( scintillation warning) [4] https://codepen.io/myf/full/jMqoMW https://codepen.io/myf/full/jMqoMW ( scintillation warning)
deleted 9mo ago
[deleted]
layer8 9mo ago
Heh, I used to do these in Excel.
eulgro 9mo ago
They could make capchas out of these.
- hiccuphippo 9mo ago
  "Please select the dancers spinning to the right"
brandon_bot 9mo ago
Cool! I did something similar for my personal favorite illusion, the Ames window illusion. Recreated with CSS: https://brandondong.github.io/blog/ames_window/ https://brandondong.github.io/blog/ames_window/
aj7 9mo ago
What would be most interesting is using optical illusions to help decode how brain visual processing is done.
smusamashah 9mo ago
This coca cola illusion is my favourite one https://gagadget.com/en/446542-a-photo-of-a-coca-cola-can-that-looks-red-but-is-made-up-of-only-black-and-blue-pixels-is-being-shared-on-social-media-how-does-it-work/ https://gagadget.com/en/446542-a-photo-of-a-coca-cola-can-th... Coca cola appears red when no red at all is used in whole image
- flexagoon 9mo ago
  This is a great illusion, though I often see that people try to explain this (and a similar image of strawberries) as "our brain knows this object is supposed to be red so it fills in red", which is not what's happening - it's based on color contrast like many other optical illusions
- mediumsmart 9mo ago
  The background on the can is a very light red. I know from painting murals that a light color close up looks darker from some distance.
hinkley 9mo ago
I thought this was going to go the other way. 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.
andredurao 9mo ago
On #4 (White's Illusion) it looks like for me that the gray bar that is surrounded by black is brighter than the one surrounded by white instead of darker :#

224 points by ulrischa 9mo ago

moralestapia 9mo ago

Wow, this is great! I want to put some of them in my UIs.

herpdyderp 9mo ago
I've often run into these unintentionally messing up my UIs!

encom 9mo ago

These are all super dark, for some reason.

christophilus 9mo ago
You have to actually run them. Otherwise, they're just a dark CodePen preview.
- encom 9mo ago
  Why the extra step of having to click each one? Only a few of them are interactive.
  - d-us-vb 9mo 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 9mo ago
      Somewhat ironically, Codepen ended up introducing the JS execution requirement to view the content.

sandpaper26 9mo 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 9mo ago

33 - color fan: There is another interesting optical illusion here: The fan seems to rotate faster when not directly looking at it.

myfonj 9mo 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.) [1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text=McAnany%27s%20typeMcAnany https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text=Ninio%27s%20type https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [3] https://codepen.io/myf/full/XjdmJy https://codepen.io/myf/full/XjdmJy ( scintillation warning) [4] https://codepen.io/myf/full/jMqoMW https://codepen.io/myf/full/jMqoMW ( scintillation warning)

deleted 9mo ago

[deleted]

layer8 9mo ago

Heh, I used to do these in Excel.

eulgro 9mo ago

They could make capchas out of these.

hiccuphippo 9mo ago
"Please select the dancers spinning to the right"

brandon_bot 9mo ago

Cool! I did something similar for my personal favorite illusion, the Ames window illusion. Recreated with CSS: https://brandondong.github.io/blog/ames_window/ https://brandondong.github.io/blog/ames_window/

aj7 9mo ago

What would be most interesting is using optical illusions to help decode how brain visual processing is done.

smusamashah 9mo ago

This coca cola illusion is my favourite one https://gagadget.com/en/446542-a-photo-of-a-coca-cola-can-that-looks-red-but-is-made-up-of-only-black-and-blue-pixels-is-being-shared-on-social-media-how-does-it-work/ https://gagadget.com/en/446542-a-photo-of-a-coca-cola-can-th... Coca cola appears red when no red at all is used in whole image

flexagoon 9mo ago
This is a great illusion, though I often see that people try to explain this (and a similar image of strawberries) as "our brain knows this object is supposed to be red so it fills in red", which is not what's happening - it's based on color contrast like many other optical illusions
mediumsmart 9mo ago
The background on the can is a very light red. I know from painting murals that a light color close up looks darker from some distance.

hinkley 9mo ago

I thought this was going to go the other way. 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.

andredurao 9mo ago

On #4 (White's Illusion) it looks like for me that the gray bar that is surrounded by black is brighter than the one surrounded by white instead of darker :#