soy Kseso y esto EsCSS

Textos vivos: tipografía con texturas y rellenos de imagen

Textos vivos: tipografía con texturas y rellenos de imagen

·Por Kseso ✎ 3

Si estás cansado de mostrar tus textos con la limitación de la propiedad color y quieres investigar otras vías más creativas, vamos con tres formas de presentar las tipografías rellenas con imágenes en vez de colores planos. Y ello sin que dejen de ser texto.

Pero antes de seguir, una pequeña advertencia: las tres formas tienen sus particularidades y no seré yo quien lo recomiende para párrafos de texto, más bien como detalle en algún título.

Texturas en el texto con -webkit-mask-image

Esta es una propuesta de propiedad sólo soportada por los navegadores webkit. Así que el efecto sólo será visible en ellos. El resto de navegadores no mostrarán la máscara, sólo el color plano. El resultado es el de la imagen:

-webkit-mask-image en textos rellenos con imágenes

Y los códigos necesarios, sencillos hasta el extremo:

h1 { -webkit-mask-image: url(ruta/pic.png); color: #3f3f3f; text-shadow: 2px 3px #fff, 7px 7px #c3c1c2; }

Pros de -webkit-mask-image

.- No necesita marcado html extra.
.- Código Css sencillo de usar, mantener o adaptar a cualquier situación.
.- Degrada sin problemas en navegadores no webkit.
.- Compatible con el resto de propiedades afines a los textos.

Contras de -webkit-mask-image

.- Sólo soportado por webkit
.- Necesita de un archivo de imagen con máscara (png, gif).
.- Limitado a imágenes de patrones.

Ver demo

Imágenes en la tipografía con -webkit-background-clip

Basado en un artículo de Divya Manian Using background clip for text with CSS fallback

Como en el caso anterior, estamos ante una propuesta de propiedad privativa de webkit. Así que rigen las mismas advertencias.

-webkit-background-clip en textos rellenos con imágenes

La autora en en artículo enlazado hace una exposición de los problemas de usar la propiedad propuesta -webkit-background-clip que hace los textos invisibles en el resto de navegadores.
Tras unas consideraciones y solucciones parciales termina con el siguiente código css para rellenar los textos con imágenes solventando lo anterior:

h1.pic { color: #8AA9B8; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url(ruta/archivo.jpg) repeat 50% 50%; -webkit-background-clip: text; }

Además puedes resaltar el texto con -webkit-text-stroke: 5px rgba(0,0,0,.3). También privativa.

Como ves en el código anterior, se asegura la degradación del efecto con la propiedad propuesta por webkit -webkit-text-fill-color: transparent y el valor trasparente obligado.

Pros de -webkit-background-clip

.- No necesita marcado html extra.
.- Código Css sigue sencillo de usar, mantener o adaptar a cualquier situación.
.- Admite cualquier tipo de imagen, no sólo con máscara.
.- Degrada sin problemas en navegadores no webkit.

Contras de -webkit-background-clip

.- Sólo soportado por webkit.
.- No admite ciertas propiedades como text-shadow. Se coloca sobre la imagen interior del texto.

Ver demo

Texto relleno de imagen: la vía SVG

Realizado por Lea Verou en su artículo Text masking — The standards way. Puedes ver el resultado en este jsfiddle:

Como en temas de SVG estoy más que pez, sólo haré incapié en ciertos valores que han de ser tenidos en cuenta, no en el marcado html ni otras particularidades.

Pros de la vía SVG

.- Compatible con los navegadores mayoritarios: Chrome, Safari, Firefox, IE9, Opera.
.- Admite cualquier imagen.
.- Código Css sencillo y libre de propiedades no stándares.
.- Código Css sencillo de usar y mantener.

Contras de la vía SVG

.-Marcado html extra.
.- En navegadores/versiones que no dan soporte a SVG no se muestra el texto.
.- Es obligado declarar tamaños al SVG en el Css, lo que dificulta su implementación.
.- Las medidas en la etiqueta "pattern" e "image" del svg además de declaradas pueden influir en lo mostrado.
.- La imagen ha de ir en el svg por un bug de webkit.
.- Rompe la separación contenido/presentación al introducir en el html un ornamento.

Microsoft y sus filters

Furoya a través del formulario de contacto del blog me hace llegar esta forma para los IE:

Aprovecho para hacer un comentario en aras de la compatibilidad.
Resulta que hace mucho, pero mucho tiempo, MS creó un modo CSS de "transparentar" en un fondo la forma del texto que tenía encima.
Era el Chroma Filter.
Y hoy todavía funciona (en Internet Explorer, por supuesto; los demás lo ignoran).
Dejo un enlace el la documentación oficial.

Gracias por el aporte, Furoya.

Conclusión

Pese a lo vistoso y efectista que resulta el efecto de rellenar el texto bien con una imagen cualquiera o con máscaras hoy por hoy no hay una forma ahí afuera para lograrlo de forma sencilla, "automática" y universal. Cada uno de los tres métodos expuestos en el artículo tiene sus limitaciones.

Ahora, que si sólo lo necesitas para un determinado elemento quizás y pese a todos los contras la forma que hoy por hoy asegura más usuarios sea utilizar SVG. Eso sí, si tus visitantes usan navegadores que no lo soportan tendrás que proveer una forma alternativa de mostrarles el texto. Bien mediante js o alguna filigrana Css.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso