Hace 14 años | Por corso a romancortes.com
Publicado hace 14 años por corso a romancortes.com

Como reza el título atentos a los impresionantes efectos 3D que se pueden conseguir usando tan solo CSS, HTML e imágenes. Vía:@wwwhatsnew

Comentarios

M

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

Narf

#20 Pues si poco a poco mataremos el flash y navegar sera mucho mas ligero.
http://www.genbeta.com/multimedia/effectgames-plataforma-para-crear-juegos-usando-javascript-y-html5

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.

a

#6 Qué observador

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

perico_de_los_palotes

#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.

a

#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

perico_de_los_palotes

#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.

D

Lo notee esta mañana @0
El efecto esta muy logrado.

derecks

¡¡¡simplemente me ha encantado!!!

D

Lo que seria la polla seria que tambien fuera de arriba a abjao lol

Muy currado, si señor

D

Curioso. No sé si muy útil o práctico, pero desde luego curioso.

MrGreit

#14 Claro que no tiene semántica y hay herramientas que mejoran el rendimiento. Igual que el Pacman que hizo (http://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.

J

Como ya apuntan antes, curioso, currado, impresionante, pero poco práctico.
El código lo podeis ver en http://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.

A

Buen efecto y que grande Velazquez.

Lidenbrock

#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.

Giova

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...

D

Impresionante, no habia visto algo parecido hecho con CSS

GuL

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 lol

tuseeketh

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

D

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.

D

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

Babeando quedado me he.

q

impresionante... hombre quizás no tanto

s

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

D

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

D

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!.

D
hiroko

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

D

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

Pilfer

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.

peloxi

Muy currado, a continuación el código fuente:

body

a

a span

a img

a b

a b.d1

a b.d2, a b.d3, a b.d4

a b.d3

a b.d4

a:hover b.d1

a:hover b.d2

a:hover b.d3

a:hover b.d4

a:hover img

a#a0:hover img a#a0:hover b.d1 a#a0:hover b.d2 a#a0:hover b.d3 a#a0:hover b.d4 a#a1:hover img a#a1:hover b.d1 a#a1:hover b.d2 a#a1:hover b.d3 a#a1:hover b.d4 a#a2:hover img a#a2:hover b.d1 a#a2:hover b.d2 a#a2:hover b.d3 a#a2:hover b.d4 a#a3:hover img a#a3:hover b.d1 a#a3:hover b.d2 a#a3:hover b.d3 a#a3:hover b.d4 a#a4:hover img a#a4:hover b.d1 a#a4:hover b.d2 a#a4:hover b.d3 a#a4:hover b.d4 a#a5:hover img a#a5:hover b.d1 a#a5:hover b.d2 a#a5:hover b.d3 a#a5:hover b.d4 a#a6:hover img a#a6:hover b.d1 a#a6:hover b.d2 a#a6:hover b.d3 a#a6:hover b.d4 a#a7:hover img
a#a7:hover b.d1 a#a7:hover b.d2 a#a7:hover b.d3 a#a7:hover b.d4 a#a8:hover img a#a8:hover b.d1 a#a8:hover b.d2 a#a8:hover b.d3 a#a8:hover b.d4 a#a9:hover img a#a9:hover b.d1 a#a9:hover b.d2 a#a9:hover b.d3 a#a9:hover b.d4 a#a10:hover img a#a10:hover b.d1 a#a10:hover b.d2 a#a10:hover b.d3 a#a10:hover b.d4 a#a11:hover img a#a11:hover b.d1 a#a11:hover b.d2 a#a11:hover b.d3 a#a11:hover b.d4 a#a12:hover img a#a12:hover b.d1
a#a12:hover b.d2 a#a12:hover b.d3 a#a12:hover b.d4 a#a13:hover img a#a13:hover b.d1 a#a13:hover b.d2 a#a13:hover b.d3 a#a13:hover b.d4 a#a14:hover img a#a14:hover b.d1 a#a14:hover b.d2 a#a14:hover b.d3 a#a14:hover b.d4 a#a15:hover img a#a15:hover b.d1 a#a15:hover b.d2 a#a15:hover b.d3 a#a15:hover b.d4 a#a16:hover img a#a16:hover b.d1 a#a16:hover b.d2 a#a16:hover b.d3 a#a16:hover b.d4 a#a17:hover img a#a17:hover b.d1 a#a17:hover b.d2 a#a17:hover b.d3 a#a17:hover b.d4 a#a18:hover img a#a18:hover b.d1 a#a18:hover b.d2 a#a18:hover b.d3 a#a18:hover b.d4 a#a19:hover img a#a19:hover b.d1 a#a19:hover b.d2 a#a19:hover b.d3 a#a19:hover b.d4 a#a20:hover img a#a20:hover b.d1 a#a20:hover b.d2 a#a20:hover b.d3 a#a20:hover b.d4 a#a21:hover img a#a21:hover b.d1
a#a21:hover b.d2 a#a21:hover b.d3 a#a21:hover b.d4 a#a22:hover img a#a22:hover b.d1 a#a22:hover b.d2 a#a22:hover b.d3 a#a22:hover b.d4 a#a23:hover img a#a23:hover b.d1 a#a23:hover b.d2 a#a23:hover b.d3 a#a23:hover b.d4 a#a24:hover img a#a24:hover b.d1 a#a24:hover b.d2 a#a24:hover b.d3 a#a24:hover b.d4 a#a25:hover img a#a25:hover b.d1 a#a25:hover b.d2 a#a25:hover b.d3 a#a25:hover b.d4 a#a26:hover img a#a26:hover b.d1 a#a26:hover b.d2 a#a26:hover b.d3 a#a26:hover b.d4 a#a27:hover img a#a27:hover b.d1 a#a27:hover b.d2 a#a27:hover b.d3 a#a27:hover b.d4 a#a28:hover img a#a28:hover b.d1 a#a28:hover b.d2 a#a28:hover b.d3 a#a28:hover b.d4 a#a29:hover img a#a29:hover b.d1 a#a29:hover b.d2 a#a29:hover b.d3 a#a29:hover b.d4 a#a30:hover img a#a30:hover b.d1 {bac

albert1903

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í:

http://clubgimnasticsentmenat.com/fotos.html

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

Espero que us guste también!

perico_de_los_palotes

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

k

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

u

he visto cosas más impresionantes...

x

Impresionante

#23 ¿Cuáles?

DIz

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

perico_de_los_palotes

#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.