Borda do texto usando css (borda ao redor do texto)

108

Existe uma maneira de integrar uma borda ao redor do texto como a imagem abaixo?

borda do texto

text css

— jho1086
fonte

222

Use várias sombras de texto:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

insira a descrição da imagem aqui

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

Expandir trecho

Como alternativa, você pode usar o traço de texto, que só funciona no webkit:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

insira a descrição da imagem aqui

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Expandir trecho

Também leia mais como CSS-Tricks.

— estante de livros
fonte

OBSERVAÇÃO QUE VALE A PENA: Teste os recursos de vários navegadores desses métodos ... Estou tendo sérios problemas com clientes no IE, pelo menos 9 ... meio que pensando em usar o método PNG.

— ErickBest,

1

@ErickBest O segundo link menciona problemas do IE9. Embora esta página não seja difícil de encontrar em google caniuse.com/css-textshadow

— AnnanFay

Causa má exibição de texto com transparência (usando rgba).

— Alejandro Nava

14

Certo. Você pode usar CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

No entanto, ele não aparecerá em todos os navegadores imediatamente. Usar uma biblioteca de scripts como o Modernizr ajudará a acertar na maioria dos navegadores.

— Jtheman
fonte

1

Já tentei isso, senhor, mas o que preciso é um texto branco sólido.

— jho1086

8

Eu não gosto muito de soluções baseadas na multiplicação de sombras de texto, não é realmente flexível, pode funcionar para um traço de 2 pixels onde as direções para adicionar são 8, mas com apenas 3 pixels as direções de traço tornam-se 16 e assim por diante. Não é muito confortável de gerenciar.

A ferramenta certa existe, é SVG <text> O problema de suporte dos navegadores não vale nada neste caso, porque o uso de text-shadow também tem seu próprio problema de suporte, filter: progid:DXImageTransformpode ser usado ou IE <10, mas muitas vezes não funciona como esperado.

Para mim, a melhor solução continua sendo o SVG com um substituto em texto não traçado para navegadores mais antigos:

Este tipo de abordagem funciona em praticamente todas as versões do Chrome e Firefox, Safari desde a versão 3.04, Opera 8, IE 9

Comparado a text-shadowcujos suportes são: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, resulta ainda mais compatível.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

Expandir trecho

— Holden
fonte

1

obrigado por compartilhar sua solução. Acho que seu direito é mais flexível. Mas na maioria das vezes é mais eficiente usar CSS. Vou tentar usar o SVG mais tarde.

— jho1086

6

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

— chezwhite
fonte

3

Você também pode adicionar uma explicação?

— Robert

5

O seguinte irá abranger todos os navegadores que vale a pena cobrir:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

— dtbarne
fonte