Que una letra tenga 2 colores en CSS

kenyis · 2019-08-21T08:12:19-0500

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

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

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 · 2019-08-21T08:45:42-0500

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

marjuanm · 2019-08-23T12:31:38-0500

kenyis dijo:
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:

 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 · 2019-08-23T22:36:39-0500

jmdoren dijo:
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 · 2019-08-28T06:54:04-0500

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

Rykrdo · 2019-08-29T11:28:47-0500

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

SKullGol · 2 Nov 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 · 2 Nov 2019

kenyis dijo:
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:

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