Propiedad Text-stroke
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
Antes de continuar con la descripción, hay que mencionar que este método sólo funciona para Web-kit por lo que hay que tener cuidado al momento de utilizarlo y estar consientes que sólo lucirá bien en Chrome y Safari.
Es especialmente útil si se desea utilizar letras y fondo del mismo color.
Con text-stroke podemos definir los pixeles y el color de nuestro trazo de la manera que lo expone la aplicación siguiente:
.aplicacion {
color: yellow;
font-size: 45px;
}
.aplicacion {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: crimson;
}
Al igual que con muchas propiedades de CSS, podemos hacerlo más fácil:
.aplicacion{
-webkit-text-stroke: 2px crimson;
}
Veamos su funcionamiento en un ejemplo que queda transformado con la aplicación CSS precedente
<p class="aplicacion ">El stroke en este texto es de color rojo.</p>
Resultado:
El stroke en este texto es de color rojo.
El objetivo de este efecto es mostrar nuestro texto como si se subrayara el contorno de las letras, creando un trazo que puede adaptarse al tamaño y color deseado.
Propiedad -webkit-text-stroke
No estándar: esta función no es estándar y no está en una pista de estándares. No lo use en sitios de producción frente a la Web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre las implementaciones y el comportamiento puede cambiar en el futuro.
La propiedad CSS -webkit-text-stroke especifica el ancho y el color de los trazos para los caracteres de texto. Esta es una propiedad abreviada de las propiedades de mano larga -webkit-text-stroke-width y -webkit-text-stroke-color .
/ * Valores de ancho y color * /
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
/ * Valores globales * /
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
text-stroke: inherit;
text-stroke: initial;
text-stroke: unset;
Definición Formal
| Valor inicial | como cada una de las propiedades de la taquigrafía:
|
|---|---|
| Se aplica a | todos los elementos |
| inheritance | si |
| Valor calculado | como cada una de las propiedades de la taquigrafía:
|
| Tipo de animación | >como cada una de las propiedades de la taquigrafía:
|
Sintaxis formal
<length> || <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>Valores
- El ancho del trazo.
- El color del trazo.
Propiedad text-fill-color
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 grave 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.
Las propiedades CSS para lograrlo son:
.texto-con-bordes {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #f34573;
}
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 …
Compatibilidad del navegador
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Androide de cromo | Firefox para Android | Opera Android | Safari en IOS | Samsung Internet | |
-webkit-text-stroke |
4 |
15 |
49 |
No |
15 |
3 |
4 |
18 |
49 |
14 |
2 |
1.0 |
Resumen
Podemos usar la propiedad
Stroke generator tools
https://tools.iplocation.net/
https://www.textstudio.com/
http://owumaro.github.io/
https://www.html-code-generator.com/
https://www.htmlstrip.com/
Bibliografía consultada:
https://www.lawebera.es/como-hacer/ejemplos-css/propiedades-css3-textos.php
https://filisantillan.com/blog/text-stroke/
https://css-tianguis.com/truco-css-text-stroke-agrega-bordes-a-textos/
https://runebook.dev/es/docs/css/-webkit-text-stroke
Bibliografía complementaria:
https://css-tricks.com/text-stroke-stuck-middle/
https://filisantillan.com/blog/text-stroke/
https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
