En este artículo, aprenderemos a colorear el texto de la página web usando HTML y CSS. Básicamente, podemos usar el atributo de color <font> en HTML o gradiente lineal para colorear el texto usando CSS. Exploraremos ambos métodos y comprenderemos su uso con la ayuda de ejemplos.
Métodos :
- Atributo color <font>: Se utiliza para especificar el color del texto dentro del elemento <font>. Se puede usar para cada carácter al que desee aplicar color o una palabra completa.
- función linear-gradient() : se utiliza para el estilo de texto en el que el texto se rellena con códigos de color de degradado lineal.
Método 1: usar el atributo de color <font>.
Sintaxis:
<font color="color_name|hex_number|rgb_number">Text content</font>
Valores de atributos:
- hex_number: Establece el color del texto usando el código hexadecimal de color. Por ejemplo, “#0000ff” .
- rgb_number: Establece el color del texto usando código RGB. Por ejemplo: “rgb(0, 153, 0)” .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: green;
font-size: 60px;
}
</style>
</head>
<body>
<center>
<h1>
Welcome To
<font color="#FF2626">G</font>
<font color="#252A34">e</font>
<font color="#753422">e</font>
<font color="#FFD523">k</font>
<font color="#71EFA3">s</font>
<font color="#0F52BA">for</font>
<font color="#66CC66">G</font>
<font color="#FF9966">e</font>
<font color="#FFCCCC">e</font>
<font color="#00C1D4">k</font>
<font color="#EFE3D0">s</font>
</h1>
</center>
</body>
</html>
Producción:
Método 2: usar el atributo de gradiente lineal.
Sintaxis:
background: linear-gradient(to left, color names); -webkit-background-clip: text; color: transparent;
Pasos para agregar multicolor en el texto:
- Agregue un texto simple dentro de la etiqueta <div> con el selector requerido.
- Aplique la propiedad de degradado lineal con cualquier color de su elección.
- Aplique las propiedades del webkit que llenarán el texto con el fondo degradado y declararán la propiedad de color con un fondo transparente.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.multicolor-text {
text-align: center;
font-size: 50px;
background: linear-gradient(to left,
violet,
indigo,
blue,
green,
yellow,
orange,
red);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="multicolor-text">
Welcome To GeeksforGeeks!
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA