Sorprende, pero esto no es ninguna foto, es HTML y CSS, nada más. Totalmente programado a mano. Puedes ver el proyecto y el código en: https://github.com/cyanharlow/purecss-francine ¡Alucinante! Eso sí... no lo intentes con el IE7, salvo que quieras ver un Picasso.
#18 No. A mi humilde entender dice justo lo contrario: Que seria aún más valioso si programasen un algoritmo para transformar automáticamente las imágenes a css+html5.
Particularmente, entré al link esperando encontrar una imagen similar a un gif por la falta de degradé, pero me encontré con una definición realmente destacable.
Supongo que la idea de esto no es reemplazar el uso de imágenes por código (lo más probable es que el código pese bastante más que la imagen original) , sino simplemente mostrar la potencia de la herramienta.
#21#10 Quiza sean millones de celdas de tablas de html normales, borderless y con color de fond actuando como pixels, hay tranformadores para hacer esto. Se usa para poner logos en correos y demas, parano tener que usar adjuntos.
#10 Segun su Github lo hace a mano:
Rules I have for myself:
All elements must be typed out by hand
Only Atom text editor and Chrome Developer Tools allowed.
SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.
Me pregunto si lo hizo a pelo o lo convirtió desde una imagen vectorial. Siempre me ha llamado la atención lo que se puede hacer solo con HTML y CSS, como ejemplo CSS Zen Garden, el mismo HTML pero con CSS cambiados, la web se ve completamente diferente.
#20 yo apostaria a que partio de una foto del cuadro y transformo a vectorial. Pero tampoco esque le quite merito, porque despues hay que limpiar muchisima informacion de vectores (y la idea esta chula).
Ayer mismo transforme un logo con demasiada gama de colores y degradados. El calcado dio unos 15000 vectores y pude limpiarlo a 7000.
Se tiene que poder muchisimo mas si es tu campo y pilotas pero no es lo mio (hace unos veinte años de cuando trabaje por ultima vez con Illustrator), y ademas era para imprenta asique no es tan importante que haya muchos vectores sino que mantenga los colores y el degradado
Comentarios
#5 ¿No estás satisfecho con tu actual?
#3 en la cabecera del sitio:
By Diana Smith
#4 Pues cambio por novio.
#2 #3 #4
Para el que le pueda interesar.
http://diana-adrianne.com/
https://github.com/cyanharlow
#13 Gracias, es genial
http://diana-adrianne.com/purecss-zigario/
#13 https://www.linkedin.com/in/dasli/
#4 insinuar que no puede tener novia?
#30 Pues también tienes razón... que me entra la vena de los abuelos y no llego a pensar ciertas cosas como posibles
Seria mas interesante ver el script que transforma la imagen vectorial a HTML+CSS
#10 crees que es trampa entonces...?
#18 No. A mi humilde entender dice justo lo contrario: Que seria aún más valioso si programasen un algoritmo para transformar automáticamente las imágenes a css+html5.
Particularmente, entré al link esperando encontrar una imagen similar a un gif por la falta de degradé, pero me encontré con una definición realmente destacable.
Supongo que la idea de esto no es reemplazar el uso de imágenes por código (lo más probable es que el código pese bastante más que la imagen original) , sino simplemente mostrar la potencia de la herramienta.
#21 #10 Quiza sean millones de celdas de tablas de html normales, borderless y con color de fond actuando como pixels, hay tranformadores para hacer esto. Se usa para poner logos en correos y demas, parano tener que usar adjuntos.
#18 Si fuera el caso, que segun #24 no, ¿seria trampa si el script fuera obra suya?
Yo creo que no.
#10 Segun su Github lo hace a mano:
Rules I have for myself:
All elements must be typed out by hand
Only Atom text editor and Chrome Developer Tools allowed.
SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.
Yo con Mondrian me atrevo, pero lo de este es de pro.
#1 Esta
Ha puesto el ventilador de mi ordenador a tope, ni viendo porno.
#8 Pues que mierda de ordenador no?
#23 Es un AMD k6-2
#28 Pues eso....AMD....ya me lo has dicho todo
Un artista con muucho tiempo libre
#2 Y casi seguro que sin novia.
Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas:http://menea.me/jtnm
Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas: http://menea.me/jtnm
svg 2 css?
https://websemantics.uk/tools/svg-to-background-image-conversion/
No funciona en IE7, por lo tanto, es una bazofia.
#7 ¿Quién tiene todavía IE7?
#11 Yo en el curro
#7 ¿Qué es una bazofia?, ¿El IE7 o la imagen con HTML y CSS?
#31 No verlo en IE7
#32 Aquí está
Yo sé hacer la cara de tu retrato.
Me pregunto si lo hizo a pelo o lo convirtió desde una imagen vectorial. Siempre me ha llamado la atención lo que se puede hacer solo con HTML y CSS, como ejemplo CSS Zen Garden, el mismo HTML pero con CSS cambiados, la web se ve completamente diferente.
http://www.csszengarden.com/
#20 yo apostaria a que partio de una foto del cuadro y transformo a vectorial. Pero tampoco esque le quite merito, porque despues hay que limpiar muchisima informacion de vectores (y la idea esta chula).
Ayer mismo transforme un logo con demasiada gama de colores y degradados. El calcado dio unos 15000 vectores y pude limpiarlo a 7000.
Se tiene que poder muchisimo mas si es tu campo y pilotas pero no es lo mio (hace unos veinte años de cuando trabaje por ultima vez con Illustrator), y ademas era para imprenta asique no es tan importante que haya muchos vectores sino que mantenga los colores y el degradado
Supongo que se hace dándole un tono a cada pixel con muchísima paciencia y un boceto previo...
uppss, estas prisas
Mérito tiene, no me jodas. Yo no podría ni acercarme a eso ni con un saco de rotuladores Carioca.
Si picais en la web con boton derecho del raton, sale la opcion de ver el codigo fuente de la web, supongo que lo sabiais, no??
#26 La duda no es como es el código, sino como llego a él; si escribiendo de cero pixel a pixel o automatizando la tarea con algún método/script.