Este artículo mostrará el enfoque para agregar un efecto de degradado en el texto usando la propiedad CSS background-clip. La salida final de texto usando este efecto se muestra a continuación. Las propiedades CSS que se usarían son flexbox , background-clip y -webkit-background-clip y el fondo .
Sección HTML: esta sección contiene el marcado HTML que contendrá el texto al que se debe aplicar estilo. El texto se ha envuelto en un contenedor div como una buena práctica y para ayudar a que se centre en la página. El gradiente de clase también se ha agregado al texto. No se necesita nada más complicado en esta sección.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Text Gradient</title> </head> <body> <div class="container"> <h1 class="gradient"> Happy Halloween </h1> </div> </body> </html>
Sección CSS: La sección CSS consistiría en estilizar el texto usando el efecto degradado. Se utiliza una fuente de Google llamada Metal Mania para darle el efecto deseado. Primero restableceremos todo en el CSS como una buena práctica. La fuente de Google que se utilizará se importará y utilizará a continuación. También centraremos todo usando las propiedades de flexbox.
CSS
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Metal Mania",
cursive;
}
.container {
background: #000;
height: 100vh;
/* Center everything in the page */
display: flex;
justify-content: center;
align-items: center;
}
</style>
Crear el efecto de degradado: Comenzaremos a crear el efecto de degradado principal. La lógica es que se establece un fondo de degradado lineal para el texto. Luego, el fondo se recorta al tamaño del texto. Después de recortar, el color del texto se establece en transparente.
La propiedad de bloque en línea hará que el fondo tenga el tamaño del texto del encabezado. La propiedad background-clip con el valor de texto nos permitirá recortar el fondo degradado lineal hasta el texto. La versión de prefijo -webkit se usa para que sea a prueba de fallas. Hacer que el color del texto sea transparente solo mostrará el fondo de degradado lineal .
CSS
<style>
.gradient {
font-size: 5rem;
/* Set the background of
the text */
background:
linear-gradient(to right,
#fcc133,
#334efc);
display: inline-block;
/* Clip the background upto
the text */
-webkit-background-clip: text;
background-clip: text;
/* Set the color of the text
to transparent */
color: transparent;
}
</style>
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Gradient</title>
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Metal Mania",
cursive;
}
.container {
background: #000;
height: 100vh;
/* Center everything in the page */
display: flex;
justify-content: center;
align-items: center;
}
.gradient {
font-size: 5rem;
/* Set the background of
the text */
background:
linear-gradient(to right,
#fcc133,
#334efc);
display: inline-block;
/* Clip the background upto
the text */
-webkit-background-clip: text;
background-clip: text;
/* Set the color of the text
to transparent */
color: transparent;
}
</style>
</head>
<body>
<div class="container">
<h1 class="gradient">
Happy Halloween
</h1>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nemotivity y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA