CSS de texto de trazo: la guía definitiva

 

 

 

Siempre que pienso en texto acariciado en la web pienso: no.

Existe -webkit-text-strokeen CSS para esto, pero coloca ese trazo en el medio del contorno vectorial de los caracteres, asegurando absolutamente que el carácter no se vea bien. Solo mira esto en Chrome o Safari. Bruto. Si vas a hacerlo, al menos coloca una capa del tipo correcto encima para que tenga su integridad original. E incluso entonces, bueno, no es estándar y no obtienes soporte para varios navegadores.

John Negoita cubre los trazos de texto de muchas otras maneras. Otra forma de falsificarlo es usarlo text-shadowen múltiples direcciones.

Cuatro formas, como la figura de arriba, no suelen ser suficientes, por lo que se vuelve matemático con ellas. SVG es capaz de realizar trazos, lo que uno pensaría que sería mucho más inteligente, pero tiene exactamente el mismo problema que CSS con el trazo a horcajadas, solo que con un poco más de control.

 

Probablemente evitaría el texto con trazos en la web en general, a menos que sea algo único, en cuyo caso lo convertiría en SVG en el software de diseño, falsificaría el trazo y lo usaría como archivo background-image.

Es posible lucir genial.

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

CSS de texto de trazo: la guía definitiva

CSS de texto de trazo: la guía definitiva

Existe -webkit-text-strokeen CSS para esto, pero coloca ese trazo en el medio del contorno vectorial de los caracteres, asegurando absolutamente que el caráct

programar

es

https://pseint.es/static/images/programar-css-de-texto-de-trazo-la-guia-definitiva-1700-0.jpg

2024-06-13

 

CSS de texto de trazo: la guía definitiva
CSS de texto de trazo: la guía definitiva

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences