Negrita al pasar el mouse… sin el cambio de diseño

 

 

 

Cuando cambias la font-weightfuente, el texto normalmente provocará un pequeño cambio en el diseño. Esto se debe a que el texto en negrita suele ser más grande y ocupa más espacio. A veces eso no importa, como una pila vertical de enlaces donde el texto más ancho/en negrita no empuja nada de todos los modos. A veces sí importa, como una fila horizontal donde el texto más ancho/en negrita aleja un poco otros elementos.

Ryan Mulligan lo demuestra:

El texto en negrita al pasar el mouse provoca un cambio en el diseño que se nota especialmente cuando los elementos comienzan a ajustarse. Aquí tienes un truco ingenioso: agrega un pseudoelemento oculto con la misma cadena de texto pero configúralo en tamaño de fuente en negro.

 

Véalo en @CodePen: https://t.co/kBzZXqqtmi pic.twitter.com/kdZBTLQ0RD

– Ryan Mulligan (@hexagoncircle) 20 de julio de 2020

La técnica de Ryan es muy inteligente. Cada elemento de la lista tiene un pseudoelemento con el texto exacto del enlace. Ese pseudoelemento está visualmente oculto, pero ya está en negrita y aún ocupa el ancho. Entonces, cuando el texto del enlace real esté en negrita, no ocupará ningún ancho adicional.

También depende de cómo estés haciendo el diseño. Aquí, si fuerzo cuatro columnas con cuadrícula CSS y texto que realmente no desafía el ancho, la negrita tampoco afecta el diseño:

Pero si, por ejemplo, dejara que esos enlaces fluyan hacia columnas automáticas, tendríamos el problema de desplazamiento.






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. Primeros pasos hacia un posible diseño de mampostería CSS
  2. Comparación de navegadores para diseño responsivo
  3. Diseño inclusivo 24
  4. diseño de formulario

Negrita al pasar el mouse… sin el cambio de diseño

Negrita al pasar el mouse… sin el cambio de diseño

Cuando cambias la font-weightfuente, el texto normalmente provocará un pequeño cambio en el diseño. Esto se debe a que el texto en negrita suele ser más gr

programar

es

https://pseint.es/static/images/programar-negrita-al-pasar-el-mouse-sin-el-cambio-de-diseno-1623-0.jpg

2024-06-13

 

Negrita al pasar el mouse… sin el cambio de diseño
Negrita al pasar el mouse… sin el cambio de diseño

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