Un retrato de Marge Simpson con 1.000 líneas de código

Las páginas web que visitas a diario tienen unos colores y unas tipografías a los que te has habituado. Te sientes como en casa porque hay algo familiar: el aspecto exterior, el look, el diseño... Pero nunca te planteas quién lo ha elegido y cómo lo ha plasmado en el lienzo de las tres uve dobles, ¿verdad? Si las hojas de estilo y el lenguaje CSS son para ti completos desconocidos, estos retratos de Homer, Bart, Lisa y el resto de personajes de Los Simpson te abrirán los ojos.

[#1 conversador]

Noticia chulisima para los que nos gusta el diseño web

[#2 igorymi]

#1 y curiosa para los que lo desconocemos.

[#5 DaniTC]

#4 Pues echa un vistazo a la imagen. Firefox 30 izquierda y Chromium 35.0.1916.153 en la derecha.

[#20 zastiu]

En Internet Explorer: Yo me llamo Ralph

[#23 Desactivado]

Mi humilde aportación al CSS Drawing:
http://www.neoon.es/labs/spongebob/
http://www.neoon.es/labs/mazingerz/

[#17 pollo]

#12 O con SVG, que es para este tipo de cosas. Hacerlo con CSS es por la tontería imagino, pero usarlo en la práctica es una chapuza. Como introducción al CSS es una mala recomendación.

[#12 Desactivado]

Tsk... que ganas, con Canvas no tardas nada, y el navegador no se muere al renderizarlo.

[#13 centelleante]

#12 Ya ves. Mucho Simpson pero para centrar fácilmente elementos horizontal y verticalmente todavía parece que estamos en 1999...

[#18 Desactivado]

Buah, creo que a todos los que conocemos el célebre método Lombardo esto no nos soprende

[#3 DaniTC]

Tiene un pequeño fallo Marge en el cuello, pero es muy chulo el proyecto.

Tampoco salen bien las imágenes en Firefox, solo en Chrome.

[#11 eduardor2k]

Para mi el renderizado de los simposon debería ser el nuevo test acid

[#21 Hanxxs]

¿Alguien lo ha probado en IE8?

[#8 matacca]

Para que luego despotriquéis de Explorer: en Windows Phone (Explorer 11) se ve perfecto.

editado:

Rectifico. Tiene los mismos errores que Firefox.

[#10 matacca]

#9 Como mucho al mismo nivel que si fuera de Firefox.

[#24 Nova6K0]

#23 Ya sólo por Mazinger Z, tienen un positivo, pero muy currado.

Los de la noticia también, menudos cracks del diseño y la programación estáis hechos algunos y lo digo de verdad, por su puesto.

Salu2

[#26 provotector]

interesante.

[#9 Desactivado]

#8 ¿Ahora tenemos que despotricar?

[#19 sieteymedio]

#5 En versiones antiguas de Chrome (24) se ve igual que en Firefox

[#4 Desactivado]

#3 Yo estoy viéndolo (y flipándolo) en Firefox sin problemas.

[#6 Desactivado]

#5 Cierto... No había reparado en los pequeños fallos...

[#7 luffyD]

Impresionante

[#14 Mike_Zgz]

Esto con Dreamweaver se hace en 2 minutos

[#15 Desactivado]

#3 En firefox lo veo ok. Supongo que tendrás que actualizar tu versión para ver las cosas correctametne.

[#22 niquelao]

#21 Yo lo he probado, y llegas a entender mejor como se ha hecho porque se ve todo cuadriculado, ya que explorer no soporta el border-radius (aunque se puede hacer con técnicas de .htc).

Estudiando a Bart, por ejemplo no me parece tan difícil calculo que cada personaje lleva un día largo de lluvia en casa, una vez se le coja el truco. 1000 líneas no es nada, no indica su dificultad.


Flipando. Gran ejericio para el firebug. Es más asombroso el ingenio del uso no estándar de css que su dificultad.

Homer y Krusty los destroza por ejemplo, pero el resto hasta tiene cierto aire.

[#25 figus_black]

¿Que merito tiene esto mas allá de echarle horas a algo que se puede hacer de forma mas sencilla usando herramientas ya creadas?

El merito basado en cabezonería nunca me ha atraído.

[#27 DavidLopezdlive]

Y por que cojones en vez de ejecutar el codigo lo ponen con imagenes? habeis examinado el codigo de esa web? son JPG... U_u

[#16 aldur]

Soy especial!

#ralph-wiggum *


#ralph-wiggum


#ralph-wiggum .head *
#110b00;
">

#ralph-wiggum .head .no-border


#ralph-wiggum .head .body
#fbd800;
">

#ralph-wiggum .head .hair


#ralph-wiggum .head .hair-left


#ralph-wiggum .head .hair-right


#ralph-wiggum .head .hair1


#ralph-wiggum .head .hair2


#ralph-wiggum .head .hair3


#ralph-wiggum .head .hair4


#ralph-wiggum .head .hair5


#ralph-wiggum .head .hair6


#ralph-wiggum .head .hair7


#ralph-wiggum .head .hair8


#ralph-wiggum .head .hair9


#ralph-wiggum .head .hair10


#ralph-wiggum .head .hair11


#ralph-wiggum .head .hair12


#ralph-wiggum .head .head1


#ralph-wiggum .head .head2


#ralph-wiggum .head .ear


#ralph-wiggum .head .ear .inner1


#ralph-wiggum .head .ear .inner2


#ralph-wiggum .head .ear .clip


#ralph-wiggum .head .eye
#ffffff;
webkitborder-radius: 50%;
mozborder-radius: 50%;
border-radius: 50%;
">

#ralph-wiggum .head .eye .pupil


#ralph-wiggum .head .left-eye


#ralph-wiggum .head .left-eye .pupil


#ralph-wiggum .head .right-eye


#ralph-wiggum .head .right-eye .pupil


#ralph-wiggum .head .nose


#ralph-wiggum .head .mouth1


#ralph-wiggum .head .mouth2


#ralph-wiggum .head .mouth3


#ralph-wiggum .head .mouth4


#ralph-wiggum .head .mouth5