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.

[#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.

[#4 --53801--]

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

[#5 DaniTC]

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

[#6 --53801--]

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

[#7 luffyD]

Impresionante

[#8 matacca]

Para que luego despotriquéis de Explorer: en Windows Phone (Explorer 11) se ve perfecto.
Edit. Rectifico. Tiene los mismos errores que Firefox.

[#9 --419356--]

#8 ¿Ahora tenemos que despotricar?

[#10 matacca]

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

[#11 eduardor2k]

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

[#12 --276849--]

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...

[#14 Mike_Zgz]

Esto con Dreamweaver se hace en 2 minutos

[#16 aldur]

Soy especial!

#ralph-wiggum *
{
position: absolute;
box-sizing:content-box;
mozbox-sizing:content-box;
}

#ralph-wiggum
{
position: relative;
width: 109px;
height: 84px;
margin: 0 auto;
}

#ralph-wiggum .head *
{
border: 1px solid #110b00;
}

#ralph-wiggum .head .no-border
{
border: none;
}

#ralph-wiggum .head .body
{
background: #fbd800;
}

#ralph-wiggum .head .hair
{
webkitborder-radius: 50%;
mozborder-radius: 50%;
border-radius: 50%;
}

#ralph-wiggum .head .hair-left
{
border-right: none;
}

#ralph-wiggum .head .hair-right
{
border-left: none;
}

#ralph-wiggum .head .hair1
{
top: 1px;
left: 7px;
height: 51px;
width: 24px;
transform: rotate(40deg);
mstransform: rotate(40deg);
webkittransform: rotate(40deg);
}

#ralph-wiggum .head .hair2
{
top: -2px;
left: 18px;
height: 56px;
width: 26px;
transform: rotate(38deg);
mstransform: rotate(38deg);
webkittransform: rotate(38deg);
}

#ralph-wiggum .head .hair3
{
top: -2px;
left: 26px;
height: 52px;
width: 22px;
mozborder-top: none;
mozborder-bottom: none;
transform: rotate(31deg);
mstransform: rotate(31deg);
webkittransform: rotate(31deg);
}

#ralph-wiggum .head .hair4
{
top: -2px;
left: 35px;
height: 45px;
width: 21px;
transform: rotate(31deg);
mstransform: rotate(31deg);
webkittransform: rotate(31deg);
}

#ralph-wiggum .head .hair5
{
top: -1px;
left: 45px;
height: 32px;
width: 14px;
transform: rotate(31deg);
mstransform: rotate(31deg);
webkittransform: rotate(31deg);
}

#ralph-wiggum .head .hair6
{
top: 0px;
left: 53px;
height: 27px;
width: 10px;
transform: rotate(21deg);
mstransform: rotate(21deg);
webkittransform: rotate(21deg);
}

#ralph-wiggum .head .hair7
{
top: 2px;
left: 60px;
height: 21px;
width: 2px;
transform: rotate(5deg);
mstransform: rotate(5deg);
webkittransform: rotate(5deg);
}

#ralph-wiggum .head .hair8
{
top: 1px;
left: 61px;
height: 24px;
width: 6px;
transform: rotate(-20deg);
mstransform: rotate(-20deg);
webkittransform: rotate(-20deg);
}

#ralph-wiggum .head .hair9
{…   

[#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.

[#18 --169677--]

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

[#19 sieteymedio]

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

[#20 zastiu]

En Internet Explorer: Yo me llamo Ralph  

[#21 Hanxxs]

¿Alguien lo ha probado en IE8?

[#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.  

[#23 --443464--]

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

[#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

[#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.

[#26 provotector]

interesante.

[#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