28

Gostaria de saber se com CSS tem como deixar apenas metade de uma letra, ou metade de uma palavra, com outra cor e a outra metade com outra?

Seria possível chegar nesse resultado da imagem abaixo só com CSS?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Esse é o modelo base que tenho no momento.

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    color: red;
    margin:.15em;
}
<h1>A</h1>
<h1>ABC</h1>

4
  • Perdi. Vou deixar alguém responder Commented 13/09/2018 às 18:53
  • @WallaceMaxters se tiver algo com CSS seria interessante!
    – hugocsl
    Commented 13/09/2018 às 18:57
  • 1
    Eu tentei definir o color: transparent e colocar dois valores em text-shadow. Você pode brincar com isso se quiser. Commented 13/09/2018 às 19:03
  • 1
    @WallaceMaxters acho que com linear-gradiente vc teria um resultado melhor hein...
    – hugocsl
    Commented 13/09/2018 às 19:06

5 Respostas 5

36

O mais próximo que consegui foi usando background-clip: texte text-fill-color: transparent.

Veja:

.two-colors{
   font-size: 160px;
   background: linear-gradient(to right, blue 50%, red 0);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 
  font-weight: 900;
  font-family: Arial;
  
}
<span class="two-colors">A</span>
<span class="two-colors">B</span>
<span class="two-colors">ABC</span>

Elaborei o CSS parecido com o dessa resposta no SOEN, porém eu mudei a direção do gradiente, para ficar meio a meio verticalmente as cores e preferi aplicar o estilo letra por letra.

No caso, para as letras ficarem "na mesma linha", é necessário que o elemento que recebe o estilo tenha definido o display com o valor inline-block ou inline.

17

Você pode usar um SVG com texto dentro dele.

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="bicolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="tricolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="green"/>
            <stop offset="66%" stop-color="green"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="smooth">
            <stop offset="33%" stop-color="red"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
    </defs>
    <text x="0" y="20" fill="url(#bicolored)">Some bicolored Text</text>
    <text x="0" y="40" fill="url(#tricolored)">Some tricolored Text</text>
    <text x="0" y="60" fill="url(#smooth)">Some smooth gradient Text</text>
</svg>

Fonte: https://stackoverflow.com/a/34293307/1452488

0
13

Usando apenas CSS da pra fazer dessa forma

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(left, red 10%, blue 0%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>
The BLA BLA
</h1>

1
  • Incrível. Top demais . Commented 23/10/2018 às 6:48
6

Mais um...

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    margin: .15em;
    background: -webkit-linear-gradient(left,blue 50%, red 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}
<h1>A</h1>

<h1>ABC</h1>

1
  • 1
    Poderia adicionar uma explicação. Esse linear-gradient sempre me confunde e não entendi porque o seu ficou "sem opacidade" de uma cor para outra. Ficou a cor sólida. É por causa do left? (eu usei to left, tem alguma diferença? Commented 13/09/2018 às 19:22
6

Também é possível utilizando um pseudo-elemento ::after com o content:"A" igual ao do texto <h1>A</h1>, porém "cortado" em 50% da largura.

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    color: red;
    margin:.15em;
    position: relative;
    display: inline-block;
}
h1::after {
    content: attr(data-texto);
    position: absolute;
    overflow: hidden;
    width: 50%;
    top: 0;
    left: 0;
    color: blue;
    text-transform: uppercase;
pointer-events: none;
  user-select: none;
}
<h1 data-texto="a">A</h1>
<h1 data-texto="ABC">ABC</h1>

5
  • É uma alternativa às anteriores. Mas no Firefox, pelo menos, atrapalha um pouco a seleção do texto. Commented 13/09/2018 às 19:34
  • @fernandosavio legal a observação, vc tem razão, selecionando na mão fica meio estranho, mas dando dois cliques na palavra é de boa, de qualquer forma é um pondo a se levar em consideração ao escolher o método!
    – hugocsl
    Commented 13/09/2018 às 19:38
  • Era pra ter escrito que era uma boa alternativa aos anteriores... Mas de qualquer maneira, fica como observação caso alguém esbarre aqui. Commented 13/09/2018 às 19:41
  • Pode fazer como no exemplo daquela minha outra resposta da pergunta do dia, usando ::after e ::before. Dai não precisa repetir o texto na hora de selecionar não acontece esse efeito (porque não seleciona nada)
    – Costamilam
    Commented 31/10/2018 às 0:02
  • É verdade, inclusive editei e coloquei pointer-events: none; user-select: none; no ::avter valeu a dica!
    – hugocsl
    Commented 31/10/2018 às 0:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .