4

Pessoal alguém pode me ajudar a fazer esse contorno em texto pelo css

Texto com contorno em css

5 Respostas 5

9

Você pode usar -webkit-text-stroke, mas não tem suporte para o IE:

<style>
    -webkit-text-stroke-width: 2px; /* largura da borda */
    -webkit-text-stroke-color: #000; /* cor da borda */
</style>

.borda_texto{
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000;
font-size: 3em; color: #fffdd9;
}
<div class="borda_texto">
    Contorno no texto
</div>

3

Outra forma de fazer esse efeito é colocando o texto dentro de um SVG e usar a propriedade stroke-width no texto. O ideal é que vc construa o viewBox direitinho pro seu SVG para poder aplicar sem dor de cabeça, mas fica o exemplo ai.

<svg>
  <text x="0" y="60px" font-size="60px" style="fill: white; stroke: black; stroke-width: 2px">
    Exemplo
  </text>  
<text x="0" y="120px" font-size="60px" style="fill: red; stroke: blue; stroke-width: 3px; font-family: sans-serif">
    Exemplo 2
  </text>
</svg>

1

Você pode usar:

text-shadow: 2px 2px black;
1
  • 1
    se possível sempre coloque um exemplo ou imagem do resultado do código 27/07/2018 às 15:42
0
<style>
 .sombra {text-shadow:#000 -1px -1px}
</style>

ou

<style>
     .borda {color:#FFCCAC; text-shadow:#000 1px -1px, #000 -1px 1px, #000 1px 1px, #000 -1px -1px}
</style>
10
  • o seu deu certo mas eu queria que a borda fosse como mostra na imagem acima bem maior
    – Jr17
    4/10/2017 às 17:56
  • É só aumentar o valor de pixels (px)...
    – user75204
    4/10/2017 às 17:59
  • mas qual deles por favor
    – Jr17
    4/10/2017 às 18:02
  • Obrigado a todos pela ajuda
    – Jr17
    4/10/2017 às 18:15
  • me passa o site que vc viu esse texto 4/10/2017 às 18:17
-3
.text-custom {
    -webkit-text-stroke-width: 4px; /* largura da borda */
    -webkit-text-stroke-color: black; /* cor da borda */
    -webkit-text-fill-color: white;
}

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 .