Con la llegada de CSS3 tenemos características que nos facilitan la construcción de sitios web, al igual que tenemos nuevas propiedades muy curiosas, muchas de estas características aún no son compatibles con todos los navegadores o incluso ninguno, a pesar de ello vale la pena conocerlas para así estar preparados.
Una propiedad curiosa que tenemos es text-stroke la cual nos permite poner trazo al texto (no sombra como lo hace text-shadow), por ahora solo funciona en WebKit, pero esperemos que más adelante podamos verlo con el resto de navegadores.
Con text-stroke podemos definir los pixeles y el color de nuestro trazo de la siguiente manera:
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
Al igual que con muchas propiedades de CSS, podemos hacerlo más fácil:
h1 {
-webkit-text-stroke: 2px black;
}
Un problema que tenemos ahora al usar text-stroke es que si tenemos un color de fuente igual al color de fondo.
se va a ver bien para los navegadores que lo soportan, pero para los otros navegadores, simplemente no se va a ver.
Esto es un grabe problema ya que las personas pueden pensar que es un error o que simplemente no hay nada, por suerte tenemos una solución: text-fill-color, el cuál anulara color sin importar el orden.
h1 {
color: black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
De esta manera, podemos usar text-stroke sin temor a que no pueda verse en los navegadores que no lo soportan.
Navegadores donde lo podemos ver:
Navegadores donde por ahora no funciona:
Ahora depende de nosotros como es que vamos a usar esta propiedad …