Borde de texto usando css (borde alrededor del texto)

108

¿Hay alguna forma de integrar un borde alrededor del texto como la imagen de abajo?

borde de texto

text css

— jho1086
fuente

222

Utilice varias 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;

ingrese la descripción de la imagen aquí

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 fragmento

Alternativamente, puede usar el trazo de texto, que solo funciona en webkit:

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

ingrese la descripción de la imagen aquí

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

<h1>test</h1>

Expandir fragmento

También lea más como CSS-Tricks.

— bookcasey
fuente

VALE LA PENA OBSERVAR: Por favor, pruebe las capacidades de estos métodos entre navegadores ... Estoy teniendo serios problemas con los clientes en IE al menos 9 ... estoy pensando en seguir el camino PNG.

— ErickBest

1

@ErickBest El segundo enlace menciona problemas de IE9. Aunque esta página no fue difícil de encontrar en google caniuse.com/css-textshadow

— AnnanFay

Provoca una mala visualización del texto con transparencia (usando rgba).

— Alejandro Nava

14

Por supuesto. Podrías usar CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Sin embargo, no se mostrará en todos los navegadores de inmediato. Sin embargo, usar una biblioteca de scripts como Modernizr ayudará a hacerlo bien en la mayoría de los navegadores.

— jtheman
fuente

1

Ya lo intenté, señor, pero lo que necesito es un texto en blanco continuo.

— jho1086

8

No me gustan tantas soluciones basadas en la multiplicación de sombras de texto, no es realmente flexible, puede funcionar para un trazo de 2 píxeles donde las direcciones para agregar son 8, pero con solo 3 píxeles, las direcciones de trazo se convierten en 16, y así sucesivamente. No es muy cómodo de administrar.

Existe la herramienta correcta, es SVG <text> El problema de soporte de los navegadores no vale nada en este caso, porque el uso de text-shadow también tiene su propio problema de soporte, filter: progid:DXImageTransform se puede usar o IE <10 pero a menudo no funciona como se esperaba.

Para mí, la mejor solución sigue siendo SVG con un respaldo en el texto sin trazos para el navegador más antiguo:

Este tipo de aplicación funciona prácticamente en todas las versiones de Chrome y Firefox, Safari desde la versión 3.04, Opera 8, IE 9

En comparación con text-shadowcuyos soportes son: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, resulta aún más compatible.

.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 fragmento

— holden
fuente

1

gracias por compartir su solución. Creo que tienes derecho a que sea más flexible. Pero la mayoría de las veces es más eficiente usar CSS. Intentaré usar SVG más tarde.

— jho1086

6

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

— chezwhite
fuente

3

¿También puede agregar una explicación?

— Robert

5

Lo siguiente cubrirá todos los navegadores que vale la pena cubrir:

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
fuente