Bordes de color para perfilar letras: text-stroke y una alternativa | Oloblogger Hay una propiedad CSS denominada text-stroke que nos permite añadir fácilmente un borde a los texto...

9 de junio de 2014

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.

Borde para texto 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;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

14 comentarios :

  1. Muchas gracias por compartir oloman, sin duda alguna estos efectos le dan ese toque de personalización y si lo sabe usar adecuadamente sera miran elegantes.

    ResponderEliminar
  2. Gracias Oloman me quedo con el último de letras blancas, espero que me quede igual de bonito que lo veo aquí.

    ResponderEliminar
  3. Seguro que sí. Ese lo incorporé tras publicar la entrada porque me pareció interesante y de primeras me lo dejé en el tintero.

    ResponderEliminar
  4. Muy interesante esta propiedad, nunca había escuchado de ella.

    ResponderEliminar
  5. Ha quedado estupendo, incluso sobre un fondo blanco, pero las sombras 333 lo resaltan muy bien. Gracias.

    ResponderEliminar
  6. Hola Olo, perdona que te contacte por aquí, pero no encontré un formulario de contato o algo así, hace un par de días descargué una plantilla de internet y cambié la de mi blog http://ajedrezporandaluz.blogspot.com.es/ desde ese día he estado intentando solucionar un problema que tengo, no sale la fecha de los post, aunque si me sale el recuadrito, no se que hacer para que salga y me encantaba como se veía en el modelo de muestra. ¿podrías ayudarme a solucionarlo?
    Gracias

    ResponderEliminar
    Respuestas
    1. Tiene pinta de que esa fecha está hecha con un script, pero me resulta imposible ver cómo funciona exactamente desde aquí. Posiblemente se trate sólo de cambiar el formato de la fecha desde tu panel de control. No es lo mismo tratar 13/06/2014, que 13 de Junio de 2014, que Junio 13, 2014. Prueba con algunos formatos distintos al que tienes ahora y si no encuentras ninguno con el que funcione, en la página dónde descargaste la plantilla probablemente te digan cómo configurar la fecha.

      Eliminar
  7. Eres un crack! Muchas gracias, ya funciona perfectamente.

    ResponderEliminar
  8. Buenisimo el aporte gracias Olo!

    ResponderEliminar
  9. Hola Oloman, no encuentro la entrada adecuada para hacerte esta pregunta,a ve si puedes contestarme aquí. Tengo un código Javascript para mostrar en un gadget de mi blog los diferentes usos horarios mediante celdas desplegables. quisiera cambiarle el fondo a las celdas del blanco al transparente y el color del texto, ya que en blanco y negro no pegan en mi blog. Si quieres te paso el código del gadget por donde tu me digas, gracias maestro, saludos!

    ResponderEliminar
    Respuestas
    1. ¿Cuál es ese gadget, donde y en qué blog tuyo está exactamente para ver si podemos arreglar algo? Al ser un JS es posible que no sea fácil modificarlo, pero veamos.

      Eliminar
  10. como pones esto qui este comentariso?

    ResponderEliminar
    Respuestas
    1. Hola Berto. No entiendo ¿que cómo pongo qué, dónde?

      Eliminar