CSS Implementation of Optical Illusions: Visual Perception Effects Created with Web Technologies
By
ulrischa
4mo ago· 16 min readen
100/100
Golden Brown
Bagelometer↗
The bagel they save for the regulars. Don't skim, savour.
Score100Typehow-toSentimentpositive
Summary
This article presents a collection of 50+ optical illusions created using CSS and HTML, demonstrating how visual perception tricks can be implemented with web technologies. The author shows specific examples like the Poggendorff illusion, explaining how CSS pseudo-elements (::before and ::after) can be used to create these effects. The content serves as both a technical tutorial for web developers and an exploration of visual perception through code.
Key quotes
· 4 pulledYou can find a collection with all the optical illusions in this article (and more!) on CodePen.
The Poggendorff illusion is an optical illusion in which a diagonal line interrupted by a vertical bar appears misaligned, even when both segments are actually continuous.
A simple version of this effect can be seen in the following demo. I used the ::before and ::after pseudo-elements to create the diagonal line and the vertical bar, respectively.
A collection of 50+ optical illusions coded with CSS and HTML.
A collection of 50+ optical illusions coded with CSS and HTML. :: Blog post at Alvaro Montoro's Personal Website.
