CSS Optical Illusions

▲ CSS Optical Illusions(alvaromontoro.com)

125 points by ulrischa 7 hours ago | 12 comments

▲ myfonj 4 hours ago | parent | next [-]

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...

[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)

▲ sandpaper26 6 hours ago | parent | prev | next [-]

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 6 hours ago | parent | prev | next [-]

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

▲ eulgro 33 minutes ago | parent | prev | next [-]

They could make capchas out of these.

▲ layer8 2 hours ago | parent | prev | next [-]

Heh, I used to do these in Excel.

▲ encom 6 hours ago | parent | prev | next [-]

These are all super dark, for some reason.

▲

christophilus 6 hours ago | parent [-]

You have to actually run them. Otherwise, they're just a dark CodePen preview.

▲

encom 5 hours ago | parent [-]

Why the extra step of having to click each one? Only a few of them are interactive.

▲

d-us-vb 5 hours ago | parent [-]

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 4 hours ago \| parent [-]
		Somewhat ironically, Codepen ended up introducing the JS execution requirement to view the content.

▲ moralestapia 6 hours ago | parent | prev [-]

Wow, this is great!

I want to put some of them in my UIs.

	▲	herpdyderp 4 hours ago \| parent [-]
		I've often run into these unintentionally messing up my UIs!