(versión en castellano abajo)

Today I’ve done this little Javascript experiment that makes an Apple-style reflection on html text - without images. It is extremely simple: it just cuts the text in 1px horizontal lines and place these in inverse/reflected order.

The “Write here!” is an input field, so you can click on it, change the text and see how the effect dynamically changes the reflection.

It works in IE 8, 7, 6 and - magically - in 5.5. It have been tested and it is working also in Firefox 3.5, Firefox 2, Konqueror 3, Opera 9, Safari 3 and Chrome 4.

Note: please remember that this is just a fun experiment and not thought to be useful in any way. If you are going to use it in your website, think that it is probably going to cause accessibility problems on javascript enabled text-only, text-to-voice and text-to-braille browsers, so I can’t recommend its use on any serious/non-experimental websites.

Castellano

Hoy he realizado este pequeño experimento con Javascript que crea reflejo sobre texto html al estilo Apple (sin usar imágenes). El funcionamiento es muy simple: el texto se corta a líneas horizontales de 1 pixel y las pongo en orden inverso/reflejado.

Donde pone “Write here!” (traducido: ¡Escribe aquí!) hay realmente un campo de texto. Podéis pinchar, cambiar dicho texto y ver cómo el efecto de reflejo cambia dinámicamente mientras se escribe. El botón de “Shake it!” menea</e el texto reflejado.

Funciona en todos los navegadores que he podido probar, incluyendo asombrosamente (¿o mágicamente?) el Internet Explorer 5.5.

Nota: este efecto es sólo un experimento por diversión, y no se debería tomar como algo útil de ninguna forma. Si alguien se piensa usarlo en alguna página, que recuerde que puede causar problemas graves de accesibilidad para personas que usen navegadores con javascript en modo de sólo texto, lectores de voz de páginas web y lectores web braille. Por tanto, no puedo recomendar su uso en prácticamente ninguna web, a excepción de webs experimentales y poco más.