Boozox » Trucos para hacer diseños en CSS más rápido y mejor

Boozox » Trucos para hacer diseños en CSS más rápido y mejor: "Trucos para hacer diseños en CSS más rápido y mejor"

Enfrentarse a crear una plantilla de diseño desde cero puede ser muy duro y desmoralizante. Por eso he reunido una serie de trucos que conviene tener a mano, para agilizar el proceso, y hacerlo algo más agradable.

Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

1. * {
2. padding:0;
3. margin:0;
4. }
5. body {
6. font-size: 76%;
7. }
8. img {
9. border-width: 0;
10. }

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

1. a {
2. outline-style: none;
3. }

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

1. [...]
2. 
   
3. 
   

4. Titulo

5. Texto…

6. 
   

CSS:

1. body {
2. text-align: center;
3. }
4. #contenedor{
5. text-align: left;
6. margin: 10px auto;
7. width: 80%;
8. }

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

1. li {
2. width: 100px;
3. height: 100px;
4. float: left;
5. }

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

• Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
• Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
• En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
• En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.