Trucos útiles de CSS para facilitar el diseño de cualquier página web
Recopilamos diez pequeños trucos CSS, al alcance de cualquier desarrollador y esenciales para cualquier sitio web. Usados en su conjunto o por separado, harán que cualquier diseño resulte más fácil de acometer. Aunque hablemos de CSS, recuerda comenzar por un buen HTML, ya que cualquier diseño comienza por una buena base con el lenguaje de etiquetas. Debes mantener el HTML sencillo, aplicar una buena semántica y limitarlo a expresar el contenido, nunca la presentación.
1o Trucos en CSS para mejorar el diseño web
Box-sizing.
Todo diseño debería comenzar por el uso de la propiedad box-sizing, ya que te elimina diferencias en el modelo de caja entre navegadores. Así cuando pruebes tus páginas en diversos navegadores tendrás más posibilidades de que todo esté colocado en el mismo lugar.
*{
box-sizing: border-box;
}
Contenedor principal centrado.
Centrar un contenedor principal es tarea habitual:
#contenedor{
margin: 0 0 32px 0;}
Deja que se adapte.
Permite que los contenidos se adapten a las dimensiones de los contenedores, para ello usas medidas relativas. No solo en los tamaños de los elementos, también en atributos como el margen.
.articulo{
width: 32%;
margin: 0 0 32px 0;}
Ni inline ni block.
El estilo de display: inline-block combina las distintas alternativas de cajas inline y block. Permite que los elementos se posiciones línea pero permite que sigan comportándose como elementos de bloque a la hora de aceptar los atributos de estilo y el valores de posicionamiento.
a.bloque{
display: inline-block;
}
Overflow para el problema del float.
En las cajas que tienen fondos y cuyo crecimiento es debido a contener elementos flotantes, ocurre que los fondos no llegan a ocupar el área que deberían, quedándose como plegados en la parte superior. Esto lo solucionas con el atributo overflow.
#contenedorConFlotantes{
overflow: hidden;
}
Listas horizontales.
Los elementos de listas pueden vivir en la horizontal sin problemas, puedes eliminar las feas bolitas o bullets y hacer que floten para crear barras de navegación, listas de etiquetas, etc.
li{
width: 100px;
height: 20px;
margin: 0 0 32px 0;list-style: none;
background-color: burlywood;
}
Usando inline-block en elementos de lista.
La misma funcionalidad de antes la puedes conseguir con inline-block y evitas el problema derivado de las cajas flotantes descrito en el punto 5.
li{
display: inline-block;
width: 100px;
height: 20px;
margin: 0 0 32px 0;background-color: burlywood;
list-style: none;
}
Alineación vertical con table-cell.
Si usas el modelo de tablas desde css, con los display correctos, puedes conseguir la siempre difícil alineación vertical, ya que las celdas sí que permiten el atributo vertical-align. Además, funciona de manera generalizada en los navegadores.
.caja{
display: table-cell;
vertical-align: middle;
}
RGBA en los colores con transparencia.
Ya disponemos de transparencia en los colores, por canal RGBA, sin necesidad de hacer trucos con imágenes png.
#soloFondoSemitransparente {
background-color: rgba(255, 120, 50, 0.5);
}
Includes de CSS.
Para distribuir tu CSS en diferentes archivos no realices los poco recomendados @import, pues implica más conexiones al servidor. Los preprocesadores CSS te permiten eso y mucho más, aprende uno. Less es muy sencillo. Este código estaría en un archivo .less y se incluyen otros archivos less con las distintas partes de tu código Less. Antes de publicar tu web tendrás que procesar los less y generar el CSS, lo que resulta muy sencillo mediante diferentes herramientas.
// CSS reset @import 'reset.less'; @import 'site.less';
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.