Can someone help me to make this outline in text by css
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>
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>
<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>
You can use:
text-shadow: 2px 2px black;