4 trucos de CSS que he aprendido por las malas

Traducción de un artículo de David Mellul, diseñador web que nos explica 4 sencillos trucos CSS que usa en su día a día: cómo evitar trabajar con bordes, estrategias para llamar la atención, formas de centrar un elemento horizontal y verticalmente y trucos para posicionar un elemento de forma relativa a otro.

traduccion webTRUCOS CSS
18 junio, 2021 Trucos CSS para traductores de páginas web
18 junio, 2021 Trucos CSS para traductores de páginas web

Traducción de Inglés a Español realizada por Jose, traductor de paginas web.

Texto original escrito por David Mellul, publicado el 8 de Junio de 2018 en
https://itnext.io/4-css-tricks-ive-learnt-the-hard-way-aab1e7e8ff44

 

* * *

 

Empezar un nuevo proyecto desde cero siempre es una buena forma de aprender cosas nuevas, independientemente de la experiencia que se tenga.

Hace poco me pregunté qué haría falta para construir una App completa sin usar ningún framework de terceros (Bootstrap).

En primer lugar, desataría el poder de la libertad de programación (también conocido como «Los errores sólo pueden venir de ti», pero también «Deja de luchar contra tu framework con !reglas importantes»), pero también me enseñaría trucos de CSS que ahora estoy orgulloso y feliz de compartir con vosotros.

1. No uses bordes: usa box-shadow o box-sizing

Tanto si has trabajado alguna vez con bordes como si no, esto es lo que debes tener en cuenta :

Los bordes en realidad ocupan espacio en el diseño global de tu página. Esto significa que añaden anchura y altura extra a los elementos.

Consecuencias:

  • Tienes que calcular manualmente la anchura y la altura deseadas de tus elementos para evitar que se desordenen en tu diseño en caso de un diseño tipo lista o cuadrícula.
  • Añadir bordes en estados particulares como hover hará que todo el diseño se mueva. Esto lastra el rendimiento.

Demostración:

Al pasar por encima del primer div deberías notar que el segundo div también se mueve…

Soluciones:

  • Puedes utilizar : box-sizing: border-box para que el ancho tenga en cuenta el ancho del borde.
  • Puedes utilizar: box-shadow: /* … */ para falsear los bordes.
  • Sugerido en los comentarios : Utiliza bordes transparentes y cambia su color cuando sea necesario. Ten cuidado, ya que este enfoque hará que los bordes ocupen espacio adicional en tu diseño.

Demostración:

 

2. Llamar la atención sobre un elemento

Si quieres que los usuarios hagan clic en un botón determinado, existen múltiples estrategias conocidas para llamar su atención.

Sin embargo, me gustaría compartir con vosotros un truco facil y sencillo pero muy personalizable.

Demostración:

Ventajas :

  • No hay cambios en la anchura ni en la altura del elemento, por lo que no se rompe el diseño.
  • One-liner : animación: pulso radial 1s infinito;
  • Puedes cambiar : el color, el tamaño, la duración, etc.
  • Discreto, pero notable.

Citado por un lector : Si su sitio debe ser accesible para los usuarios con discapacidad visual, este efecto no sería útil.

. . .

3. Centrar un elemento horizontal y verticalmente

El CSS ha evolucionado todavía nos ha costado mucho centrar nuestros elementos tanto horizontal como verticalmente.

Puede haber muchas formas de conseguirlo, pero estas son mis soluciones cotidianas a esta necesidad recurrente:

  • Utiliza: display:flex en el elemento padre + margin: auto en el elemento hijo, +text-align: center según sea su caso.
  • O bien utiliza: display:flex + justify-content:center + align-items: center en el elemento padre.

Demostración:

4. Posicionar un elemento de forma relativa a otro

Este truco es muy útil cuando se trata de desplegables, tooltips y popovers.

Así es como funciona:

  • El elemento padre NO DEBE ser estático: posición: relativa | fija | absoluta
  • El hijo DEBE tener : position:absolute

Y así, usando arriba | izquierda | abajo | derecha se posicionará el hijo de forma relativa con respecto al padre.

Demostración:

Observa que el cuadrado de la parte superior derecha podría haber sido un menú de configuración emergente que aparece al hacer clic o al pasar el ratón.

Ejemplo de mi propio trabajo :

Al pulsar los 3 puntitos se muestra el menu

Gracias por leer

Espero que este artículo te haya resultado útil.

Este artículo se escribió a raíz de una conversación con un lector… Anímate a escribirme: david.mellul@outlook.fr 😄 ☕️.

«Capuchino en una taza blanca con diseño de espuma blanca en una mesa de madera» by Wuyi en Unsplash
Valora este artículo

Articulos relacionados


Traducción de un articulo sobre páginas web, código Html y accesibilidad. Cómo programar una web sin perder de vista la accesibilidad, cómo mejorar el uso de etiquetas web para ofrecer a los usuarios mayor facilidad para navegar e interactuar.

Traducción a Español de un artículo en Inglés de Ushmi Dave explicando cómo localizar / internacionalizar / traducir aplicaciones en Angular, usando RxWeb

Plantilla con las etiquetas Html imprescindibles para cualquier proyecto web standard.