Bienvenidos al primer artículo de la serie Trucos CSS. Empezaremos esta serie con un texto de color degradado.
En CSS3 tenemos máscaras, que consisten en definir un área que delimitará la visibilidad de un elemento. Si bien el concepto es amplio, para este truco solo veremos la máscara de texto.
Para empezar, definimos un degradado como fondo del texto: background: linear-gradient(yellow,red). Veremos que al hacerlo, como es previsible, el fondo se aplica a toda el área rectangular detrás de él.
Texto con color degradado
Para que el texto funcione como máscara usamos -webkit-background-clip: text (solo funciona en navegadores basados en webkit como Chrome o Safari). Al hacerlo, solo vemos el texto (con el color elegido) pero no el degradado; esto ocurre porque el color del texto oculta el fondo. Añadiendo color: transparent podremos ver el degradado.
Texto con color degradado
.texto {
background: linear-gradient(yellow,red);
-webkit-background-clip: text;
color: transparent;
}
Compatibilidad con otros navegadores
El código anterior genera un bonito efecto en Chrome, pero que hay de ¿Firefox o IE? En esos navegadores solo vamos veremos un rectangulo con fondo degradado sin ningún texto (porque definimos color transparente). Para solucionarlo, utilizaremos el prefijo -webkit- para el degradado, así otros nevagadores ignorarán esa línea. También usaremos -webkit-text-fill-color que controla el color de relleno de los textos, evitando usar color: transparent (que lo reservaremos para otros navegadores). El texto siguiente se verá rojo en Firefox/IE:
Texto con color degradado
.texto {
background: -webkit-linear-gradient(yellow,red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: tomato;
}