How to make a text outline via CSS

0

Can someone help me to make this outline in text by css

    
asked by anonymous 04.10.2017 / 19:44

4 answers

1

You can use -webkit-text-stroke , but it does not support 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>
    
04.10.2017 / 20:03
1

Another way to do this is to place the text inside an SVG and use the stroke-width property in the text. Ideally, you should build viewBox right for your SVG to be able to apply without a headache, but the example is there.

<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>
    
27.07.2018 / 19:26
0
<style>
 .sombra {text-shadow:#000 -1px -1px}
</style>

or

<style>
     .borda {color:#FFCCAC; text-shadow:#000 1px -1px, #000 -1px 1px, #000 1px 1px, #000 -1px -1px}
</style>
    
04.10.2017 / 19:47
-1

You can use:

text-shadow: 2px 2px black;
    
27.07.2018 / 17:11