Degradado de un texto con CSS.
Resumen.
Como bien sabemos, el diseño es muchas veces una cuestión de modas, y muy de moda se ha puesto últimamente en el diseño Web es el degradado de los textos, es decir, el texto se inicia en su tono normal, por ejemplo negro, y a medida que se suceden las líneas de texto, cada vez aparece más claro, hasta que se hace ilegible o casi ilegible.Artículo.
El efecto de degradado de los textos se ha extendido mucho últimamente, y ciertamente es un efecto muy atractivo que invita a los visitantes de nuestras Web a pulsar un enlace, a registrase para ver ciertos contenidos, etc.
Un efecto como este con HTML era algo impensable, pero con CSS es algo muy sencillo. Sencillamente tenemos que asignar un cierto color al inicio de nuestro texto y otro para el final, la degradación del color se ajustará a la longitud de este con solo 3 líneas de código.
Por nombre de color:
background: -webkit-linear-gradient(black,white);
Por color hexadecimal:
background: -webkit-linear-gradient(#800000,#FF9933);
Por color RGB:
background: -webkit-linear-gradient(rgb(250,250,250),rgb(40,25,150));
Por supuesto, aunque damos por sentado que la lógica de una transición de color es de más oscuro a mas claro, la transición también puede hacerse de mas claro a mas oscuro, como es el caso del degradado RGB expuesto.
Con estas tres líneas:
Un efecto como este con HTML era algo impensable, pero con CSS es algo muy sencillo. Sencillamente tenemos que asignar un cierto color al inicio de nuestro texto y otro para el final, la degradación del color se ajustará a la longitud de este con solo 3 líneas de código.
Aunque la transición que mas se usa es de negro a blanco, se puede realizar cualquier tipo de transición usando desde los nombres de los colores, sus códigos hexadecimales o los valores RGB de los colores de nuestro interés.<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Transicion de color en los textos. ArtesaniaWeb.ES</title> <style> <!-- .texto{ font-family: Tahoma; /* para el tipo de letra */ font-size: 1.5rem; /* para el tamaño de las letras */ background: -webkit-linear-gradient(black,white); /* transicion del degradado */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } --> </style> </head> <body> <div class="texto"> <p><b>Operar con los valores de un array bidimensional.</b></p> <p>Como ya dijimos en su momento, un array es un tipo de variable que contiene un conjunto de valores. Un array consta de dos partes, la key o clave, y el value o valor. Pues bien, el value puede ser una variable de cualquier tipo, incluido el tipo array, siendo este el tipo de array al que nos referimos cuando hablamos de array bidimensional. En este artículo veremos cómo operar con arrays de este tipo con valores numéricos.</p> </div> </body> </html>
Por nombre de color:
background: -webkit-linear-gradient(black,white);
Por color hexadecimal:
background: -webkit-linear-gradient(#800000,#FF9933);
Por color RGB:
background: -webkit-linear-gradient(rgb(250,250,250),rgb(40,25,150));
Por supuesto, aunque damos por sentado que la lógica de una transición de color es de más oscuro a mas claro, la transición también puede hacerse de mas claro a mas oscuro, como es el caso del degradado RGB expuesto.
Con estas tres líneas:
Y por supuesto, las demás propiedades elementales, como tipo de letra, tamaño de esta, etc. ya podemos elegir el tipo de degradado que mejor se ajusta a nuestras páginas Webs.background: -webkit-linear-gradient(rgb(250,250,250),rgb(40,25,150)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Tags: Degradado || color || texto || estilo