El degradado lineal es un tipo de estilo de texto en el que el texto se rellena con códigos de color de degradado lineal. Este tipo de efectos generalmente se usan en sitios web o aplicaciones con temas oscuros para que el texto se vea atractivo y audaz. Son casi adecuados para temas oscuros y no van bien con los temas más claros.
Enfoque: consulte el método linear-gradient() para crear un fondo degradado y luego use las propiedades del webkit para superponer ese fondo con nuestro texto.
Código HTML: en la siguiente sección, el texto utilizado para la demostración está envuelto dentro de la etiqueta h1.
<!-- Write HTML code here --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Gradient Text</title> </head> <body> <h1>GEEKSFORGEEKS</h1> </body> </html>
Código CSS: Para el código CSS, siga los pasos que se indican a continuación.
- Paso 1: aplique un fondo básico a la etiqueta del cuerpo y alinee el texto al centro de la página.
- Paso 2: Realice algunos estilos básicos como el tamaño de fuente y la familia, etc.
- Paso 3: aplique la propiedad de degradado lineal con cualquier color de su elección.
- Paso 4: ahora aplique las propiedades del webkit, la primera hará que todo el fondo degradado sea transparente y la segunda propiedad llenará el texto con el fondo degradado.
Nota: Puede aplicar algo de sombra al texto para darle un aspecto de acabado más oscuro o mate.
<style>
body {
background: rgb(39, 39, 39);
}
h1 {
position: absolute;
top: 40%;
left: 40%;
font-size: 40px;
font-family: Arial,
Helvetica, sans-serif;
background: linear-gradient(
to right, #f32170, #ff6b08,
#cf23cf, #eedd44);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Gradient Text</title>
<style>
body {
background: rgb(39, 39, 39);
}
h1 {
position: absolute;
top: 40%;
left: 40%;
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to right, #f32170,
#ff6b08, #cf23cf, #eedd44);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<h1>GEEKSFORGEEKS</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA