English Version

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

COMPARTIR ESTA NOTICIA

»  Enviar a: twitter  facebook    

Enviar a un amigo:





Por e-mail email

BUSCAR MÁS EN GOOGLE

8 COMENTARIOS »

Pingbacks y Trackbacks

pingbacks
  1. Las tecnoaventuras de LocoDiego » Dibujando con CSS / 19 de Abril, 2008
  1. 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. Nunca me imagine que sepodia hacer eso con css, muy bueno el post, gracias por el aporte

ESCRIBE UN COMENTARIO...


Por favor evita los modismos e insultos, de lo contrario tu comentario podría ser borrado.
HTML: Puedes usar código HTML como blockquote, img, a, strong, em, li y code.

Suscribirse sin comentar

SIGUIENTE Y ANTERIOR POST

Número de personas que nos leen en este momento:

 
Aeromental 2010: Usted de­be­ría estar tra­ba­jan­do.