"30 especies 30 piezas" es un increíble proyecto realizado en CSS por un diseñador independiente. Sorprende el trabajo y resulta mucho más sorprendente si tienes alguna noción de css.
Portada
mis comunidades
otras secciones
Comentarios
pues yo no le veo lo espectacular....
#6 Nop, CSS a pelo.
#7 Hombre, si te dedicas a esto te aseguro yo que sí que es espectacular. Vamos, que en una semana la web ha dado la vuelta al mundo y seguramente al creador le estarán ofreciendo cientos de miles de dólares anuales por contar con sus servicios. Así de espectacular es.
#4 y #9 me había parecido extraño, pero veo que ya ha llegado a portada!
#10 Yo también creo que se lo ha currado mucho y le dará sus frutos!
#10 Si, envidia que le tengo. Yo SÍ sé lo difícil que es eso que ha hecho. Para la gente de la "calle" son dibujitos que se mueven pero que se ven muy mal, sin detalle, con cuadros muy gordos, sin mérito.
#10 joe, si lo que quiero es que me expliqueis porque es tan molona, que me dais envidia......
#10 A ver es un coñazo supremo lo que ha hecho, pero de ahí a decir que es espectacular y que le estarán ofreciendo miles de dolares... no tiene una dificultad para tanto. Y si lo tiene, por favor ofrecédmelo a mi jajaja
#47 Ya te digo, el tío ha sido noticia en todo el mundo. A los diseñadores y desarrolladores más cracks del planeta se les cae la baba con la web. Y el colega no es ningún mindundi, tiene premios a montones. Si tú eres capaz de hacer esas cosas y no estás ganando mínimo 150k al año, muévete un poquito, que se van a pelear por ti. Pero vamos, ya te digo yo que tú no eres capaz de hacer algo parecido no en sueños, porque si no no estarías diciendo lo que dices.
#58 está dando la vuelta al mundo porque es de lo más vistoso que se ha hecho nunca en CSS, y admito que para mí sería una locura hacerlo. También te digo que profesionalmente nunca me he visto en la necesidad de hacer algo parecido (ojo, no me considero ni diseñador) sobre todo porque no tendría sentido. Pero cualquiera que haya hecho algo mínimamente vistoso en CSS ha utilizado
webkitanimation/transition, ha dibujado polígonos, etc, ergo tecnicamente puede hacer lo que ha hecho este tipo. La idea, la calidad final, etc, no es cuestionable. Sólo digo que parece que estemos frente a un genio... y no.#10: Lo he visto en Firefox y he pensado que era una pasada. Pero cuando lo he abierto con Chrome...
#7 #10 en ensamblador si que sería asombroso
A todo esto, desconozco como se trabaja actualmente con CSS, pero entiendo que tiene que haber ahora mismo herramientas bastante potentas para que hacer esos dibujos no sea un infierno de picar código "sin sentido"
#6 #7 En la misma web explica, nada de Canvas, nada de WebGL. CSS a pelo con CSS polygons. Ahi está el asombro. Mucho talento el chaval.
Otra obra suya: http://www.amplifon.co.uk/emotions-of-sound.html
#12 ¿Talento? Ya son ganas de reinventar la rueda, mas bien.
¡Espectacular!
Para los legos
Hacen un bonito fondo de pantalla
Para los legos, ¿qué significa a pelo con CSS?
¿Crea los animales picando código?
#16 Muy grosso modo, sí, picando código En resumen, utiliza una atributo CSS de los navegadores que usan webkit para pintar cada uno de los polígonos con los que están hechos los animales. Esto implica escribir las propiedades de cada polígono de cada uno de los animales y las transiciones que hay entre ellos. Al ser sólo de webkit, es necesario verlo en chrome, safari o el móvil para contemplarlo en todo su esplendor. Si entras con otro navegador vas a ver una imagen y punto.
En el footer de la web hay un enlace titulado "How its made" donde explica más detalladamente cómo lo ha hecho.
#19 Es un poco más complejo que eso
#20 Pues lo estoy viendo desde firefox...sera por eso... por cierto... ¿CSS pinta poligonos? que raro... voy a ver...
#21 Que yo sepa solo los coge, los transforma (rotación, escalado, translación), y los pinta. Los polígonitos en si pueden ser svg (aunque he visto hacer cosas muy chulas con divs rectangulares con las propiedades de sombra y redondeo de bordes, con triángulos aún no he visto nada). Ahora que he visto cómo lo hace, realmente lo que hace es recortar un área usando una forma dada (o sea, recorta triangulitos, pero los recorta sobre divs rellenos del color de fondo X) y los anima con transiciones y transformaciones css estándar. Las animaciones solo funcionan en chrome porque es una extensión propia, firefox maneja las cosas de otro modo porque lo que se usa no es estándar.
#42: Las animaciones solo funcionan en chrome porque es una extensión propia, firefox maneja las cosas de otro modo porque lo que se usa no es estándar.
¿Porque no es estándar, porque cada uno hace su estándar, porque lo de Chrome es el estándar o porque Chrome tiene más popularidad y se ha quedado como estándar? #QueremoDeSabé
#68 Porque la cosa va así: Desarrollas una funcionalidad molona, se la presentas al W3C, estos comprueban la molonidad de tu implementación, las otras posibles implementaciones, lo presentan como borrador, cada otro navegador hace sus apuntes y al final entre todos crean un nuevo estándar o adoptan una implementación existente. Mientras se define ese nuevo estándar para todos o mientras ponen a prueba su propia implementación, normalmente los navegadores hacen uso de esas "extensiones" nombrándolas como
webkitloquesea,msloquesea,mozloquesea, etc.O sea, no es como anteriormente, donde tu cogías un estándar y desarrollabas modificaciones molonas que lo incompatibilizaban con lo que había antes y que hacían que arrastraras a todo el mundo a usar tu versión (por un lado haciéndote el único navegador donde X funciona y por otro lado haciendo que los demás fallen, aún teniendo una implementación correcta del estándar). Ahora desarrollar usando algo nuevo que haya sacado el navegador X puede suponer que cuando se termine estandarizando ya no te funcione porque se hayan cambiado detalles de la implementación, aunque es posible que durante un tiempo puedas usar la versión con prefijo además de la sin prefijo siguiendo el estándar.
En este caso concreto, la adopción del estándar va algo así:
http://caniuse.com/#search=clip-path
http://caniuse.com/#search=polygon
En el texto de cómo se hizo se hace alusión a que firefox soporta plenamente clip-path, pero que a la hora de referenciar los recortes lo hace como si fueran elementos svg, lo que hace que la forma de animar los elementos sea diferente a si los tratara como si fueran elementos css normales y que por eso no funciona ahí. Imagino que según madure el estándar se irá corrigiendo la implementación.
#73: Gracias, muy bien explicado.
#20 Gracias, había entrado con firefox y no se apreciaba la animación. Con Chrome ya es otra cosa
#20 y por qué esa manera de complicarse la vida, habiendo programas que lo hacen en dos patadas?. Los creativos son creativos, y si un programa complica tanto hacer unos triangulitos, no compensa. Pero vamos, que si estaba aburrido, y tenía tiempo, pues vale.
¿266 clics y 14 meneos? No me creo que a 252 personas no les haya gustado...
#2 De que te guste a que menees hay un trecho...
#2 O tienes a 252 personas embobadas navegando el link.
#63 Es tan ridículo como si me pones un lienzo en blanco con dos pinceladas y me dices que donde se ponen 2 se ponen los que sean para asemejarse a un cuadro de Dalí.
#64 ¿Lo comparas con un Dalí? ¿Estamos viendo la misma web? ¿Animalitos dibujados usando 30 triangulos?
Que si, están currados, pero no hace falta ser Dalí para hacerlo, de todas maneras, mi critica no es sobre la web, es sobre la exagerada reaccion de algunos, "¡fantastico!" "¡Espectacular!" "¡maravilloso!", pues no, no hay para tanto.
#65 ...en fin. No lo comparo con un Dalí, comprensión lectora: 0. No es dar pinceladas, es tener la idea y cómo llevarla a cabo.
Lo de esta web es un trabajo ORIGINAL fantástico, no solo por esfuerzo y paciencia, sino por cómo lo ha realizado y el resultado.
Donde tú solo ves coordenadas y triangulitos colocados, este tío ha sabido darle la vuelta para representar algo de una forma muy original, y no hay más.
#67 Bah, lo dejo, simplemente tenemos un concepto de "original" distinto, yo no creo que sea original algo que me he hartado de ver desde el 91.
Es cierto que lo original es usar CSS para pintar los triangulitos, habiendo herramientas especificas para ello como svg o canvas, pero como experimento es curioso, lo que no cuela es que sea difícil, por cierto, mi ejemplo funciona en cualquier navegador que soporte transiciones CSS, y no solo chrome, ah, y a esas animaciones tan curradas, a veces se le separan los poligonos, pero nada, que ese tío es un genio, que voy a saber yo.
Buenas noches.
#69
¡¡Buenas noches!!
Cada animalito tiene un video, que están guapos también:
Es brutal, aunque no fuera CSS y tan solo fuera un ejercicio de diseño y motion ya tendría su mérito. De 10
Esta noticia la metes en cualquier periodico y todo el mundo se queda loco
.
Cosas asi solo tienen cabida en mename. Aunque es interesante votaria irrelevante porque es una noticia para colegas informáticos, no para el publico en general.
Pero no puedo votar, pues aqui como des tu opinion y no cuaje con los lideres, en menos que canta un gallo te van quitando privilegios.
Me encanta esa contradicción que tiene meneame acerca de la libertad y democracia, contrasta totalmente con lo que hace.
#77 Como que no hace años ni nada que se hacen los graficos a partir de triangulos...o como si hacerlo en CSS fuera código máquina haciendo el pino y habiendose dejado los 1 en casa.
¿Mola? Sí, no lo discuto, ¿es "!Espectacular!" "Fantástico" " Impresionante"? Pues no tanto.
¿Que esa persona es una buena diseñadora? Es indiscutible.
#78 Bueno, pues esa es tu opinión, muy respetable ella. No tengo intención de cambiártela, faltaría más, pero la mía es que es una obra maestra del CSS y una de las mejores webs del año sin duda. Estoy seguro al 100% de que se llevará un chorro de premios.
#79 "Estoy seguro al 100% de que se llevará un chorro de premios."
Pues mira, no me extrañaria.
#79 Estaba recordando donde vi ya la animación de un cuervo... una demo para AMIGA.
Esos si se merecen premios.
Impresionante
Solo por tener un anuncio tan grande para que descargues Google Chrome sería motivo de votar negativo, pero me he abstenido, pues el resultado merece realmente la pena y, sí, es bonito además de abogar por un espíritu ecologista que no viene mal en nuestros días. Confirmo que en Firefox funciona (bueno, Iceweasel en mi caso) pero desactivando Adblock Edge, al igual que #26 con uBlock.
#49 ¿3D? Tendré que fijarme bien, yo veo una animación 2D... y que no sea normal hacer animaciones... no se que decirte, tiene comandos para ello... con un simple "transition"
#52 ¿de verdad no "ves" (interpretas) figuras 3D?
Ah, claro, cómo va interpretar tu cerebro que es 3D si un ojo sólo ve en dos dimensiones... pfffff
#54 Queda claro que tenemos conceptos distintos de 3D.
#57 Un triángulo o una letra es una figura 2D
Dibujos como Mickey Mouse es básicamente 2D aunque puede tener pequeñas sensaciones espaciales de profundidad, altura... pero quitando eso es básicamente 2D.
Sin embargo, varios triángulos colocados tal como se vería una figura 3D proyectada en el ojo y, además, coloreados tal como se verían en un objeto 3D iluminado... eso es claramente 3D. Toy Story es 3D de toda la vida... aunque lo veas sin gafas estereoscópicas y en pantalla 2D, lo que se ve y lo que interpreta tu cerebro son formas 3D perfectamente definidas en profundidad e iluminación.
Fantástico!
Parecen sacados de "Another World"
https://www.google.es/search?q=another+world
Se crearán más bien con el canvas de HTML5, no?
#53 Cualquiera que haya tocado, no digo ya en profundidad, algo de HTML5 y CSS sabe lo jodido que es hacer algo así. Aunque detrás del teclado hay eruditos hasta debajo de las piedras
#55 poner triangulitos y animarlos pintando usando css, chunguisimo vamos:
.t
setInterval(function() id2.style.transform="skew(0deg,20deg)";
id1.style.top="20px";
id2.style.top="20px";
id1.style.borderBottomColor="salmon";
id2.style.borderBottomColor="salmon";
setTimeout(function(){
id1.style.transform="skew(0deg,0deg)";
id2.style.transform="skew(0deg,0deg)";
id1.style.top="0px";
id2.style.top="0px";
id1.style.borderBottomColor="orange";
id2.style.borderBottomColor="orange";
">,500);
},500);
},1000);
#61 Te lo pongo así, para que todos sean capaces de ver tu gran obra: https://jsfiddle.net/05kL1mod/
Te ha quedao igual.
#62 No, no me ha quedado igual, son solo 2 triangulos, pero donde se ponen 2 se ponen 50 y si, seria igual, no tengo ganas de calcular coordenadas.
#61 ¿Dices que te has puesto a mirar el código y vienes con eso? Ni usa bordes para hacer los triángulos, ni los anima con js
#74 No, estoy diciendo que aqui la gente exagera, que los graficos estan muy bién pero no hay para tanto ni es tan dificil, lo mio era un ejemplo.
Mira los primeros comentarios de flipe general, parece que iban emporrados cuando vieron la animación del cuervo.
#76 Yo soy de los que, según tú, exagera
Mmmmm, es extraño que solo se pueda ver con webkit (google Chrome) y que además el diseño eche mucho tufillo a Material Design (Google). ¿No será publicidad encubierta? Por lo demás: Es una pasada!
Aunque es bonito, ¿No es microblogging?
No hay gato, no hay meneo.
#28 No discuto que sea bello, pero no hace falta exagerar.
Fantástico trabajo.
¿cual es el nombre del tema musical de fondo del sitio?
Ui si, dibujar con triángulos, que novedad...que emoción...
Lo que sea CSS... será juntando 'divs', rotandolos y modificando los bordes y tal...
edit, vaaaya por dios, buscando el código me he encontrado con imagenes normales...
http://species-in-pieces.com/img/fallbacks/fallback_turtle.png
#19 ¿Tal vez las imágenes que has encontrado son las que carga en caso de usar un navegador que no usa webkit? Por cierto, con una actitud como la tuya, casi cualquier cosa pierde todo su encanto
#22 Si, cierto, ahora estoy "intentando" cargarlo desde un chrome...lleva 1 minuto dando vueltas...
No es la actitud, es haber jugado al virtual race o al flashback en el 1992, es muy triste que la gente no tenga criterio.
#25 ui, con el ublock no rula, que cosas...
#25 En el 92 era un recurso gráfico necesario y precioso, hoy es un recurso gráfico opcional e igualmente bello. Pero ya sabes, para gustos colores.
#19 Eh, si leyeras un poco no parecerías un bocazas.
#24 Sabrás tu lo que leo.
#19 Uy dibujar con pinceles, que novedad... ahí juntando pinceladas de colores, se creerá muy original el Van Gogh ese.
#36 ¿Tu te asombras de que un cuadro esté hecho con pincel? Porque aquí se asombran que este hecho con triángulos...
#37
El pincel es la forma normal de pintar... así que no produce asombro.
Pero el CSS NO es la forma normal de hacer una figura 3D y menos que sea animada. Menos normal aún, que en lugar de hacer una haya hecho 30.
Esa es la diferencia y eso es lo que produce asombro.
#19 'Juntar divs, rotarlos, modificar bordes'... se nota que nunca has tenido que hacer nada de eso.
Una cosa es saber estructurar una web... y otra es hacer arte con esos conocimientos.
#51 Sabras tu lo que he hecho o he dejado de hacer
Y esta gente, que tiene tiempo y talento, no podrían usarlo para algo más productivo o interesante que poner cachondos a unos cuantos frikis como vosotros con una puta mierda de dibujos cubistas hechos por ordenador?
#23 ERES MARICON
#31
El #30 sí que es un troll
#30
cc #35 #31
#23
(ahhh qué ganas tenía de poderlo usar#31
Es cojonudo, pero hablo en serio, no pretendo trollear.
#23 Claro, podrían usar su tiempo y talento para comentar en Meneáme, como tú.
VOY A HACERME UNA PAJA POR DETRÁS DEL CULO
#29 ¿Como se hace eso?