Textos vivos: tipografía con texturas y rellenos de imagen 8.2.13
Tres formas de aplicar texturas y relleno de imágenes a las tipografías sin dejar de ser texto.
Textos vivos: tipografía con texturas y rellenos de imagen
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:
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.
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.
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.
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.
Kseso
the obCSServer ᛯ 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 Kseso
Buena opción aunque como dices solo en pequeños bloques seria útil por que en escritos grandes podría afectar la carga supongo..
ResponderEliminarPor cierto sorry por ponerlo acá pero te doy un consejo pon más visibles las redes sociales las tienes muy ocultas ejemplo la pagina de facebook, G+ esta al final pero casi imperceptible bueno solo es algo que me fije luego de buscar al menos 3 veces de arriba abajo de la pagina solo twitter se ve arriba saludos
En cuanto al rendimiento, Magoplup creo que es algo secundario dado el escaso soporte a los dos primeros métodos.
ResponderEliminarY la diferencia de mask-image frente a una usada vía background no creo que sea demasiado significativa. Sería cuestión de verlo. Pero...
Respecto al uso en párrafos extensos y con un font-size de tamaño "normal" veo más problemático su legibilidad que otros factores.
Gracias por el apunte sobre los iconos de las redes. Era reacio a "ensuciar" el blog con tanto código y elemento externo. Y pese a que encontré la forma "menos peor" de presentarlos sin que interfieran con el artículo y sin que molesten su lectura, creo que es un tema (tanto botón y red) sobrevalorado.
Un saludo
Volviendo (un poco) al asunto, me gustaría decir que el agradecido soy yo, Kseso. Lo mío era casi un comentario al margen; si te parece que cabe en el artículo no te lo voy a discutir, porque es tu blog, pero en lo personal se me hace una exageración que lo pongás en medio de tu publicación. Lo mío claramente no está a la altura.
ResponderEliminarBien, ya que pasé a visitarte, agrego (aquí) que IE9 está tratando de incorporar a CSS3, y ha depreciado estos filtros; aunque debería mantener la compatibilidad para las páginas antiguas.
Un abrazo.