edición general
149 meneos
9825 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
77 72 0 K 363 tecnología
39 comentarios
77 72 0 K 363 tecnología
Comentarios destacados:        
  2. #2 sinergético
    Un artista con muucho tiempo libre
    1 K 26
  3. #3 --550559--
    #2 Y casi seguro que sin novia.
    3 K 25
  4. #4 --525240--
    #3 en la cabecera del sitio:
    By Diana Smith :-)
    7 K 61
  5. #5 --550559-- *
    #4 :palm: Pues cambio por novio. :shit:
    3 K 25
  6. #6 --525240--
    #5 ¿No estás satisfecho con tu actual? :-D
    8 K 71
  7. #7 solotexto
    No funciona en IE7, por lo tanto, es una bazofia.
    1 K 16
  8. #8 --470744--
    Ha puesto el ventilador de mi ordenador a tope, ni viendo porno.
    2 K 30
  9. #9 Peter086
    Mérito tiene, no me jodas. Yo no podría ni acercarme a eso ni con un saco de rotuladores Carioca.
    0 K 6
  10. NapalMe #10 NapalMe *
    Seria mas interesante ver el script que transforma la imagen vectorial a HTML+CSS
    6 K 49
  11. Wintermutius #11 Wintermutius
    #7 ¿Quién tiene todavía IE7?
    1 K 26
  12. MrRobinson #12 MrRobinson
    Yo sé hacer la cara de tu retrato.
    1 K 13
  13. #13 --204021--
    #2 #3 #4
    Para el que le pueda interesar.

    diana-adrianne.com/
    github.com/cyanharlow
    2 K 35
  15. #15 anje
    Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas:menea.me/jtnm
    1 K 18
  16. #16 anje
    Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas: menea.me/jtnm
    1 K 18
  17. #17 anje
    uppss, estas prisas :palm:
    0 K 6
  18. KimDeal #18 KimDeal
    #10 crees que es trampa entonces...?
    0 K 10
  19. #19 solotexto
    #11 Yo en el curro xD
    0 K 8
  20. #20 --178733--
    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/
    0 K 11
  21. #21 Magicus
    #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.
    3 K 45
  22. apetor #22 apetor
    #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.
    0 K 7
  23. zULu #23 zULu
    #8 Pues que mierda de ordenador no? :-O
    0 K 6
  24. zULu #24 zULu
    #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.
    4 K 23
  25. BastardWolf #25 BastardWolf
    #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
    0 K 7
  26. #26 fransantako
    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??
    0 K 6
  27. #27 Magicus
    #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.
    2 K 16
  28. #28 --470744--
    #23 Es un AMD k6-2
    0 K 9
  30. #30 --173957--
    #4 insinuar que no puede tener novia?
    1 K 17
  32. #32 solotexto
    #31 No verlo en IE7
    0 K 8
  33. #33 --525240--
    #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
    0 K 9
  34. #34 voragine_
    #1 Esta ;)
    0 K 9
  37. NapalMe #37 NapalMe
    #18 Si fuera el caso, que segun #24 no, ¿seria trampa si el script fuera obra suya?
    Yo creo que no.
    0 K 7
  38. #38 --452022--
    Supongo que se hace dándole un tono a cada pixel con muchísima paciencia y un boceto previo... :-S
    0 K 10
  39. zULu #39 zULu
    #28 Pues eso....AMD....ya me lo has dicho todo
    1 K 9
comentarios cerrados

menéame