Que uma letra tenha 2 cores em CSS

kenyis · 21/08/2019

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;}

jmdoren · 21/08/2019

Aplica css a la letra Apren<span class="bbb">d</span>e

marjuanm · 23/08/2019

kenyis disse:
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 o anexo 143181

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

Ver o anexo 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:

 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 👍

Kevin Ramos · 23/08/2019

jmdoren disse:
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.

OLMID · 28/08/2019

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 🙂

CANIBAL · 29/08/2019

Woo.. Muchas gracias por compartirlo.. no lo sabía :3

SKullGol · 02/11/2019

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.

Christianabreuh · 02/11/2019

kenyis disse:
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 o anexo 143181

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

Ver o anexo 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:

 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 -.-

Que uma letra tenha 2 cores em CSS

kenyis

jmdoren

marjuanm

Kevin Ramos

OLMID

CANIBAL

SKullGol

Christianabreuh

Tópicos similares