EntradasCSS 3D Meninas
14 de Diciembre del 2009(versión en castellano abajo)
I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code.
It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates.
Castellano
He tomado el cuadro Las Meninas y he creado este efecto pseudo-3D con CSS. Es CSS puro, sin javascript ni flash; sólo código CSS y HTML.
Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). El posicionamiento de los sprites se realiza mediante hover en un total de 80 anchors. El lateral derecho de la habitación se ensancha y contrae para mejorar el efecto 3D.
Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Para que no interfieran las imáges en el hover, he usado distintos z-indexs y nbsps con tamaño de fuente de 455 píxeles: el mismo alto que el experimento en sí.
Funciona en las últimas versiones de los navegadores más usados y valida.
Espectacular,
Cada dia me sorprendes mas, tendrias que escribir un libro de CSS, No creo que exista demasiada gente que sepa lo que sabes.
Madre mía! Eres un genio, me parece un efecto muy digno e interesante. Crea muy buena sensación. Con HTML5 y CSS3 la web promete mucho.
Ufff Román… Te luciste!
Probado en Camino2 en Mac, y funciona (aunque la 1ª vez me ha aparecido un pequeño glitch, pero se fue al hacer click sobre la composición y no ha vuelto a aparecer).
Está muuuy bien.
Parece que hayas usado algún script (o macros del editor) para ir generando pedazos del código, ¿o ha sido todo a mano?, ¿costaría mucho añadir parallax vertical?.
maeghith: el parallax vertical, para los sprites sería posible y creo que se podría compactar en ese caso el html, aunque ocuparía bastante más que ahora en cualquier caso. El problema vendría con la distorsión a aplicar a la pared derecha, al suelo y al techo; ya no serviría el truco de estirado de imagen que uso ahora.
Si se hiciese como parallax cortando estas paredes cada 1 o 2 píxeles de ancho se podría, pero los navegadores actuales en los ordenadores actuales no soportan manejar en CSS tantos elementos a una velocidad razonable, y además el tamaño del código html se multiplicaría decenas o cientos de veces…
Así que mi respuesta final es: posible sí, práctico no.
Respecto a si me he ayudado de script para generar el código: por supuesto, lo hice con php. Creo que no hubiese tenido sentido alguno hacerlo a mano. Si queréis puedo publicar el código, aunque creo que carece bastante de interés…
Way cool!
I like your work very much!
Wow. Qué espectacular efecto. Sin embargo, ¿no debería ser al revés el efecto para hacer la impresión de que el puntero es el punto de vista?
[…] Pro Tweets CSS 3D Meninas. Mouse over that puppy! http://www.romancortes.com/blog/css-3d-meninas/ dalmaer - Mon 14 Dec 22:31 0 […]
Better English translation:
I’ve taken the painting Las Meninas and created this pseudo-3D effect in CSS. It’s pure CSS, without javascript or flash - just CSS and HTML.
I used 3 images to create this: two as base layers and another for sprites. There are 3 sprites: one for the canvas, child and dog; another for the maidens; and the last with the nun and the accompanying figure.
The sprites are positioned on hover using a series of 80 anchors. The right side of the room expands and contracts to enhance the 3D effect.
There are a few tricks for the hover to work correctly, which you can see in the source code. To keep the images from blocking the hover, I’ve used distinct z-indexes and NBSPs sized to 455 pixels- the same height as the image.
It works with the latest versions of common browsers, and it validates.
Brilliant work.
(Obra espectular :-))
Confirm that it works in IE7 as well (though there are scrollbars you have to ignore).
I’d love to see the code that allowed you to do this. Awesome work!
Nice work, you don’t need to use empty anchors since all the browsers you’re supporting can have :hover on any element.
Wow this is unbelievable! Really nice work, you really know your CSS
Great trick for online children’s books
No me canso de decirlo, y todos mis comentarios en tu blog son iguales, pero… ¡estupendo trabajo Román!
En serio, magnífico. No puedo creer las cosas que hacés con HTML y CSS… impresionantes.
Felicitaciones nuevamente.
Un abrazo.
Wow,
i’m very impressed
nice work … keep it up
Direction should be opposite. The mouse should represent the viewers head.
(Why is the email address mandatory?)
Way cool, looks really neat
Really cool effect, and it all validates too!
Very nicely done
[…] http://www.romancortes.com/blog/css-3d-meninas/ var addthis_pub = ”; var addthis_language = ‘en’;var addthis_options = ‘email, favorites, digg, delicious, myspace, google, facebook, reddit, live, more’; […]
Brilliant work
That is absolutely stunning!
Very impressive!:)
Very nice work,love it
Nice work. Seems you had spent lot of energy for this. Stunning 3D effect.
bow, amazing. Really good Work. Respect to you. Keep up the good Work.
What about an Tutorial ;-)
Brillante!
[…] in pochi siti, chiaramente orientati alla grafica, più che ai contenuti. Ieri un designer spagnolo ha pubblicato un suo lavoro in puro CSS per simulare una visione tridimensionale del quadro Las Meninas di Velázquez. […]
wow! Thats very impressive.. It will be more effective if you setup the demo in a black background.
Amazing!
genio!
This was impressive.
[…] Shared Pure CSS 3D effect. […]
Its very cool and the 3dimensionality came out pure.
Perhaps you let us know if you have made it with a Tool
or its pure handcoding?
[…] efekt paralaksy stworzony wyłącznie przy użyciu HTMLa i CSSa. Zresztą, oceńcie sami, czy to, co zobaczyłem warte jest uwagi. Cały przykład opiera się na bardzo intensywnej eksploracji atrybutu […]
Hey…so cool man!!
Really amazing!
Could you have some links for clicking on the image?
Existe la posibilidad de recordar el estado de la grafica cuando el indicador sale de la imagen? le anadiria un nivel mas de complexidad y estilo.
buen trabajo!
That’s a really great idea!!! Wow.
Well done! Quite impressive effect! How did you do that?
[…] Impresionante efecto 3D en imágenes usando sólo CSS y HTML http://www.romancortes.com/blog/css-3d-meninas/ por corso el 16:47 UTC […]
Eres un crack es la segunda vez que veo algo tuyo experimentando con css y la vedad que me encanta.. saludos!
[…] Efecto de tercera dimensión solo con CSSwww.romancortes.com/blog/css-3d-meninas/ enviado por Facso […]
Me encanta. Una buena demostración de que no está justificada la sobresaturación de flash en la red. ¡Saludos!
está genial pero aparece un efecto raro si se desplaza el puntero cuando está clicado el botón izquierdo. Se duplican las imágenes (se congela el artificio, vamos)
¡Gran efecto! En clase estamos aprendiendo XHTML y CSS, voy a pasar el enlace para que lo vean, ¡les va a encantar! ;)
Fabuloso, has realizado un efecto excelente con tan solo CSS/HTML. Felicidades.
[…] » noticia original […]
Impresionante!!!
Felicidades!, quedo genial!
[…] 3d http://www.romancortes.com/blog/css-3d-meninas/ # Share and […]
Es buenísimo. Enhorabuena.
Interesante ejercicio teórico. Pero viendo el código me da la impresión de que o has utilizado un método automático para generar el código (que sería muy interesante) o le has echado un montón de horas.
Con javascript sería muy sencillo, pero la verdad es que es un trabajo impresionante. Felicidades.
Good work!
If you want, you can see article on my blog about this - it is written in polish, so use “translate” button at the very beginning.
Eres un crack, muy buen trabajo. Ánimo, sigue así.
Como ya han dicho por ahí: ¡ESPECTACULAR!
¿Te ha llevado mucho trabajo?
estupendo y maravilloso… felicidades… es simplemente genial un trabajo limpio y puro… impresionante. Enhorabuena
IDOLO!!!
fenomeno!!
me encantan este tipo de trabajos!!!
no me gusta nada flash…
Con esta idea que te tomare hare alguna cosita que otra!
saludos des uruguay!
[…] More info at: http://www.romancortes.com/blog/css-3d-meninas/ […]
Caballero, me descubro ante usted, una vez más.
Y perdón por tener la boca abierta, es que así me has dejado, una vez más.
Gracias
Sólo el hecho de que funcione en IE ya se merece un premio.
[…] Impresionante efecto 3D con solo HTML y CSS […]
Como va el tema de los sprites CSS he mirado rápido el código y no tengo claro como va, si lo explicas saciaràs mi curiosidad, algo se de CSS pero está lejos de mi especialidad.
Aunque si es interesante lo que has hecho.
Gracias.
[…] Funciona en las últimas versiones de los navegadores más usados y valida. via romancortes.com […]
Amazing. A piece of art in its own right. Thank you!
^_^J.
I tried it in Firefox 3.5.5. Its not working.
However i saw the perfect output in google chrome. Its awesome. Nice work!!
mui bien! (pardon me that’s the only spanish i know)
simply awesome. i came here via Japanese blog mentioning your piece of art.
the wall looks so 3D. great job.
More than 2,000 lines of css! Wow.
Más de 2.000 líneas de CSS! Wow.
Gracias
[…] CSS 3D Meninas […]
Write a tutorial and post the code :) Top job :)
impresionante
[…] this out, this is really impressive. Parallax scrolling done entirely in CSS. Look ma, no […]
Greta job
[…] imágenes con distinta perspectiva, pero utilizando sólo lenguaje CSS para hacer la transición: CSS 3D Meninas. Vía Manu Contreras, vía Juan Diego […]
[…] imágenes con distinta perspectiva, pero utilizando sólo lenguaje CSS para hacer la transición: CSS 3D Meninas. Vía Manu Contreras, vía Juan Diego […]
[…] imágenes con distinta perspectiva, pero utilizando sólo lenguaje CSS para hacer la transición: CSS 3D Meninas. Vía Manu Contreras, vía Juan Diego […]
[…] imágenes con distinta perspectiva, pero utilizando sólo lenguaje CSS para hacer la transición: CSS 3D Meninas. Vía Manu Contreras, vía Juan Diego […]
[…] http://www.romancortes.com/blog/css-3d-meninas/ […]
[…] Román Cortés » CSS 3D Meninas 14 de Diciembre del 2009 (tags: css 3d webdesign inspiration cool parallax html) […]
Fantástico!
para ser 100% perfecto tenías que haber aplicado cierto efecto al espejo del fondo de la escena. Lo que se ve reflejado cambia si el observador se mueve ;-)
Simplemente impresionante, genial. A ver si me lo estudio un poco y puedo hacer algo parecido.
Gracias
Hola Román, realmente impresionante lo que hiciste con las Meninas. Escribes más arriba “Si queréis puedo publicar el código, aunque creo que carece bastante de interés…”
Estoy en desacuerdo! Si no te importa divulgar tu método me encantaría ver detalladamente cómo lograste este efecto fenomenal!
Un saludo navideño para ti.
[…] Una ingeniosa y efectiva forma de presentar imágenes con efecto 3Dpresentando varias imágenes con distinta perspectiva, pero utilizando sólo lenguaje CSS para hacer la transición: CSS 3D Meninas. […]
increible. me encanta.
Genial, un trabajo muy fino y original.
Excelente!
Nunca había visto algo así desde CSS
Felicidades por tu trabajo
Bruno
В рот мне ноги o_O