Esta publicación expone la metodología de trabajo aplicable al objetivo de lograr un texto de color degradado lineal aplicando CSS, incluidas las propiedades de webkit necesarias para garantizar la compatibilidad en diferentes navegadores.
El degradado lineal se utiliza para crear efectos de texto llamativos, especialmente adecuados para sitios web o aplicaciones de temática oscura. Este método implica rellenar el texto con códigos de color de degradado lineal, lo que le da un aspecto atractivo y llamativo. Los efectos de texto de degradado lineal son ideales para temas oscuros y proporcionan una apariencia moderna y elegante.
En CSS3 se cuenta con 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.
Metodología del texto con degradado lineal
Consulte el método linear-gradient() para crear un fondo degradado y luego use las propiedades de webkit para superponer ese fondo con nuestro texto.
Ejemplo: En la siguiente sección, el texto utilizado para la demostración está envuelto dentro de la etiqueta <h1>.
Código HTML:
Para empezar, definimos el código HTML, con un contenedor básico dentro del cual tenemos el encabezado con la etiqueta <h1> con el texto “Ejemplo de texto con color degradado”.
<h1 class="texto">Ejemplo de texto con color degradado </h1>
</div>
Reglas CSS
Definimos un degradado como fondo del texto:
Veremos que al hacerlo, como es previsible, el fondo se aplica a toda el área rectangular detrás de él.
Respecto al contenedor, se sujeta a las siguientes reglas:
font-family: Arial, Helvetica, sans-serif;
background:black;
padding:20px 0;
margin:10px auto;
width:85%;
text-align:center;
}
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.
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; font-size:25px;}
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 resultado es el siguiente:
Ejemplo de texto con color degradado
Bibliografía:
https://ed.team/blog/truco-css-texto-con-color-degradado
https://www.geeksforgeeks.org/how-to-create-linear-gradient-text-using-html-and-css/