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.
Alan dice
muchas gracias por el truco
Miguel Angel dice
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 dice
Gracias por el aporte Miguel Ángel!!