EDICIóN GENERAL
149 meneos
9767 clics

Pintura estilo siglo XVIII, sin imágenes, sólo HTML y CSS  

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: github.com/cyanharlow/purecss-francine :-O ¡Alucinante! Eso sí... no lo intentes con el IE7, salvo que quieras ver un Picasso. xD

| etiquetas: css , html , diseño web
Yo con Mondrian me atrevo, pero lo de este es de pro.
Un artista con muucho tiempo libre
#2 Y casi seguro que sin novia.
#3 en la cabecera del sitio:
By Diana Smith :-)
#4 :palm: Pues cambio por novio. :shit:
#5 ¿No estás satisfecho con tu actual? :-D
#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 :-D
No funciona en IE7, por lo tanto, es una bazofia.
#7 ¿Quién tiene todavía IE7?
#11 Yo en el curro xD
#7 ¿Qué es una bazofia?, ¿El IE7 o la imagen con HTML y CSS?
#31 No verlo en IE7
#32 Aquí está  media
Ha puesto el ventilador de mi ordenador a tope, ni viendo porno.
#8 Pues que mierda de ordenador no? :-O
#23 Es un AMD k6-2
#28 Pues eso....AMD....ya me lo has dicho todo
Mérito tiene, no me jodas. Yo no podría ni acercarme a eso ni con un saco de rotuladores Carioca.
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 sé hacer la cara de tu retrato.
Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas:menea.me/jtnm
Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas: menea.me/jtnm
uppss, estas prisas :palm:
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.

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
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.
Supongo que se hace dándole un tono a cada pixel con muchísima paciencia y un boceto previo... :-S

menéame