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
  1. #6 --525240--
    #5 ¿No estás satisfecho con tu actual? :-D
    8 K 71
  2. #4 --525240--
    #3 en la cabecera del sitio:
    By Diana Smith :-)
    7 K 61
  3. NapalMe #10 NapalMe *
    Seria mas interesante ver el script que transforma la imagen vectorial a HTML+CSS
    6 K 49
  5. #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
  6. #13 --204021--
    #2 #3 #4
    Para el que le pueda interesar.

    diana-adrianne.com/
    github.com/cyanharlow
    2 K 35
  7. #8 --470744--
    Ha puesto el ventilador de mi ordenador a tope, ni viendo porno.
    2 K 30
  8. #2 sinergético
    Un artista con muucho tiempo libre
    1 K 26
  9. Wintermutius #11 Wintermutius
    #7 ¿Quién tiene todavía IE7?
    1 K 26
  10. #3 --550559--
    #2 Y casi seguro que sin novia.
    3 K 25
  11. #5 --550559-- *
    #4 :palm: Pues cambio por novio. :shit:
    3 K 25
  12. 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
  13. #15 anje
    Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas:menea.me/jtnm
    1 K 18
  14. #16 anje
    Esto me recuerda hace 8 años esta imagen de Firefox hecho en canvas: menea.me/jtnm
    1 K 18
  15. #30 --173957--
    #4 insinuar que no puede tener novia?
    1 K 17
  16. #7 solotexto
    No funciona en IE7, por lo tanto, es una bazofia.
    1 K 16
  17. #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
  19. MrRobinson #12 MrRobinson
    Yo sé hacer la cara de tu retrato.
    1 K 13
  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. KimDeal #18 KimDeal
    #10 crees que es trampa entonces...?
    0 K 10
  24. #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
  26. #28 --470744--
    #23 Es un AMD k6-2
    0 K 9
  27. #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
  28. #34 voragine_
    #1 Esta ;)
    0 K 9
  29. zULu #39 zULu
    #28 Pues eso....AMD....ya me lo has dicho todo
    1 K 9
  30. #19 solotexto
    #11 Yo en el curro xD
    0 K 8
  31. #32 solotexto
    #31 No verlo en IE7
    0 K 8
  32. 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
  33. 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
  34. 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
  35. #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
  36. #17 anje
    uppss, estas prisas :palm:
    0 K 6
  37. zULu #23 zULu
    #8 Pues que mierda de ordenador no? :-O
    0 K 6
  38. #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
comentarios cerrados

menéame