sombreado - Borde de texto usando css(borde alrededor del texto)

sombreado de bordes css

Question

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

Answer 1

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 */

Answer 2

No me gustan muchas 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 trazos se convierten en 16, y así sucesivamente. . No es realmente cómodo de administrar.

La herramienta correcta existe, 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 no procesado para un 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-shadow cuyos 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>

Answer 3

Por supuesto. Puede 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.

Answer 4

Use múltiples 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;

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>

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

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

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

<h1>test</h1>

Lea también más como CSS-Tricks.

Answer 5

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