Ilusiones ópticas puro Css. Tu ojo te engaña y todos tan contentos 5.10.15
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
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.
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.
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.
Y en el siguiente, sigue la pelotita:
See the Pen Penrose Triangle by Rachel Bull (@rachel_web) on CodePen.
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.
Ilusiones ópticas
¿Eres bueno distinguiendo colores?
See the Pen Optical illusion 1 by rafaelcastrocouto (@rafaelcastrocouto) on CodePen.
¿Puedes ver los círculos grises?
See the Pen Hermann Grid Illusion by Michael Lopez (@MichaelLopez) on CodePen.
El tamaño es aparente
See the Pen Ebbinghaus illusion by Ana Tudor (@thebabydino) on CodePen.
See the Pen Ponzo illusion by Ana Tudor (@thebabydino) on CodePen.
Paralelas o convergentes?
See the Pen Illusion VI: Zöllner lines by Jennifer Hamon (@jhamon) on CodePen.
¿Cuántos triángulos cuentas?
See the Pen Kanizsa's Triangle by Mark Lee (@leemark) on CodePen.
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.
¿Círculos o espiral?
See the Pen Pinna's illusory intertwining effect by Ana Tudor (@thebabydino) on CodePen.
Otra variante de la misma ilusión Css. Haz :hover
See the Pen Optical illusion 4 by rafaelcastrocouto (@rafaelcastrocouto) on CodePen.
¿Curvas o rectas?
See the Pen Illusion VII: Bulging Checkerboard by Jennifer Hamon (@jhamon) on CodePen.
¿Desplazamiento a saltos o continuo?
See the Pen CSS optical illusion by Ludvig Lindblom (@ludviglindblom) on CodePen.
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.
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.
Giro sincronizado o desplazamientos lineales?
See the Pen Crazy Circle Illusion by Peter Gasston (@stopsatgreen) on CodePen.
¿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.
Damero mutante: ¿Diagonales, horizontales, verticales, hexágonos, estrellas...?
See the Pen tiling switch (pure CSS) by Ana Tudor (@thebabydino) on CodePen.
¿Giros o longitud de líneas cambiante?
See the Pen Spinning Star by Emmanuel Pilande (@YoEmanYo) on CodePen.
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.
Kseso
the obCSServer ᛯ 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 Kseso
cool... cool cool, cool cool cool ;)
ResponderEliminarMuy divertidas!
ResponderEliminarExcelentes....
ResponderEliminarLa potencia que da el CSS
ResponderEliminarVeo tres columnas. A partir de cierto punto la tercera está en bñlanco y la del centro son tres barras. La página se ve como si estuviese escrita para móvil. No me respondas: la culpa es mía por no tener el navegador configurado como tú. ¡Argggggh!
ResponderEliminarHola Javier:
EliminarLamento los inconvenientes.
¿Tres columnas? La actual configuración del blog es un "main" y un "aside" a la derecha en pantallas mayores a 1024px
En resoluciones menores el aside pasa a mostrarse bajo el cuerpo del artículo.
En dispositivos que se Blogger identifique como "mobile" el aside no debería ser servido por el servidor.
Quizás si me indicas los detalles de tu conexión como dispositivo usado, SO y navegador podría intentar saber qué está ocurriendo e intentar solucionarlo.
Un saludo y gracias por el aviso
Me has dejado con los ojos haciendo "txiribitas" pero me he divertido, gracias.
ResponderEliminarGenial! Me ha encantado el post!
ResponderEliminarmuy bueno
ResponderEliminarWOW!!!!! me encantó!!!! voy a inventart algunos... me sirve de inspiración... GRACIAS
ResponderEliminarmuy buenos
ResponderEliminar