Pessoal alguém pode me ajudar a fazer esse contorno em texto pelo css
5 Respostas
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>
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>
Você pode usar:
text-shadow: 2px 2px black;
-
1se possível sempre coloque um exemplo ou imagem do resultado do código Commented 27/07/2018 às 15:42
<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>
-
o seu deu certo mas eu queria que a borda fosse como mostra na imagem acima bem maior– Jr17Commented 4/10/2017 às 17:56
-
É só aumentar o valor de pixels (px)...– user75204Commented 4/10/2017 às 17:59
-
-
-
.text-custom {
-webkit-text-stroke-width: 4px; /* largura da borda */
-webkit-text-stroke-color: black; /* cor da borda */
-webkit-text-fill-color: white;
}