Ver todos
  • Escrito por Alan Gerardo Márquez
  • Rol en Mixen: Desarrollo Front End

Consejos y trucos CSS que deberías saber: Parte 1

  1. No uses la propiedad -border- Utiliza mejor -box-shadow- o -box-sizing-.

Si utilizas la propiedad -border- constantemente deberías de considerar esto: La propiedad -border- agrega un espacio extra al -width- y al -height- del layout global de tu página. Por lo que debes poner manualmente el -width- y el -height- de tus elementos para que el elemento con -border- no mueva todo tu layout.

See the Pen Trucos CSS 1 by GerardoMarquezMixen (@gerardomarquezmixen) on CodePen.

Como puedes observar al hacerle hover al primer elemento con -border-, mueve al segundo.

Solución:

  • Puedes usar: -box-sizing: border-box- para que el -width- del elemento tome el -border-width- en su calculación.
  • Puedes usar -box-shadow- para simular borders

 

Estaré posteando trucos CSS que he aprendido con el tiempo, así que estate atento a las entradas del blog :D