How to outline text via CSS

Asked

Viewed 38,033 times

4

Personal someone can help me to make this outline in text by css

Texto com contorno em css

css

5 answers

8


You can use -webkit-text-stroke, but has no support for 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

Another way to do this is to place the text inside an SVG and use the property stroke-width in the text. The ideal is that you build the viewBox straight to 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>

1

You can use:

text-shadow: 2px 2px black;

  • if possible always put an example or image of the code result

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>

  • yours worked but I wanted the edge to be as shown in the picture above much larger

  • Just increase the pixel value (px)...

  • but which one please

  • Thank you all for your help

  • give me the site you saw this text

  • You mean the image I posted?

  • that of this image

  • brother was not from any site, I created this image by Photoscape to use as example, but here is this example http://www.paolawilm.com.br/css-borda-e-text/ but the border is very thin I tried to increase this border and could not get

  • The example our friend posted below works

  • Yes thanks for the help, you guys are great at it

Show 5 more comments

-3

.text-custom {
    -webkit-text-stroke-width: 4px; /* largura da borda */
    -webkit-text-stroke-color: black; /* cor da borda */
    -webkit-text-fill-color: white;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.