Una vez ya vimos como alguien dibujó el cuadro de un paisaje usando únicamente código CSS. En esta ocasión tenemos a un perfecto Homero Simpson dibujado con sólo CSS, usando fuente Verdana y posicionamiento absoluto, generando de esta forma dibujos vectoriales directamente embebidos en el código html.

Román Cortes se ha animado a Dibujar a Homero, me permití copiar y pegar el código que el realizó para esta genialidad.

(intenten pasar el mouse encima y verán que no es una imagen, es puro código CSS)

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(
-

El resultado es cross-browser; está comprobado en los siguientes navegadores bajo Windows:

  • Internet Explorer 5.5, 6 y 7
  • Opera 9
  • Firefox 2
  • Safari 3

Mis aplausos, esto demuestra la fuerza de CSS para realizar diseños complejos.

Nota del autor: para su correcta visualización la fuente Verdana debe estar disponible en el equipo

Enviar esta noticia a un amigo

Buscar más en Google

Google
 

7 Comentarios en “Homero Simpson dibujado con sólo código CSS”

2litros > raimundo illanes
17 de Abril de 2008 a las 11:56 pm    

1

jajaja, muy bueno, muy buen ejemplo, ahora a buscar a darth vader

Bleend
18 de Abril de 2008 a las 6:50 am    

2

:O

Alucinante. :D (y)

PD: En el Feed sale solo una “o” XD

roberto
18 de Abril de 2008 a las 8:18 am    

3

ja. y asi se ve si elimino los css:

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/





_
_
_



C
C
O
(
-

FaCuZ
18 de Abril de 2008 a las 2:45 pm    

4

El google reader no se ve

[...] blogs encontré que Román Cortéz (antes había realizado el logo de un blog) habia preparado en CSS el dibujo de Homero Simpson, no es la primera vez que alguien realiza un gráfico en CSS, hace un tiempo [...]

M@U
20 de Abril de 2008 a las 1:54 pm    

6

Wow ! Que ingenio el de ese sujeto, y pasciencia sobre todo…
:O

elfleat
23 de Abril de 2008 a las 1:58 am    

7

Wow Genial! Impresionante!

Escribe un comentario...

Atención: Esta prohibido escribir todo con MAYÚSCULAS. En Internet es igual a gritar. Si lo haces, tu comentario será borrado.
HTML: Puedes usar código HTML como blockquote, img, a, strong, em, li y code.

RSS   RSS a los comentarios de esta noticia

* Si te registras en Gravatar tendrás tu imagen junto a los comentarios de este y muchos otros blogs.

Noticia anterior y siguiente

 
2008 Aeromental: The cake is a lie.