Bordes de color para perfilar letras: text-stroke y una alternativa

Hay una propiedad CSS denominada text-stroke que nos permite añadir fácilmente un borde a los textos que elijamos, al modo en que podemos hacerlo para una caja con border. Pero es una propiedad no estándar y hasta el momento con muy poco soporte en los distintos navegadores. En Can I use? podemos ver rápidamente que de entre los más populares sólo encontramos a Chrome en todas sus versiones.

Por eso y a pesar de que no sea ni la manera más fácil ni la mejor estéticamente hablando, además de ver someramente text-stroke, en esta entrada usaremos un sistema alternativo para simular esos bordes para texto. Será con text-shadow.

Usando text-stroke

La sintaxis básica para usar text-stroke es como sigue.

.stroke {
-webkit-text-fill-color: yellowgreen;
-webkit-text-stroke: 1px black;
}

Como veis sólo es cuestión de indicar un color de relleno con text-fill-color y luego el ancho y el color del borde con text-stroke. Ambas propiedades llevan el prefijo -webkit- que es la plataforma que funciona como base para Chrome, Safari, Opera y otros de menor uso, precisamente los únicos dónde hoy por hoy funciona.

Con esa regla podremos usar el selector .stroke para que cualquier texto tenga un aspecto como este (efecto sólo visible en los navegadores antes indicados):

Texto con text-stroke

Nótese que el borde que crea text-stroke se "pinta" por dentro de la letra, así que si esta es muy pequeña de tamaño el borde se comerá una gran parte de ella.

Ñapa con text-shadow

La manera de simular esto con text-shadow es añadiendo sucesivas sombras que irán rellenando el espacio circundante al texto. En un principio una sombra simple se verá desplazada a la derecha, izquierda, arriba o debajo del texto, pero no en todas las dimensiones a la vez.

Por ejemplo, este sería el resultado con text-shadow: -2px -2px 1px #000; que nos proyectaría la sombra negra (#000) dos píxeles a la izquierda y otros dos arriba:

M

Pero como text-shadow admite múltiples valores si los separamos con comas, podremos (más o menos) ir rellenando los huecos que queden añadiendo otros desplazamientos complementarios.

De esta manera, para cubrir la parte derecha incorporamos un 2px -2px 1px #000 (desplazamiento de 2 píxeles a la derecha, 2 píxeles arriba):

M

Haciendo lo propio para la parte inferior, combinada con la izquierda y luego con la derecha, podremos "rodear" totalmente el carácter. El código completo para ello sería:

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

Y ¡voilá!, letra M amarilla con un borde negro... o casi ;)

M

Combinando que es gerundio

Nada impide combinar text-stroke y text-shadow para obtener un perfil exterior con la segunda y adicionalmente una línea interior más limpia que se verá en los navegadores que soporten la primera propiedad.

.stroke {
text-align: center;
color: #FCDB00;
font-family: impact;
font-size: 46px;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
-webkit-text-fill-color: #FCDB00;
-webkit-text-stroke: 2px black;
}

M

Algunas reglas listas para usar

Abcdefghijklmnñopqrstuvwxyz

.stroke {
text-align:center;
color: #fff;
background: #eee;
font-family: impact;
font-size: 40px;
letter-spacing: 0;
text-shadow: -3px -3px 3px #0000DF, 3px -3px 3px #0000DF, -3px 3px 3px #0000DF, 3px 3px 3px #0000DF;
}

TIPOGRAFÍA CON BORDE

.stroke {
margin: 20px;
padding: 20px;
text-align:center;
color: #FCDB00;
background: #eee;
font-family: impact;
font-size: 46px;
letter-spacing: 12px;
text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000;
}

Abcdefghijklmnñopqrstuvwxyz

.stroke {
text-align: center;
color: pink;
background: #eee;
font-family: impact;
font-size: 30px;
letter-spacing: 8px;
text-shadow: -2px -2px 0px #cc0000, 2px -2px 0px #cc0000, -2px 2px 0px #cc0000, 2px 2px 0px #cc0000;
}

Letras para títulos
tipo cómic
con borde de color
hecho con TEXT-SHADOW

.stroke {
text-align:center;
color: #000;
background: #DA251D;
font-family: impact;
font-size: 36px;
line-height: 70%;
letter-spacing: 4px;
text-shadow: -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff, 2px 2px 0px #fff;
}

Letras sin relleno de color

.stroke {
text-align: center;
color: white;
background: white;
font-family: Georgia, serif;
font-size: 40px;
letter-spacing: 0;
text-shadow: -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 1px 1px 1px #333;
}