Más ilusiones ópticas con CSS

En 2022 publiqué la primera tanda de ilusiones ópticas creadas con CSS, hoy llega la segunda entrega con otras 6 ilusiones más (o mejor dicho 7, ya que una es doble) que harán trabajar a vuestros cerebros.

Ilusión de Münsterberg

Esta (o siendo exactos una basada en esta) es la primea ilusión que hice con CSS, y además me sirvió para aprender mas sobre los teselados, gracias a Ana Tudor que me orientó y me ayudo a entender todo el proceso con sus comentarios.

También conocida como Ilusión de la pared de la cafetería o Ilusión de la guardería, a pesar de aparentar que las líneas horizontales tienen ángulos diferentes unas respecto a otras lo cierto es que son paralelas.

La ilusión se debe al fenómeno de la irradiación, y a la dispersión de la luz entre zonas oscuras y zonas brillantes en la imagen retinal. Las polaridades de contraste parecen ser el factor que determina el aspecto inclinado de las líneas horizontales.

El efecto desaparece al poner todos los bloques de color blanco, o de colores diferentes pero con mismo brillo, lo que puedes ver pasando el ratón sobre la ilusión.

Más info en Wikipedia y más aún en inglés.

Aquí dejo un video del proceso de creación de esta ilusión:

Ilusión de medio cubo

Puede que no veas nada, pero si tu cerebro «voltea» el cubo cuando está detenido, verás que la figura parece girar siempre en la misma dirección (en el sentido de las agujas del reloj), cuando en realidad gira en el sentido de las agujas del reloj y luego en sentido contrario.

Si no eres capaz de verlo prueba a cerrar los ojos durante medio segundo justo antes de que el cubo se detenga, tu cerebro hará su trabajo y veras que el cubo gira siempre en la misma dirección aunque como decía antes, es una ilusión, el cubo gira en el sentido de las agujas del reloj y a continuación en sentido contrario volviendo a su posición inicial.

See the Pen Half Cube Illusion – CSS by Josetxu (@josetxu) on CodePen.

Ilusión de escaleras en agujero cuadrado

Ilusión que muestra unas escaleras en agujero cuadrado, aunque realmente es un dibujo en 2D.

See the Pen Square Hole Stairs Illusion by Josetxu (@josetxu) on CodePen.

Inspirado en: Square Hole Illusion

Cubos tallados imposibles

Una figura tridimensional imposible, compuesta por dos cubos tallados donde el techo del cubo de abajo es a la vez el suelo del cubo de arriba pero de una manera imposible, al menos en el espacio euclidiano que habitamos.

Aquí puedes ver un video del proceso de creación de esta imagen imposible.

See the Pen Impossible Carved Cubes – CSS by Josetxu (@josetxu) on CodePen.

Inspirado en esta imagen de Pinterest.

Triangulo de Penrose en granito

Otra versión del Triangulo de Penrose mostrado en el primer artículo de esta serie, esta vez con tres bloques a los que se le ha dado un efecto de granito. La ilusión vuelve a estar en la perspectiva, si cambiamos el ángulo de visión (pasando el cursor por encima de la figura) veremos el truco. En esta versión también jugamos con las sombras, cambiándolas cuando la pieza gira, para conseguir un efecto más real.

Mas información en Wikipedia.

See the Pen Penrose Granite Triangle Illusion – CSS by Josetxu (@josetxu) on CodePen.

Ilusión del cono

Creada con anillos descentrados dentro de un círculo. Posteriormente se aplica una animación de giro que es la que crea la ilusión de giro manteniendo el centro fijo.

See the Pen Cone Illusion – Pure CSS by Josetxu (@josetxu) on CodePen.

Inspirada en esta imagen de Pinterest.

Y como decíamos al principio de este artículo, esta ilusión es doble. Aquí tenéis otra versión en la que se añade otro cono dentro del primero, con las sombras invertidas, amplificando la ilusión.

See the Pen Double Cone Illusion – Pure CSS by Josetxu (@josetxu) on CodePen.

Para ver más ilusiones ópticas como estas dejo un enlace a mi Colección Optical Illusions en Codepen, con, hasta ahora, 24 ilusiones.