Recopilación de demos que recrean con puro Css diferentes ilusiones ópticas. Figuras imposibles como el triángulo de Penrose o cuboides imposibles, ilusiones en colores o tamaños y comportamientos que no son lo que parecen.
#5:
Por completar mi comentario en #3: en la imagen que adjunto se ve que las dos figuras no son exactamente iguales. El cuadro que "falta" está repartido a lo largo de la diagonal. cc/ #1
#12:
Es cierto. Mis ojos me engañan. Yo aquí veo más que "un par de ojos y una boca"
#3:
#1 Creo recordar que el truco está en que los dos trozos grandes cortados en diagonal y posteriormente intercambiados no encajan exactamente en su nueva posición, dejando pequeños resquicios que al sumarlos deberían dar la onza que nos sobra.
#1 Creo recordar que el truco está en que los dos trozos grandes cortados en diagonal y posteriormente intercambiados no encajan exactamente en su nueva posición, dejando pequeños resquicios que al sumarlos deberían dar la onza que nos sobra.
Por completar mi comentario en #3: en la imagen que adjunto se ve que las dos figuras no son exactamente iguales. El cuadro que "falta" está repartido a lo largo de la diagonal. cc/ #1
#0 Los gráficos me parecen muy bien trabajados, pero sólo una cosa, NO es CSS, es SCSS, ya que la mayoría de ejemplos están escritos con este último. Lo digo por el título, “...puro CSS”.
Ya que no es lo mismo CSS y SCSS, el primero lo interpreta de forma nativa el navegador, en cambio el segundo, es un tipo especial de archivo SASS (un programa escrito en Ruby que ensambla y ejecuta hojas de estilo desde un servidor remoto). Con esto no quiero decir que con CSS no se puedan hacer este tipo de ejemplos.
SCSS añade muchas funcionalidades (aquí la diferencia), tales como: variables, condicionales, loops, funciones, etc. De esta forma se puede llegar hacer lo mismo, pero con menos código.
CSS3 es una creación de Satanás y esto solo lo demuestra. Hoy mismo me he pasado toda la mañana pegándome con unos estilos rebeldes y tenido que terminar recurriendo al !important.
#17 ¿A qué página has ido a parar?
Sólo dos demos incluyen js para... añadir funcionalidad a algún botón para "ver el truco". En ninguna de esas 2 el js interviene en lo que es la ilusión.
En el resto de pens que tienen la pestaña de js es porque sus autores han incluido algún comentario en ella sin nada de código js.
#19 Fue algo que verifiqué antes de traer el artículo aquí, que ya sabes cómo es el personal.
Y ya te digo que saca la pestaña js porque hay algo en ella, pero la mayoría son comentarios del autor de cada demo
- La mayoría de ilusiones que experimentamos son visuales, no ópticas. Es decir la distorsión se produce por un factor mental o cognitivo, las ilusiones ópticas es cuando la luz llega "distorsionada" al ojo.
- El cerebro no te engaña, porque tú eres tu cerebro. No hay nadie a quien engañar. Si el 'ojo' te 'engaña' sí que sería una ilusión óptica.
Comentarios
Es cierto. Mis ojos me engañan. Yo aquí veo más que "un par de ojos y una boca"
¡Recontra! He tenido que releer el titular para darme cuenta de que no hablaba de política (C's + engaño + estar contento).
#2 Has tenido que
releerleer el titular para darte cuenta de que no hablaba de política#2 Normal, C's es sinónimo de engaño.
#9
Pues la que te espera con cosas como el CSS grid layout
Ya te voto positivo para que se te pase un poquiño
#2 para ti tengo... ¿dónde dejé mis gafas?
#8 (este fue más fácil de encontrar)
#2 me ha pasado exactamente lo mismo
¿Ilusión autoesplicativa?
Ya lo decía yo...
OMG...que alguien me ayude a no volverme loco con la primera del chocolate... siempre he tenido serios POBLEMAS con este rompecabezas...
#1 Creo recordar que el truco está en que los dos trozos grandes cortados en diagonal y posteriormente intercambiados no encajan exactamente en su nueva posición, dejando pequeños resquicios que al sumarlos deberían dar la onza que nos sobra.
Lo mismo ocurre con la segunda ilusión.
Por completar mi comentario en #3: en la imagen que adjunto se ve que las dos figuras no son exactamente iguales. El cuadro que "falta" está repartido a lo largo de la diagonal. cc/ #1
#1 Si te fijas en la animación, se nota como la parte que se mueve hacia la derecha para quedarse "arriba" se alarga un poco.
#1 Te has olvidado esto por el camino '/s'
#0 Los gráficos me parecen muy bien trabajados, pero sólo una cosa, NO es CSS, es SCSS, ya que la mayoría de ejemplos están escritos con este último. Lo digo por el título, “...puro CSS”.
Ya que no es lo mismo CSS y SCSS, el primero lo interpreta de forma nativa el navegador, en cambio el segundo, es un tipo especial de archivo SASS (un programa escrito en Ruby que ensambla y ejecuta hojas de estilo desde un servidor remoto). Con esto no quiero decir que con CSS no se puedan hacer este tipo de ejemplos.
SCSS añade muchas funcionalidades (aquí la diferencia), tales como: variables, condicionales, loops, funciones, etc. De esta forma se puede llegar hacer lo mismo, pero con menos código.
CSS3 es una creación de Satanás y esto solo lo demuestra. Hoy mismo me he pasado toda la mañana pegándome con unos estilos rebeldes y tenido que terminar recurriendo al !important.
No veas cómo se me ha calentado el móvil, chacho.
Menos el título (y todos tan contentos... Pff) lo demás me ha encantado. Se diría que me ha hecho ilusión
La web esa de Codepen es lo mejor que se ha inventado en mucho tiempo.
Es lo más emaparanollante que he visto en mi vida. Parecía que estaba viendo el video de La Señal.
Bueno, eso de CSS puro, los cojones, la gran mayoría tienen código JS.
#17 ¿A qué página has ido a parar?
Sólo dos demos incluyen js para... añadir funcionalidad a algún botón para "ver el truco". En ninguna de esas 2 el js interviene en lo que es la ilusión.
En el resto de pens que tienen la pestaña de js es porque sus autores han incluido algún comentario en ella sin nada de código js.
#18 Hombre, yo he contado siete con JS.
Tampoco me he puesto analizar el código.
Si tu dices que es así OK
#19 Fue algo que verifiqué antes de traer el artículo aquí, que ya sabes cómo es el personal.
Y ya te digo que saca la pestaña js porque hay algo en ella, pero la mayoría son comentarios del autor de cada demo
Algunos apuntes.
- La mayoría de ilusiones que experimentamos son visuales, no ópticas. Es decir la distorsión se produce por un factor mental o cognitivo, las ilusiones ópticas es cuando la luz llega "distorsionada" al ojo.
- El cerebro no te engaña, porque tú eres tu cerebro. No hay nadie a quien engañar. Si el 'ojo' te 'engaña' sí que sería una ilusión óptica.
Lo explico con más chicha aquí: http://rasgolatente.es/cerebro-engana-ilusiones-opticas/
Por lo demás son una pasada las ilusiones. En esta web tenéis las explicaciones de por qué se produce cada una http://www.michaelbach.de/ot/