Que una letra tenga 2 colores en CSS

  • Autor Autor kenyis
  • Fecha de inicio Fecha de inicio
kenyis

kenyis

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, estoy queriendo hacer que una letra en una palabra tenga 2 colores, he logrado hacerlo, pero justo en la mitad de la frase, pero en realidad yo lo quiero un poco antes.

Mejor se entiende con el ejemplo:

La frase es: Aprende a tu ritmo

Quiero que la "d" tenga 2 colores, con mi CSS he logrado que quede así:

Screen Shot 2019-08-21 at 8.10.30 AM.webp


Pero yo quiero que el corte sea en la "d" y en la parte de arriba, así:

Screen Shot 2019-08-20 at 6.51.35 PM.webp


Alguien tiene idea de como hacerlo? porsiacaso les dejo el CSS que yo utilice:

HTML:
<div class="fondo">

<div class="gradient_text_class"><h1>

Aprende a tu ritmo</h1></div>

</div>

CSS:
<!-- CSS -->

h1 {
  background-image: linear-gradient(45deg, blue 50%, pink 50%);
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fondo {background: red;}
 
Aplica css a la letra Apren<span class="bbb">d</span>e
 
Hola, estoy queriendo hacer que una letra en una palabra tenga 2 colores, he logrado hacerlo, pero justo en la mitad de la frase, pero en realidad yo lo quiero un poco antes.

Mejor se entiende con el ejemplo:

La frase es: Aprende a tu ritmo

Quiero que la "d" tenga 2 colores, con mi CSS he logrado que quede así:

Ver el archivo adjunto 143181

Pero yo quiero que el corte sea en la "d" y en la parte de arriba, así:

Ver el archivo adjunto 143182

Alguien tiene idea de como hacerlo? porsiacaso les dejo el CSS que yo utilice:

HTML:
<div class="fondo">

<div class="gradient_text_class"><h1>

Aprende a tu ritmo</h1></div>

</div>

CSS:
<!-- CSS -->

h1 {
  background-image: linear-gradient(45deg, blue 50%, pink 50%);
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fondo {background: red;}

Oye que buen truco, no lo conocía, gracias por compartirlo 👍
 
Aplica css a la letra Apren<span class="bbb">d</span>e

Eso sólo pinta la letra completa dentro de span, lo que él quiere es que la letra que está dentro de span por ejemplo la mitad sea de un color y la otra de otro color (la mitad de la letra osea de la d) es interesante ese efecto.
 
Hola, solo tienes que modificar ésta parte del código css, dejándolo así

CSS:
 background-image: linear-gradient(45deg, blue 41%, pink 41%);

Ver ejemplo

Saludos 🙂
 
Woo.. Muchas gracias por compartirlo.. no lo sabía :3
 
Aplicarle una etiqueta span a la letra y otra a la parte restante del texto.
A un span le aplicas un degradado sin trama y al resto de la frase un color sólido. Así lo hubiera hecho yo, jaja.
Gracias por truco, no lo conocia.
 
Última edición:
Hola, estoy queriendo hacer que una letra en una palabra tenga 2 colores, he logrado hacerlo, pero justo en la mitad de la frase, pero en realidad yo lo quiero un poco antes.

Mejor se entiende con el ejemplo:

La frase es: Aprende a tu ritmo

Quiero que la "d" tenga 2 colores, con mi CSS he logrado que quede así:

Ver el archivo adjunto 143181

Pero yo quiero que el corte sea en la "d" y en la parte de arriba, así:

Ver el archivo adjunto 143182

Alguien tiene idea de como hacerlo? porsiacaso les dejo el CSS que yo utilice:

HTML:
<div class="fondo">

<div class="gradient_text_class"><h1>

Aprende a tu ritmo</h1></div>

</div>

CSS:
<!-- CSS -->

h1 {
  background-image: linear-gradient(45deg, blue 50%, pink 50%);
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fondo {background: red;}
.texto{
background: -webkit-linear-gradient(black, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Es algo tan simple -.-
 
Atrás
Arriba