soy Kseso y esto EsCSS

Ilusiones ópticas puro Css. Tu ojo te engaña y todos tan contentos

Recopilación de demos que recrean con puro Css ilusiones ópticas. Desde figuras imposibles a ilusiones en colores o tamaños y comportamientos que no son lo que parecen.

Ilusiones ópticas puro Css. Tu ojo te engaña y todos tan contentos

·Por Kseso ✎ 11
Ilusiones Css. Tu ojo te engaña y todos tan contentos

De Css se suele decir que es un lenguaje de representación. Tiene por encomienda dar la apariencia a los elementos de un documento.

Y como todo, tiene sus propias limitaciones o carencias, ya sea porque no le corresponde o por estar pendiente de encontrar una solución satisfactoria.

Pero con todo no son pocas las ocasiones que se logran imposibles Css con un poco de imaginación y conocimientos. Unas declaraciones combinadas con maestría, un uso no previsto de algún valor... ¡y ahí está!.

Pero en casi todos los imposibles Css lo que subyace es una impostura. Suelen ser simulaciones: lo que hay no es lo que parece. Meras ilusiones.

Y hoy en este artículo sólo pretendo traer algunas demos de esas ilusiones. Sólo para recrearnos contemplándolas. Bueno, y si nos animamos a estudiar alguna seguro que algo de provecho sacamos.

Nota: muchos de los ejemplos revelan su secreto al :hover o al pulsar botones, arrastrar elementos...

Chocolate inacabable para Pacman

Para empezar nada mejor que un viejo "rompecabezas" revisado y actualizado. Eterno chocolate:

See the Pen Chocolate dilemma by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

Ilusión Css autoesplicativa

La primera es una vieja realización de Ana Tudor. Recrea el viejo pasatiempo del mundo físico (base del pen anterior) y a la vez lo explica.

See the Pen Now how does this happen? :) by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

Figuras imposibles

Otro campo de las ilusiones donde Css también muestra todo su poder para engatusarnos es el de las figuras imposibles.

Triángulo de Penrose

Posíblemente una de las figuras imposibles más recreada sea el triángulo de Penrose.

See the Pen Cube Illusion by James Grima (@semajtwin) on CodePen.

Ver Pen Original

Y en el siguiente, sigue la pelotita:

See the Pen Penrose Triangle by Rachel Bull (@rachel_web) on CodePen.

Ver Pen Original

De todos es sabido cómo construirlo en el mundo real. Con Css también se puede autoexplicar el Triángulo de Penrose real.

Cuboide imposible

De Gregor Adams el original.

See the Pen Impossible cube | pure CSS by Kseso (@Kseso) on CodePen.

Ver Pen Original

Ilusiones ópticas

¿Eres bueno distinguiendo colores?

See the Pen Optical illusion 1 by rafaelcastrocouto (@rafaelcastrocouto) on CodePen.

Ver Pen Original

¿Puedes ver los círculos grises?

See the Pen Hermann Grid Illusion by Michael Lopez (@MichaelLopez) on CodePen.

Ver Pen Original

El tamaño es aparente

See the Pen Ebbinghaus illusion by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

See the Pen Ponzo illusion by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

Paralelas o convergentes?

See the Pen Illusion VI: Zöllner lines by Jennifer Hamon (@jhamon) on CodePen.

Ver Pen Original

¿Cuántos triángulos cuentas?

See the Pen Kanizsa's Triangle by Mark Lee (@leemark) on CodePen.

Ver Pen Original

Y en 3D

La ilusión óptica anterior con una pizca más de Css pasa del plano al 3D para hacerte ver pirámides:

See the Pen Tilting Pyramid by Graham Odds (@godds) on CodePen.

Ver Pen Original

¿Círculos o espiral?

See the Pen Pinna's illusory intertwining effect by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

Otra variante de la misma ilusión Css. Haz :hover

See the Pen Optical illusion 4 by rafaelcastrocouto (@rafaelcastrocouto) on CodePen.

Ver Pen Original

¿Curvas o rectas?

See the Pen Illusion VII: Bulging Checkerboard by Jennifer Hamon (@jhamon) on CodePen.

Ver Pen Original

¿Desplazamiento a saltos o continuo?

See the Pen CSS optical illusion by Ludvig Lindblom (@ludviglindblom) on CodePen.

Ver Pen Original

Quizás no se mueva y quizás ni haya gato encerrado dibujado

See the Pen running cat illusion in pure CSS by Gregor Adams (@YoEmanYo) on CodePen.

Ver Pen Original

En este pen un usuario de Codepen ha reunido varias de este tipo ilusiones de líneas complementarias que al superponerlas crean un dibujo y al desplazarse el movimiento:

See the Pen Optical Illusions by Kenny Fernsten (@Fernker) on CodePen.

Ver Pen Original

Giro sincronizado o desplazamientos lineales?

See the Pen Crazy Circle Illusion by Peter Gasston (@stopsatgreen) on CodePen.

Ver Pen Original

¿Sólo rectas o algo más?

OjO con esta demo. Podría dejarte secuelas por hipnosis, mareos o epilepsia.

See the Pen Stare at the dot by Emmanuel Pilande (@YoEmanYo) on CodePen.

Ver Pen Original

Damero mutante: ¿Diagonales, horizontales, verticales, hexágonos, estrellas...?

See the Pen tiling switch (pure CSS) by Ana Tudor (@thebabydino) on CodePen.

Ver Pen Original

¿Giros o longitud de líneas cambiante?

See the Pen Spinning Star by Emmanuel Pilande (@YoEmanYo) on CodePen.

Ver Pen Original

Y final

La última y mejor ilusión óptica en puro Css dejo que sea esa que no he incluido y que para ti es inexcusable mi omisión. Para restregármela sólo necesitas incluirla en tu comentario. Recuerda que puedes incluir pens de Codepen en los comentarios.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso