CSS3: Añadir borde a una tipografía

Detalles del tutorial

  • Tecnología: CSS3
  • Dificultad: Nivel básico
  • Tiempo de realización: ¿5 minutos?

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.

Valora esta entrada:

9 votos. Promedio: 3,44 de 5
1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas

Entrada archivada en:

Categorías: CSS

Etiquetas:

★ Por Raúl Flores (11 entradas) el

Entradas relacionadas

  • No hay entradas relacionadas

3 comentarios

  • 18 mayo, 2013 // Responder

    muchas gracias por el truco

  • 31 julio, 2014 // Responder

    Hola! :D

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

Responder a Raúl Flores Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*