(versión en castellano abajo)

I found an interesting article by Ask the CSS Guy about one pixel notched corners CSS trick used by Google. In this article, the CSS Guy show us how Google did it, using <li><a><b><b><b>Option</b></b></b></a></li>. The CSS guy was able to do it with only 2 nested <b>. I just thought that even if it was a better way than Google did, two <b>s doesn’t look good enough… so I had to try to do it better.

I’ve done it with just one <b>:  <li><a><b>Option</b></a></li>, so the semantic meaning remains intact. It is crossbrowser (tested and pixel perfect in 12 browsers, IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), and also the same code could be used as quirks or strict mode without changes. Of course, the xhtml strict version pass the W3C validation.

Quirks mode version
Xhtml stric mode version

Castellano

En un interesante artículo de Ask the CSS Guy se explicaba cómo Google Analytics crea bordes redondeados de un pixel sin imágenes y sólo CSS. Para ello Google usa una estructura <li><a><b><b><b>Option</b></b></b></a></li>. El Chico CSS fue capaz de mejorar dicha estructura reduciendo el número de <b>s a sólo 2. Pensé que se podía hacer aún mejor, y me puse a intentarlo.

Finalmente he conseguido que sólo tenga una <b>; <li><a><b>Option</b></a></li>, de esta forma se mantiene la semántica. Es crossbrowser (probado y renderizando con resultados totalmente idénticos en 12 navegadores: IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), y el mismo código se puede usar tanto en modo quirks como strict sin cambios. Por supuesto, la versión xhtml estricta valida según la W3C.

(texto en castellano abajo)

After drawing in CSS (see Homer CSS and Bush CSS), a generator software for CSS Art (jpeg2css) and animated CSS art (CSS-Cola), what to do next?

Pacman CSS uses no images, only pure vectorial and rescalable CSS art composed of hundreds of Verdana font characters, and javascript code for animation and game. It is less than 9kb uncompressed -less than 3 with zip compression-.

It requires a browser with javascript enabled and the Verdana font installed. It has been tested in 11 different browsers, Internet Explorer 5.5 to 8, Firefox 2 and 3, Opera 9, Safari 3, Maxthon 1.6 and 2 and Flock, working on all. To IE 8 beta users: use IE7 emulation to run it (without the emulation it works, but too slow, it takes several seconds to start and generates very few images per second -I assume it is a problem with the beta IE  version-)

Push the START GAME button to play it!

Castellano

Tras dibujar en CSS (ver Homer CSS y Bush CSS), un software generador de arte CSS (jpeg2css) y arte CSS animado (CSS-Cola), ¿qué sería lo siguiente?

Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).

Requiere un navegador con javascript y la fuente Verdana instalada. Ha sido probado en 11 navegadores distintos; Internet Explorer de 5.5 a 8, Firefox 2 y 3, Opera 9, Safari 3, Maxthon 1.6 y 2 y Flock, funcionando en todos. A los usuarios de IE 8 beta: jugad con la emulación de IE7 activa (sin la emulación funciona, pero demasiado lento; tarda varios segundos en empezar y genera muy pocas imágenes por segundo… supongo que es un problema de la beta de IE)

¡Pulsad el botón START GAME para jugar!

Agradecimientos a Xero por su apoyo moral durante la realización del juego y el beta-testing.

(see English version below)

En un foro en el que se hablaba de Homer CSS y Bush CSS, se me retó a realizar una aplicación que generase arte CSS directamente de una imagen jpeg. He aquí la respuesta.

Se trata de una prueba de concepto, sólo genera imágenes en blanco y negro, sólo usa caracteres • y no tiene interfaz de usuario; toma el fichero “image.jpg” y de ahí genera “out.html”. El fichero “image.jpg” puede ser sustituido por cualquier otra imagen en formato jpeg. Podéis ver un ejemplo del resultado aquí.

El software funciona bajo Windows, y ha sido analizado con los siguientes antivirus: Karspersky, Nod32, Trend Micro y Windows Defender. En cualquier caso, se ofrece sin garantías de ningún tipo y asumiendo que el usuario se hace responsable de su descarga y uso. Descargar jpeg2css.

English

After doing Homer CSS I was challenged to do a JPG to CSS image conversion tool. It is a proof of concept really. It takes a black and white jpeg and returns an html copy of the image created with text and CSS, just like homer was. Enjoy!

This is a Windows only software. Since it has not a graphical user interface, in order to use your own image you have to rename it as ”image.jpg” and replace the example’s one.

It has been tested on Karspesky, Nod32, Trend Micro and Windows Defender antivirus and no viruses were found. But remember use it at your own risk. Download jpeg2css.

Thanks goes to:
Thomas Gilray for helping me in the translation of this post
Elías/elcinegratis for beta testing of the software
Zest for challenging me to do it

Read this post in English

Tras el Homer CSS estaba buscando otro personaje gracioso para crear con el mismo método. ¿Quién podría ser más gracioso que Homer Simpson?

Al igual que Homer CSS, está comprobada su correcta visualización desde IE 5.5+, Opera 9, Safari 3 y Firefox 2+ para Windows. Necesita la fuente Verdana.

English

After creating Homer in CSS, I looked around for another funny character to create using the same method. But who could be funnier than Homer Simpson?

As with “Homer in CSS”, it has been tested in IE 5.5+, Opera 9, Safari 3 and Firefox 2+, for Windows and should work perfectly in all of those. It does require the Verdana font, so make sure you have that installed if it appears broken.

What’s so special about this picture anyways?

It is not an image in the normal sense, it was instead painstakingly created using CSS. CSS (cascade style sheets) is a language to define a website visual representation, but it is not intended to create images. Bush was created by placing hundreds of characters (numbers/letters/symbols) of different sizes and colors in specific positions on the page. Too easily see this, click somewhere in the middle of his face and slowly drag your mouse outward. You should see your mouse highlight some of the text!

Since this is an unusual and rather avant-garde method for displaying images, there are no tools and the process is hard, slow and complex to make it work well in different browsers.

So, why did I spent dozens of hours in such a pointless task?

…no comment.

Translated by Thomas Gilray.

Tras mi diseño del logotipo de SigT en CSS hace casi dos años, me quedé con la idea en mente de que dibujos más complejos se podrían hacer usando la fuente Verdana y posicionamiento absoluto en CSS, generando de esta forma dibujos vectoriales directamente embebidos en el código html.

He optado por Homer Simpson dado que es lo suficientemente popular y reconocible:

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

¿Qué tal se ve en otros sistemas operativos y navegadores?

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