EDICIóN GENERAL
632 meneos
 

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

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

| etiquetas: 3d , html , css , imágenes
276 356 1 K 608 mnm
276 356 1 K 608 mnm
¡¡¡simplemente me ha encantado!!!
Genial, un efecto 3d muy conseguido y con poco peso.
¿Cuál es la tecla de disparo? :-D
#3 No te hace falta tecla de disparo, ya estas matando el Flash poquito a poco xD
#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.
#6 Qué observador :-D

#20 #21 Poquito a poco vamos avanzando. Con HTML5 se matará aún un poquito más
#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…   » ver todo el comentario
#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
#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.
Lo notee esta mañana :-) meneame.net/notame/Elwing/315710
El efecto esta muy logrado.
Joder con los flipaos del CSS... :-S
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.
Esta muy bien pero con el truñodsl que tengo me ha tardado dos horas en cargar...
#7 el peso total de la página (HTML + imágenes + scripts...) es tan solo de 51 KB
#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.
#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.
#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.
impresionante... hombre quizás no tanto
Impresionante, todo un virtuoso del CSS, sin duda. ¿Cuándo se calificarán estas cosas como arte moderno?
Dios santo...con CSS, parece imposible sinceramente! un 10 para el artista!
Impresionante, no habia visto algo parecido hecho con CSS
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 xD
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.
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...
he visto cosas más impresionantes...
Impresionante

#23 ¿Cuáles?
Buen efecto y que grande Velazquez.
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.
A mí se me da más o menos bien el CSS, pero este hombre hace practicamente magia.

Babeando quedado me he.
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!.
Llamadme loco, pero de impresionante no veo nada. Tal vez para un friki del html... pero para el resto de mortales no, creedme.
Es simplemente un efecto de parallax, no se por que os sorprendéis tanto...
Hey, esto está muy guay, pero yo ya hice algo parecido hace muchos meses!! :-P

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!
#36 El de las meninas es puro css - funciona con el js deshabilitado.
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
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.
Au! He querido probarlo con el navegador de Android y... claro, se mueve toda la pantalla :-(
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;…   » ver todo el comentario
comentarios cerrados

menéame