Foro de Posicionamiento y Buscadores

JustMe · Publicado: Mar Oct 02, 2007 10:15 pm **Asunto**: Texto transparente en CSS

Hola.

Estoy intentando hacer que el texto de un título <hx> sea transparente, esto porque quiero usar una imagen que estaría planteada como background-image del hX, la idea es que el texto sea seleccionable y visible al desactivar la hoja de estilo o cambiarla, poniendo la propiedad color a transparent funciona bien en IE6 /7 pero firefox no quiere, lo muestra del mismo color del texto del body, poniendo la propiedad color:transparent a su equivalente rgba(0,0,0,0) tampoco funciona, el parser de css de firefox se queja de color invalido.
He hecho algo que funciona pero personalmente no me gusta, he puesto un span dentro del título cubriendo todo el texto así:

Carlitus · Publicado: Mie Oct 03, 2007 7:32 am **Asunto**:

Hay varias soluciones:

http://www.mezzoblue.com/tests/revised-image-replacement/

Si no es un enlace suelo usar el text-indent.
_________________
Curso de Drupal: de 0 a 100, presencial en barcelona.
Portal Nissan, el mejor foro de coches nissan

JustMe · Publicado: Mie Oct 03, 2007 9:07 am **Asunto**:

Gracias Carlitus, muy interesante el enlace, de todas formas, voy a probar con el text-indent, aunque al final creo que terminaré usando opacity y el span adicional, las soluciones planteadas (las que son accesibles, por lo menos) requieren también un elemento (span) adicional, el problema del text-indent es que no sería seleccionable el texto, no tendría el usuario por donde empezar. En fin, que no parece haber solución perfecta, viendo que tendré que resignarme con lo del span adicional, lo que no se ahora es que tanto soporte tenga opacity en navegadores antiguos, estropeando el css como puedes ver en mi ejemplo, logro cierta compatibilidad, pero no sé cuánta la verdad.

Un saludo.
_________________
PHP Data uri fier
Blog Gratis

Carlitus · Publicado: Jue Oct 04, 2007 8:57 am **Asunto**:

Creo que lo que te puede pasar es lo que comentas, que sólo valga para explorer y para firefox. De todas formas nunca había visto tu método y no está mal pensado.
_________________
Curso de Drupal: de 0 a 100, presencial en barcelona.
Portal Nissan, el mejor foro de coches nissan

padapapoulos · Publicado: Jue Oct 04, 2007 10:57 am **Asunto**:

Carlitus · Publicado: Vie Oct 05, 2007 7:49 am **Asunto**:

JustMe · Publicado: Vie Oct 05, 2007 10:19 pm **Asunto**:

Bueno, finalmente he optado por una combinacion de opacity y margin-left de 3000 px, funciona en IE 5/6/7, Firefox, Konqueror y Safari Windows (Mozilla) aunque el texto no es seleccionable (a menos que se use Ctrl-a), esto no era una prioridad, no puedo usar medidas fijas porque las imágenes son generadas dinámicamente de acuerdo al texto, la cuestión es que ahora debería ser accesible y el único caso que me preocupa es cuando images off, css on, porque no se vería nada. Lo que trabajaba eran unas plantillas para blog, el resultado final puede verse aquí, no que esté particularmente orgulloso pero han sido sugerencias de usuarios:

Uno
Dos
Tres

Saludos y gracias.
_________________
PHP Data uri fier
Blog Gratis

padapapoulos · Publicado: Mar Oct 16, 2007 8:23 am **Asunto**: