Texto transparente - que se vea el fondo

el_javi · #1 (**permalink**) 04/12/2013, 04:02

Hola a todos.

Me gustaría saber si existe la manera de hacer un efecto en texto en el que se vea lo que hay por detrás, pero de forma que ponga lo que ponga siempre se vea bien y que la fuente se distinga que es una fuente en concreto.

Os pongo una imagen de lo que necesito:

Si alguien cree que esto es posible hacerlo, que me diga como, por favor.

Gracias y un saludo.

PD: no me vale con PNG transparente, tiene que ser texto y CSS.
PDD: el tema de la fuente, no hay problema, embebo fuentes con font-face sin problema alguno. Necesito solo el efecto de que ponga lo que ponga detrás se vea.

Gracias de antemano.

saludos.

osobuco · #2 (**permalink**) 04/12/2013, 06:44

Buena pregunta

osobuco · #3 (**permalink**) 04/12/2013, 06:48

http://trentwalton.com/2011/05/19/mask-image-text/

es lo mejor que te e encontrado , pero necesitas png para hacer la mascara aun que estos no tienen que tener el texto que creo que lo que buscabas.

me debes una birra

el_javi · #4 (**permalink**) 04/12/2013, 06:56

Hola Osobuco.

No es lo que estoy buscando.

En lo que me enseñas, el texto tiene color blanco y el fondo es oscuro con trama, y por mucho que cambie el fondo, no veo ESE FONDO....

En el ejemplo de tu enlace:
Donde pone "DINERO Is not spanish for dinner"

Yo necesitaría que las letras sean BLANCAS si el fondo de la web es blanco
Que las letras sean negras si elf ondo de a web es negro
Que las letras cambien de color respecto a la imagen de fondo que le ponga a la capa o al elemento trasero....

Imagino que será IMPOSIBLE hacer esto vía CSS... pero .. por si acaso alguien sabe cómo...

La birra.. a ver si la conseguimos ;)

pzin · #5 (**permalink**) 04/12/2013, 07:01

Usando background-clip tendías que poner el fondo dos veces, tanto al elemento posterior como al propio texto y ajustarlo en este para que quede bien el efecto.

Yo usaría un SVG con texto embebido, luego si cargas la fuente con @font-face debería de aplicarse bien. Tienes un buen artículo que habla un poco de lo que quieres hacer, aunque no hablan de texto en ningún momento, pero puedes aplicar la misma técnica —al SVG le da igual que sea un círculo, un octágono o texto.

Con esto realmente creas lo que quieres, que es una máscara de texto. Lo otro que comenta osobuco es más bien una técnica para imitar ese efecto.

Todo esto es en teoría, aunque estoy bastante seguro de que no debería haber problemas para hacerlo.

pzin · #6 (**permalink**) 04/12/2013, 07:13

Estaba mirando si encontraba alguna cosa hecha con canvas, que no controlo bien, y algo hay: http://blog.ericzhang.com/punch-thro...-css-and-html5

Que por cierto, me gusta la idea de hacer ese efecto.

el_javi · #7 (**permalink**) 04/12/2013, 07:19

Hola pzin

Gracias a ti también por tu aportación.

Este es un tema muy interesante y a ver si somos capaces de llevarlo "a la máxima"

El tema de Canvas, ya me parece que nos vamos "de madre" dado que meterle Javascript.. me parecería anti usable...

Busco algo en concepto CSS, CSS3, pero que dependa de SI MISMO (del xHTML + CSS)

No digo que tu comentario "se salga de madre" eh!! digo que esa solución es poco escalable, para SEO es una "putada" muy gorda 8dado que no habría textos en la web, los cargaría Javascript y .. no es lo más correcto, creo yo...

No se si por PHP se podría hacer algo, que generase la imagen "con fondo y las letras vacías"...

Pero SIGAMOS, sigamos TODOS aportando ideas, porque quizás entre unas y otras saquemos algo :)

pzin · #8 (**permalink**) 04/12/2013, 07:24

Bueno, pero haciéndolo con PHP o cualquier otra forma de generar una imagen, te deja igual que mi segunda respuesta.

Pero vamos, lo de hacerlo mediante SVG no debería de ser problemático (si se puede, que ya digo que es en teoría) y seguramente Google también lea el texto de un archivo SVG, vamos, raro me parecería que no lo hiciera. Vamos, si usas el elemento svg en lugar de img es seguro que se indexa.

osobuco · #9 (**permalink**) 04/12/2013, 07:57

Cita:

Iniciado por el_javi

Hola Osobuco.

No es lo que estoy buscando.

En lo que me enseñas, el texto tiene color blanco y el fondo es oscuro con trama, y por mucho que cambie el fondo, no veo ESE FONDO....

En el ejemplo de tu enlace:
Donde pone "DINERO Is not spanish for dinner"

Yo necesitaría que las letras sean BLANCAS si el fondo de la web es blanco
Que las letras sean negras si elf ondo de a web es negro
Que las letras cambien de color respecto a la imagen de fondo que le ponga a la capa o al elemento trasero....

Imagino que será IMPOSIBLE hacer esto vía CSS... pero .. por si acaso alguien sabe cómo...

La birra.. a ver si la conseguimos ;)

A ver ... no lo he probado pero...
si se supone que el ejemplo que te ha pasado utiliza dos png uno para el fondo y otro para la mascara del texto y mi idea era editar el png de la mascara y hacerlo totalmente transparente.
como he dicho no lo he probado pero puede ser una solución a tu problema .
es mas en la fuente orginal donde lo encontre era exactamente para tu problema:
http://stackoverflow.com/questions/7929478/masking-text-for-transparency-in-css-cross-browser-not-ie-6-or-lower
Saludos

Rafael · #10 (**permalink**) 04/12/2013, 08:15

Al final es un problema de compatibilidad, la que las especificaciones del proyecto requieran.

Poner una máscara png a otra cosa.... pues yo haría el png con todo dentro más rápido.

Y si no se quiere usar png por alguna razón, la siguiente pondría svg.

Para canvas, nuestro amigo Carlangeitor hizo un script para eso, a ver si lo encuentro...

el_javi · #11 (**permalink**) 09/12/2013, 03:57

Hola compis.

Al tema del SVG no le consigo pillar el punto.

¿Alguien se une e intentamos hacer algo?

¿Creéis que podremos conseguirlo?

Gracias y un saludo.

Javier

pzin · #12 (**permalink**) 09/12/2013, 05:51

¿Y qué has intento hacer? Porque veo que por otros sitios también muestras una actitud parecida del tipo "juntemos ideas, que necesito esto" pero ni una linea de código.

Por correo me chivaron que hay que una opción de composición llamada XOR. Si me miras la especificación SVG algo se verá por ahí:

http://www.w3.org/TR/SVGCompositing
http://www.w3.org/TR/SVGCompositing#...itingOperators
http://www.w3.org/TR/SVGCompositing#comp-op-xor

Que por cierto...

Cita:

Iniciado por el_javi

El tema de Canvas, ya me parece que nos vamos "de madre" dado que meterle Javascript.. me parecería anti usable...

Busco algo en concepto CSS, CSS3, pero que dependa de SI MISMO (del xHTML + CSS)

[...] digo que esa solución es poco escalable, para SEO es una "putada" muy gorda 8dado que no habría textos en la web, los cargaría Javascript y .. no es lo más correcto, creo yo...

¿Pero luego una opción usando una librería de PHP para generar una imagen te parece buena? Es un criterio un poco extraño...

el_javi · #13 (**permalink**) 09/12/2013, 05:58

Cita:

Iniciado por pzin

¿Y qué has intento hacer? Porque veo que por otros sitios también muestras una actitud parecida del tipo "juntemos ideas, que necesito esto" pero ni una linea de código.

Todas mis pruebas, son fallidas, basadas en ejemplo compartidos y en ejemplos buscados.

Ninguna a buen puerto, tanto en PHP como CSS y por ello, pocas líneas a compartir....

Todo ejemplo que veo, lo destripo, paso horas haciendo pruebas, y como no he conseguido el fin deseado, es desechado, no compartido....

Cita:

Iniciado por pzin

Por correo me chivaron que hay que una opción de composición llamada XOR. Si me miras la especificación SVG algo se verá por ahí:

http://www.w3.org/TR/SVGCompositing
http://www.w3.org/TR/SVGCompositing#...itingOperators
http://www.w3.org/TR/SVGCompositing#comp-op-xor

[/quote]

Le echaré un ojo muy a fondo, veo una grandísima posibilidad con ello, pero me echa para atrás que es javascript por lo poco que he visto, y a pesar de ser uno de mis fuertes, lo descarto de inicio porque no quiero que sea dependiente del navegador, sino de la estandarización y/o de la capa de abastracción de "diseño" (css) (o en su caso, de PHP, ejecutado en el servidor e independiente del usuario)

Lo dicho, gracias, y le echaré un ojo.

Saludos.

pzin · #14 (**permalink**) 09/12/2013, 06:02

¿SVG es JavaScript?

el_javi · #15 (**permalink**) 09/12/2013, 06:03

Cita:

Iniciado por pzin

Que por cierto...

¿Pero luego una opción usando una librería de PHP para generar una imagen te parece buena? Es un criterio un poco extraño...

La razón fundamental es que quiero que dependa de la ESTANDARIZACIÓN y que pueda alimentar a Google sin problemas.

El uso de Javascript (canvas y la última opción propuesta por tu parte) me parecen GRANDÍSIMAS OPCIONES pero hacen que los textos sean escritos por javascript a posteriory de la carga de la página, y por ello, textos que perfectamente por las necesidades de la página deberían ser H2 o H3, elementos de posicionamiento y semántica en SEO, que si son cargados por Javascript, no son idexados.

Esta es la razón, y prefiero pegarme el palizón usando librerías y acciones de servidor, que posteriormente pueden ser leídas por google e indexadas.

En el caso de generación de imágnees con PHP, la imagen debería ser "escupida" por mi parte con un conjunto de características (titles, alt, etc) lo suficientemente buenas como para que no perjudique el SEO.

Indudablemente, si esto se pudiera hacer con CSS puro y duro, sería la mejor solución, sin afectar a ninguna capa de abstracción y siendo 100% transparente y no penalizable por el monstruo del posicionamiento.

Todas las opciones son bienvenidas por mi parte, y las estoy revisando y exprimiendo a efectos de encontrar un punto intermedio entre la necesidad de SEO y la necesidad de cumplir el diseño "al pixel".

¿Todo no se puede?.... hasta el momento intento que si.. el día que no se pueda, decidiré qué es más importante en este proyecto.

saludos.

el_javi · #16 (**permalink**) 09/12/2013, 06:06

Cita:

Iniciado por pzin

¿SVG es JavaScript?

No, no me refería que SVG fuese javascript.

Me refería que que los ejemplos CANVAS son dependientes de la ejecución del navegador (y la estandarización de este y los problemas consavidos del "cross browsing") y que SVG, no se (porque lo he dicho, que no me he manejado mucho con ello) no se si tendrá los mismos problemas o no.

Y por eso busco soluciones dependientes de mayor estandarización, e incluso, del servidor, ajeno 100% al cliente.

pzin · #17 (**permalink**) 09/12/2013, 06:33

Cita:

Iniciado por el_javi

La razón fundamental es que quiero que dependa de la ESTANDARIZACIÓN y que pueda alimentar a Google sin problemas.

El uso de Javascript (canvas y la última opción propuesta por tu parte) me parecen GRANDÍSIMAS OPCIONES pero hacen que los textos sean escritos por javascript a posteriory de la carga de la página, y por ello, textos que perfectamente por las necesidades de la página deberían ser H2 o H3, elementos de posicionamiento y semántica en SEO, que si son cargados por Javascript, no son idexados.

Esta es la razón, y prefiero pegarme el palizón usando librerías y acciones de servidor, que posteriormente pueden ser leídas por google e indexadas.

En el caso de generación de imágnees con PHP, la imagen debería ser "escupida" por mi parte con un conjunto de características (titles, alt, etc) lo suficientemente buenas como para que no perjudique el SEO.

En cuanto a SEO, es mejor usar un SVG que una imagen JPG, PNG, o lo que sea que generes con GD.

No hay ningún JavaScript envuelto en hacerlo mediante SVG —que tiene un soporte completo—, ya que el texto está en el propio SVG, que puedes cambiar si quieres por PHP o lo que sea si embebes el gráfico o sirves un documento SVG dinámicamente con PHP. Pero además de eso, Google lo leerá:

el_javi · #18 (**permalink**) 09/12/2013, 06:37

Pues dicho esto, entonces.. me pongo esta tarde a revisar la documentación de SVG para probarlo y entenderlo bien, ver las versatilidades, etc, etc

Mil millones de gracias por la información y dedicación al tema!!! es de agradecer que haya gente que dedique su tiempo a compartir información.

En cuanto tenga pruebas visuales, os las enseñaré!!!

Gracias de nuevo.

Linton · #19 (**permalink**) 10/12/2013, 07:37

Explico un sencillo método con HTMLK y CSS en este post

Yo no buscaba letras también transparentes, imagino que basta rasterizar y aplicarles el mismo recurso. Un saludo.

el_javi · #20 (**permalink**) 28/12/2013, 12:34

Hola a todos.

He estado trabajando mucho en esto, pero no consigo lo que necesito....

Os comento: he hecho pruebas y más pruebas...

Esta es la "más correcta" a la que he llegado:
http://incut.es/desarrollo/__PRUEBAS..._recortadas_1/

PERO:

1) necesitaría que el cuadro que se ve en el centro esté también de color "blanco" con la misma transparencia que el resto del círculo.

2) Que el texto me haga salto de línea, ajustándose al cuadrado que tiene de tamaños máximos

¿alguna idea chicos?

Gracias y espero vuestros comentarios, que esto tiene una pinta buena buena, y lo podremos conseguir!!!

Saludetes

Javier

el_javi · #21 (**permalink**) 28/12/2013, 12:35

Por ciero, añado:
- en Internet Explorer, no funciona
- En opera, no hace fondo transparente en el texto, lo hace negro...

A ver qué sacamos en claro entre los que más saben :)