Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Truco CSS: Texto con color degradado

Truco CSS: Texto con color degradado - Escuela Digital

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;  
}

 

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal