Un cuadro dibujado usando sólo código XHTML y CSS

@ 25 . julio . 2007

Cuadro dibujado con CSS

El cuadro que ven sobre estas lineas tiene un gran merito, trabajo y nivel de Geekismo extremamente cool. El cuadro no emplea ninguna imagen, no fue realizado usando Paint, Fireworks, Photoshop o Corel. Se podría decir que es un “cuadro simple”, pero no es así, ya que lo complejo viene en su esencia, este paisaje ha sido realizado únicamente con el empleo de código XHTML y CSS, sino me creen veánlo aquí en acción.

Si usas Internet Explorer 6 no verás el árbol ni la montaña, deberías de probar Firefox.

Con esto una vez más se demuestra hasta donde se puede llegar empleando CSS para diseñar, tal parece que casi no hay límites si lo unes con mucho ingenio.

Rammy es el autor de esta obra semántica. Nos cuenta que empleó únicamente algunos divs, spans y uno que otro punto.

Si le quitamos el estilo al cuadro, sólo nos queda:

. . . .
. . . . . .
. . . . . .
. . . . . . .
. . .
. .

¡Mira Mamá! ¡Sin imágenes!

Pintar en CSS es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Además, creo que no me quedó tan feo… ¿O si?

El truco radica en ubicar varios puntos gigantes para formar todo lo que tiene forma circular, como el Sol, la copa del árbol y las nubes.

Las líneas diagonales, para la montaña, la nieve y el tronco del árbol se consiguen gracias al empleo de cajas y el truco denominado: Slant Borders.

Aquí pueden ver el código CSS empleado. :cafe:

Metalize

Me cabe resaltar que el blog de Metalize es una muy buena fuente de consejos y tutoriales valiosos para los que les interesa el CSS y el diseño Web Semántico, les recomiendo que lo tengan en sus marcadores, el autor sabe mucho del tema y lo que es mejor, le encanta compartir gratuitamente todo su know-how. :D

Autor del post: DanielSemper: @aeromental + Facebook

  • pedro

    Luce interesante!
    Hay que tener tiempo, vocacion y creatividad (ademas del conocimiento de la dupla cuasi perfecta: xhtml+css).