soy Kseso y esto EsCSS

text-stroke (textos con contorno): 4 vías CSS

Diferentes métodos (cuatro) con sus pros y contras para dibujar un contorno o perfil a los textos con CSS.

text-stroke (textos con contorno): 4 vías CSS

·Por Kseso ✎ 4
text-stroke (textos con contorno): 4 vías

Un efecto clásico con los textos es añadirles un contorno o perfil para resaltarlos del fondo sobre el que se muestra. En entornos gráficos no suele representar ningún problema. Otro tema es hacer lo mismo con los textos en la web con unas mínimas garantías.

Hasta no hace tanto no era tan fácil ya que ahí fuera, en las especificaciones de CSS, no está contemplada esta posibilidad. Aunque formas hay. Y no una o dos. Hasta cuatro he encontrado yo. Cada una con sus pros y sus contras. Vamos con ellas.

Contorno de texto con -webkit-text-stroke

La propuesta de propiedad CSS -webkit-text-stroke no está recogida en ningún documento del W3c. Es un yo me lo guiso, yo me lo como de Chrome que durante mucho tiempo sólo fue soportada por su navegador.

Recientemente un grupo importante de navegadores, como Firefox 52+, Edge 14+, Opera 46+, Safari..., decidieron incluirla en su core pero manteniendo el prefijo -webkit- y sólo bajo el prefijo -webkit-. Para más info: caniuse.com

La propiedad -webkit-text-stroke realmente es la forma acortada de otras dos:

  1. -webkit-text-stroke-color
  2. -webkit-text-stroke-width

y complementada con -webkit-text-fill-color que de declararse reescribe la propiedad color con independencia del orden en que estuviesen declaradas.

.text-stroke { -webkit-text-stroke-color: #000; -webkit-text-stroke-width: 2px; /* shorthand */ -webkit-text-stroke: 2px #000; /* color del texto */ -webkit-text-fill-color: #fff; }

See the Pen gRXYwB by Kseso (@Kseso) on CodePen.

La única precaución a tener presente es que un valor elevado en -webkit-text-stroke-width (elevado en función del tamaño del texto font-size y font-weight) hará ilegible el texto.

Contorno de texto con text-shadow

Un sustituto de -webkit-text-stroke clásico durante todo este tiempo ha sido usar la propiedad CSS text-shadow para emularla.

.text-shadow { text-shadow: 0 0 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

See the Pen WOXedN by Kseso (@Kseso) on CodePen.

Al usar esta vía hay que tener presente una particularidad: que la sombra de los textos no se crea y dibuja a partir del límite de cada carácter y hacia fuera. También "rellena" el propio carácter. Esto se pone de manifiesto al usar un color con transparencia (rgba por ejemplo) o un texto transparente (color: transparent).

Se podría pensarse en recurrir a la propiedad no estándar -webkit-background-clip: text para cubrirse, en parte, ya que los navegadores Chrome, Firefox y Safary ya la soportan con prefijo obligado. Pero no. La sombra cubre el interior de los caracteres.

Así que no es posible usar esta forma para mostrar el texto sólo con el contorno (sin color de relleno).

Contorno de texto con filter: drop-shadow()

Esta vía con el filtro drop-shadow no deja de ser una variante del anterior con box-shadow.

Sin embargo como la sombra se "difumina" conviene repetir el valor drop-shadow() varias veces para asegurarse que el contorno es nítido y resalta lo suficiente.

.drop-shadow { filter: drop-shadow(0 0 1px #000) drop-shadow(1px 1px 0 #000) drop-shadow(-1px 1px 0 #000) drop-shadow(1px -1px 0 #000); }

See the Pen qjVBmL by Kseso (@Kseso) on CodePen.

AL utilizar filter: drop-shadow() hemos de tener presente las particularidades de los filtros. En este caso es obligado usar un color para el texto (no podemos dejarlo transparente) y no asignar un fondo al elemento textual.

En el primer caso (fondo transparente) no se genera sombra y por lo tanto el texto se vuelve invisible (equivalente a un visibility: hidden). Y en el segundo (fondo al elemento) el filtro aplica al elemento (contornea la caja) y en caso de que el fondo tenga algún grado de opacidad (rgba) lo tinta del color declarado en el filtro.

A favor de text-shadow y/o drop-shadow está que podemos jugar con el desfase y color en los valores de las sombras para lograr otros efectos en el contorno de los textos. Ni te enlazo ninguno porque son de sobra conocidos.

Contorno de texto con el elemento `text´ del SVG

La última vía para dar contornear un texto es utilizar el elemento text propio del SVG.

A todos los efectos es similar a usar la propiedad -webkit-text-stroke.

<h1> <svg viewBox="0 0 850 80"> <text x='5' y="65">soy Kseso, esto EsCSS</text> </svg> </h1>

Al tratar con un elemento propio del SVG podemos recurrir a las propiedades que aplican a ellos. Como fill, stroke y stroke-width.

Las dificultades vendrán en este caso por el control del texto contenido por <text /> características de este elemento. Pero las ventajas, innegables, que estaremos trabajando con SVG y todo lo que ello permite.

Hay gran cantidad de información sobre el elemento SVG text. SVG text element por Jakob Jenkov . Una pequeña guía para aproximarse a él es la serie de artículos de Steven Bradley SVG Text On A Path y el de Chris Coyier SVG `text` and Small, Scalable, Accessible Typographic Designs. Por ejemplo.

Las cuatro vías para contornear textos

Para finalizar un pen donde podrás ver y jugar con estas cuatro formas de crear contornos a los textos y los efectos al combinarlos con diferentes propiedades y/o valores que advertía en cada uno de ellos.

See the Pen text-stroke: 4 ways by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso