Textos con degradados

Oct 6, 2017 | CSS, DIVI (Elegant Themes), Tutoriales

Logo-CSS3Mucho se ha hablado del tema de los fondos gradiantes, pero seguramente que más de una vez os habréis preguntado si se podría aplicar este tipo de fondos a los textos.

En este tutorial, voy a explicar un sencillo código CSS con el que podréis utilizar textos con dichos fondos, sin tener que acudir a programas como por ejemplo photoshop para poder lograr este efecto y así perder la propiedad de texto en si.

Vamos a aplicarle un fondo gradiante a un H1

En primer lugar introducimos un módulo de código por ejemplo, aunque también podría servir el de texto.

A este H1 le he asignado una clase, en este caso “texto”, así podré añadirle propiedades desde el panel de CSS personalizado.

Ahí es donde iremos ahora, a CSS personalizado e introducimos el siguiente código:


.texto
{
font-size: 160px;
font-family: Arial;
font-weight: bold;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Las 3 primeras líneas le dan el tamaño, familia y grosor del texto.

La siguiente línea (background: -webkit-linear-gradient(red, yellow);) es la que define los colores que formaran el gradiante. En este caso de rojo a amarillo.

“-webkit-background-clip: text;” Este código lo que hace es introducir la gradiante que conforma toda la caja del H1 en el propio texto del H1, como podría llegar a ser una máscara en Photoshop.

Y por último, la linea “-webkit-text-fill-color: transparent;” lo que hace es darle un color transparente al texto, a fin de que se pueda ver el fondo que hemos introducido en el mismo.

El resultado ya lo habréis visto en el encabezado de este post.

Espero que os haya sido de utilidad, y no olvidéis comentar que os ha parecido esta mini ayuda.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: