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

Seguinos en Twitter @aeromental y Facebook

Puedes compartir esta noticia con:


Noticias Similares

Anterior y Siguiente Post

9 Comentarios »

pingbacks

Pings, este post fue enlazado por:

  1. Las tecnoaventuras de LocoDiego » Dibujando con CSS / 19 de abril, 2008
  1. 2litros > raimundo illanes dice:

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

  2. Bleend dice:

    :O

    Alucinante. :D (y)

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

  3. roberto dice:

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

  4. FaCuZ dice:

    El google reader no se ve

  5. M@U dice:

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

  6. elfleat dice:

    Wow Genial! Impresionante!

  7. Peliculas Online dice:

    Nunca me imagine que sepodia hacer eso con css, muy bueno el post, gracias por el aporte

  8. KOKI dice:

    Lindo muy lindo -.-! y yo conozco un programa que te lleva una imagen a código ASCII

Escribe un comentario

* no será visible

Se BORRAN los comentarios con insultos, spam, trolleo, lenguaje inapropiado: soez y albur.
Avatar: Si quieres tu foto o imagen en los comentarios sólo la subes a Gravatar.
HTML: Puedes usar HTML de blockquote, a href, strong, em, li y code. Lista de Emoticons.

Suscribirse sin comentar

 
Aeromental 2007 - 2012 ★ ☆ Las mejores personas del mundo están locas ☆ ★