⇪

Crear mascaras de texto

facebook-svg gplus-svg twitter-svg

Crear mascaras de texto

En el CSS3, exactamente como en Photoshop, o en SVG, podemos crear mascaras de texto. O casi. De hecho Firefox todavía no nos deja hacerlo.

En el siguiente ejemplo utilizamos el titular <h1 class="panal"> para crear una mascara de texto. Para esto – ya lo sabemos – el texto tiene que ser transparente ( color:transparent; ).
El problema es que background-clip: text; no funciona en el Firefox, y como que el texto es transparente, los usuarios de este navegador verían solo el "panal" de fondo ( background-image:url(images/panal.jpg); ).

Hablemos de text-fill-color

La propiedad text-fill-color permite, exactamente como la propiedad color, especificar el color de relleno del texto. Si las dos propiedades están especificadas, la propiedad text-fill-color tendrá prioridad sobre la propiedad color.
En el siguiente ejemplo utilizamos la propiedad -webkit-text-fill-color que  tiene prioridad sobre la propiedad color solo en los navegadores basados en –webkit-. Firefox en cambio ignora las propiedades que tienen el prefijo –webkit-, y toma en consideración solo la propiedad color: exactamente lo que necesitamos.

NOTA: background-clip: text no funciona en Firefox.


h1#panal {
		font-family:"Arial Black", Gadget, sans-serif;
		font-size:85px;
    	background-image:url(images/panal.jpg);
    	-webkit-background-clip: text;
		color:Gold;
		-webkit-text-fill-color: transparent;
		text-align:center;
		margin:0;
		padding:0;
}
p#nota{text-align:center; color:red;}


ABEJA

ABEJA