Impresionante efecto 3D en imágenes usando sólo CSS y HTML

#1   ¡¡¡simplemente me ha encantado!!!

#2   Genial, un efecto 3d muy conseguido y con poco peso.

#4   Lo notee esta mañana meneame.net/notame/Elwing/315710
El efecto esta muy logrado.

#5   Joder con los flipaos del CSS...

#6   Por ser un poco puñetero... Deberían moverse los reyes ya que están reflejados en un espejo al fondo de la estancia; y se supone que lo que ven es lo representado en el cuadro, o sea, que según este efecto serían los que se están (estamos) moviendo.

Por lo demás, el efecto está muy bien.

#7   Esta muy bien pero con el truñodsl que tengo me ha tardado dos horas en cargar...

#9   impresionante... hombre quizás no tanto

#10   Impresionante, todo un virtuoso del CSS, sin duda. ¿Cuándo se calificarán estas cosas como arte moderno?

#11   Dios santo...con CSS, parece imposible sinceramente! un 10 para el artista!

#13   Impresionante, no habia visto algo parecido hecho con CSS

#14   #8 De eso nada. Solo la imágen de sprites son 254KB. Tampoco internet te da duros a peseta por mucho que lo parezca.

Y ese es el problema. Como virguería experimental, está francamente bien. ¿Uso práctico? Cero porque tanto con Flash como con Javascript esto posiblemente pese menos o similar y sea sensiblemente mas fácil de toquetear. Y siendo un efecto sin texto, apenas hay justificación práctica para una implementación real. De hecho, lo contrario es cierto: esto de semántico debe tener poco.

#15   #14 Claro que no tiene semántica y hay herramientas que mejoran el rendimiento. Igual que el Pacman que hizo (www.romancortes.com/blog/pacman-css/), que tiene jugabilidad 0 y seguro que en flash es más sencillo, pero lo que hace con CSS me parece sencillamente genial.

#16   Es bonito. Es una currada. Pero poco util. Es la pega de la "programación" que los resultados finales suelen desmerecer mucho el trabajo que hay detrás. Salvo el trabajo gráfico, ese siempre es aplaudido (Si está bien hecho claro), el coder se queda a 2 velas normalmente a la hora de repartir halagos

#17   #14 Yo lo prefiero al Flash, bueno cualquier cosa que el Flash que no me gusta nada(pero es solo una opinión), sobre todo el abuso que se hace. Además de que me parece impresionante el efecto.

#18   Como ya apuntan antes, curioso, currado, impresionante, pero poco práctico.
El código lo podeis ver en ajaxian.com/archives/3dcss (como hacen notar, es para que te "sangren" los ojos al mirarlo ...)
Eso no quita que sea algo impresionante. Un 10 para este señor.

#20   #3 No te hace falta tecla de disparo, ya estas matando el Flash poquito a poco

#21   #20 Pues si poco a poco mataremos el flash y navegar sera mucho mas ligero.
www.genbeta.com/multimedia/effectgames-plataforma-para-crear-juegos-us

Yo entiendo y me da envidia el autor, me encanta jugar con html, css y javascript de vez en cuando. Con bases tan simples se pueden hacer cosas geniales como veis.

#22   Bueno... una cosa es que se pueda hacer, y otra que compense hacerlo... Por la explicación que da parece algo muy factible, aunque lleva un curro de tres pares...

#23   he visto cosas más impresionantes...

#24   Buen efecto y que grande Velazquez.

#25   Impresionante

#23 ¿Cuáles?

#26   Debe ser muy difícil de hacer esto en css, no digo nada porque no lo sé, pero el efecto "3D" (en realidad eso se llama 3D simulado o pseudo 3D, ya que es una composición 2D que altera la perspectiva debido al movimiento de los diferentes planos) está ya muy trillado. Repito, seguro que tiene un mérito tremendo hacerlo en css, pero como yo de css ni papa de eso no opino.

#27   A mí se me da más o menos bien el CSS, pero este hombre hace practicamente magia.

Babeando quedado me he.

#28   Muy bueno. Pero mejor casi no contar el truco, porque entonces te fijas en los sprites y empiezas a ver cartón piedra en lugar de la aparente perspectiva. Pero es cierto que es un buen ejemplo de optimización de recursos y sencillez. Bravo!.

#29   #6 Qué observador

#20 #21 Poquito a poco vamos avanzando. Con HTML5 se matará aún un poquito más

#30   Llamadme loco, pero de impresionante no veo nada. Tal vez para un friki del html... pero para el resto de mortales no, creedme.

#31   Es simplemente un efecto de parallax, no se por que os sorprendéis tanto...

#32   #21 ¿Matarás el flash por ejemplo de youtube? Yo vivo de entre otras cosas de reconvertir flash caro y chapucero en código digamos contemporáneo: bueno, bonito y barato. Me considero un profesional medianamente competente y plenamente alineado con los que en esta profesión intentan hacer las cosas de manera mas o menos racional. Aunque cueste un poco mas, solo por el placer del trabajo bien hecho y poder dormir con la conciencia tranquila.

Pero precisamente por ello tengo muy claro que las tecnologias digitales son herramientas para construir algo mas que la simple suma de ellas. Los experimentos en los bordes de lo posible es lo que hacen avanzar el campo ... pero solo si hay campo detrás. Ensimismarse con el css está muy bien, pero a mi vienen infinitamente mejor inventos como 960, jquery, codeigniter ... o as3.

Con todo el respeto para esta y otras piezas: no son el futuro. Y no lo son porque lo que es válido en un laboratorio o en un taller de arte, si lo sacas TAL CUAL a otro contexto - como por ejemplo el mundo en general - posiblemente no tenga ninguna utilidad práctica en su conjunto. En concreto, que yo sepa la única forma generar este efecto mediante CSS es cazar la posición del puntero a base de crear multitud de enlaces falsos. Esto en el mundo real tiene poco o nada de sentido: con igual o menos código en un bocata de xhtml/css/js se caza la posición del ratón de una forma mucho mas racional, práctica, flexible, moderna, googleable, sostenible, compatible, robusta y un muy largo etc.

Insisto: mi máximo respeto a la obra y el creador. Me dirijo mas bien a sus falsos profetas.

#34   #32 Sí, mataremos al flash de Youtube.
Bueno, yo no mataré a nadie, que no soy un asesino. Lo matará Youtube mismo, como ya ha mostrado ejemplos

Demo de Youtube utilizando HTML5 y sin flash
www.youtube.com/html5

#35   #34 Vamos, que no has leído nada de lo que he escrito. Que el uso del flash está (afortunadamente) en retroceso es claro. Que youtube cimentó para el próximo lustro la necesidad de tener el plug-in de swf instalado en cualquier browser también lo está. Por tercera y última vez en este hilo: los experimentos y la vida real, dos aspectos DISTINTOS del progreso técnico.

#36   Hey, esto está muy guay, pero yo ya hice algo parecido hace muchos meses!!

Y por cierto, lo de que sólo utiliza css...no es del todo cierto. Digamos que utiliza la librería de parallax (que es un js).

Por cierto, podéis ver lo que yo hice aquí:

clubgimnasticsentmenat.com/fotos.html

(en cada una de las cabeceras hay uno hecho de estos)

Espero que us guste también!

#37   #36 El de las meninas es puro css - funciona con el js deshabilitado.

#38   Muy interesante. Aquí hay también un efecto 3D logrado con CSS y HTML; se trata de un slideshow 3D hecho por Gerard Ferrandez:
www.dhteumeuleu.com/dhtml/compo-parallax.html

#39   El efecto es impresionante, no lo voy a negar, pero me da la sensación de que noscript acabará incluyendo el css entre sus opciones.

#40   Au! He querido probarlo con el navegador de Android y... claro, se mueve toda la pantalla

#41   Muy currado, a continuación el código fuente:
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-image: url('meninas_title.jpg');
background-repeat: no-repeat;
overflow: hidden;
}
a
{
float: left;
display: block;
width: 5px;
height: 455px;
text-decoration: none;
}
a span
{
position: absolute;
display: block;
width: 5px;
height: 455px;
z-index: 9999;
font-size: 455px;
line-height: 455px;
overflow: hidden;
cursor: default;
}
a img
{
z-index: -1;
left: 0;
top: 0;
position: absolute;
display: none;
border: 0;
}
a b
{
display: block;
}
a b.d1
{
position: absolute;
left: 0;
top: 0;
display: none;
background-image: url('meninas_bg1.jpg');
}
a b.d2, a b.d3, a b.d4
{
position: absolute;
left: 0;
top: 0;
display: none;
width: 400px;
height: 455px;
background-image: url('meninas_sprites.png');
}
a b.d3
{
top: 224px;
height: 230px;
}
a b.d4
{
width: 300px;
left: 213px;
top: 231px;
height: 98px;
}
a:hover b.d1
{
z-index: -1;
display: block;
width: 200px;
height: 455px;
}
a:hover b.d2
{
z-index: 2;
display: block;
}
a:hover b.d3
{
z-index: 1;
display: block;
}
a:hover b.d4
{
z-index: 0;
display: block;
}
a:hover img
{
display: block;
}
a#a0:hover img {left: 320px}a#a0:hover b.d1 {background-position: 320px 0; width: 320px}a#a0:hover b.d2 {background-position: -440px 18px;}a#a0:hover b.d3 {background-position: 0px -216px; width: 400px}a#a0:hover b.d4 {background-position: 0px -74px;}a#a1:hover img {left: 319px}a#a1:hover b.d1 {background-position: 319px 0; width: 319px}a#a1:hover b.d2 {background-position: -440.1px 18px;}a#a1:hover b.d3 {background-position: -0.333333333333px -216px; width: 399.666666667px}a#a1:hover b.d4 {background-position: -0.666666666667px -74px;}a#a2:hover img {left: 318px}a#a2:hover b.d1 {background-position: 318px 0; width: 318px}a#a2:hover b.d2 {background-position: -440.2px 18px;}a#a2:hover b.d3 {background-position: -0.666666666667px -216px; width: 399.333333333px}a#a2:hover b.d4 {background-position: -1.33333333333px -74px;}a#a3:hover img {left: 317px}a#a3:hover b.d1 {background-position: 317px 0; width: 317px}a#a3:hover b.d2 {background-position: -440.3px   » ver todo el comentario