Programación Multimedia

Buscando la forma de crear un borde para algún titular de esta web, sin tener que hacerlo vía imagen/Photoshop, me encontré con un truco que a algún diseñador le puede interesar bastante. Se trata de añadir el borde a una tipografía mediante CSS.
Aunque en la especificación de CSS3 existe una propiedad para esta finalidad, text-outline, ésta todavía no es soportada en la mayoría de los navegadores.

Creando los estilos CSS

El truco está en utilizar la propiedad text-shadow varias veces, cambiando los valores de posición de la sombra en horizontal-vertical en -1px y 1px con todas las posibles combinaciones, y el valor blur a 0. En la práctica esto es así:

.borde {
    color: #000;

    text-shadow:
   -1px -1px 0 #fff,
    1px -1px 0 #fff,
   -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

Esta clase CSS nos añade un borde blanco de 1px a la tipografía de un texto de color negro. Por desgracia si aumentamos el tamaño del borde creado a 2px o valores superiores, los resultados no son los esperados.

Conclusión

Este Tip no soluciona del todo el asunto de crear bordes mediante CSS por su limitación. Esperemos que la propiedad text-outline esté pronto disponible.

★ Por Raúl Flores (11 entradas) el 26 septiembre, 2012 ★

Entradas relacionadas

• No hay entradas relacionadas

3 comentarios

• Alan

  18 mayo, 2013 // Responder

  muchas gracias por el truco

• Miguel Angel

  31 julio, 2014 // Responder

  Hola!

  Creo que de esta manera también se puede hacer para evitar que se vea como 4 sombras:
  text-shadow: 0px 0px 1px black;

• Raúl Flores

  1 agosto, 2014 // Responder

  Gracias por el aporte Miguel Ángel!!