Establecer tipo en un círculo… con ruta desplazada

 

 

 

Aquí hay algunos trucos CSS legítimos de yuanchuan . Existe esta propiedad CSSoffset-path . Érase una vez un nombre motion-pathy luego le cambiaron el nombre. En ese momento puse los ojos en blanco, porque la propiedad es obviamente para animar cosas a lo largo de un camino. Pero no es necesario usarlo para animación, de ahí el cambio de nombre, ¡y este ejemplo lo demuestra!

Sin embargo, lo que pasa con establecer elementos en un camino es que todo el elemento se coloca en ese camino. Entonces, si ese elemento es, digamos spanChris/span, esa palabra completa se coloca en un solo punto del camino. El truco de yuanchuan consiste en dividir la cadena en letras como tramos y luego colocar cada tramo a lo largo del camino (con un diferente offset-distance).

 

Hay una ruta de cima de círculo aplicada a cada tramo:

offset-path: path('M 0 200 A 200 200 0 0 1 400 200')

Luego hay algunas matemáticas extravagantes (bastante específicas de esta demostración, por supuesto) para calcular las distancias apropiadas para cada letra:

offset-distance: calc(8% + var(--n) * 89.5% / var(--total));

Lo bueno es que cada tramo tiene su propia propiedad personalizada que afecta el cálculo. No se necesita CSS repetitivo de gran tamaño: enésimo hijo.

div spanC/span spanS/span spanS/span !-- ... --

¡Y no es sólo para letras! ¡Es bueno para todo tipo de cosas!

Notas relacionadas:

  • Esto es mucho más limpio que un método antiguo que escribimos en el blog, donde cada tramo tenía que usarse transform: rotate()con un transform-originpunto común establecido fuera de la letra misma.
  • SVG maneja esto sin ningún tipo de piratería. (Esto no es totalmente un truco, pero como tienes que dividirlo en tramos, al menos necesitas aria-labelel padre, lo que lo hace sentir más complicado).
  • Quisquilloso (soy el peor): no invente etiquetas HTML como este lápiz de demostración en sitios que no sean de demostración y que la gente necesite usar.





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. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Establecer tipo en un círculo… con ruta desplazada

Establecer tipo en un círculo… con ruta desplazada

Aquí hay algunos trucos CSS legítimos de yuanchuan . Existe esta propiedad CSSoffset-path . Érase una vez un nombre motion-pathy luego le cambiaron el nombr

programar

es

https://pseint.es/static/images/programar-establecer-tipo-en-un-circulo-con-ruta-desplazada-1199-0.jpg

2024-06-13

 

Establecer tipo en un círculo… con ruta desplazada
Establecer tipo en un círculo… con ruta desplazada

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