Esquema de texto en HTML

Este artículo presentará un método para delinear texto en HTML con la ayuda de CSS.

Use la propiedad CSS text-shadow para proporcionar un esquema para el texto en HTML

La sombra de texto es una propiedad CSS que añade una sombra al texto. Toma una lista de sombras separadas por comas como valores, y cada sombra contiene desplazamiento X, desplazamiento Y, radio de desenfoque y color.

Por ejemplo, si un texto tiene una propiedad tet-shadow de 1px 1px 3px black, significa que la sombra de texto del texto tiene un desplazamiento X de 1px, un desplazamiento Y de 1px, un radio de desenfoque de 3px y tiene color black. El desplazamiento X y el desplazamiento Y son responsables de la dirección de la sombra del texto, y el desplazamiento X representa la sombra en dirección horizontal, mientras que el desplazamiento Y representa la sombra en dirección vertical.

El radio de desenfoque define la distancia desde el texto hasta la cual se desenfocará la sombra. Para darle al texto un contorno completo, tenemos que establecer múltiples valores de text-shadow para que el texto tenga un contorno en todas las direcciones.

Por ejemplo, crea un <div> y escribe texto aleatorio dentro de él, y dale a <div> un nombre de clase outline. En CSS, selecciona la clase outline.

Establezca su propiedad color en blanco. A continuación, establezca la propiedad text-shadow de div en -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black;.

Aquí, hemos aplicado cuatro pares de valores para la propiedad text-shadow. Crea el contorno del texto en todas las direcciones, y usamos 0 para el radio de desenfoque ya que no queremos que el texto se vea borroso.

El valor de las compensaciones también acepta un valor negativo. El valor negativo para el desplazamiento X creará la sombra en el lado izquierdo, mientras que el desplazamiento Y negativo creará la sombra en la parte superior del texto.

También establecemos el color del texto en blanco y la sombra en negro para que el texto y el contorno sean visibles en el fondo blanco.

Código - HTML:

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

Código - CSS:

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

Por lo tanto, podemos usar la propiedad text-shadow de CSS para dar un contorno del texto en HTML.