Propiedades Basicas CSS: Diseño de Cajas

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Ya vamos entrando a cosas interesantes con esto de los tutoriales. Hoy aprenderemos a emplear propiedades para dar color de fondo, tamaño, bordes y estilo en general a bloques o cajas de contenido. Es una de las pocas funciones de CSS que te permiten crear elementos, ya que si te fijas en los tutos anteriores sólo le dimos un mejor look a cosas ya creadas.


Para crear la caja en sí, tendrás que rodear el contenido que tendrá esa caja en un div con un id. Puedes usar el mismo id para muchas cosas si estarán todos envueltos con la misma caja (por ejemplo, para personajes predeterminados). Una vez que tengas el contenido envuelto en un div, llama al div a tu CSS y comienza a jugar con estas propiedades:
width: Ancho de la caja. Lo puedes colocar en píxeles (como los hemos venido usando hasta ahora) o en porcentaje (XX%, la caja adoptará ese porcentaje del ancho total del elemento en el que esté inscripto). Aquí te dejo un ejemplo práctico.
height: Alto de la caja. Su valor se coloca de la misma manera que el de width.
Nota: Si no colocas un alto y ancho predeterminados, la caja se ajustará al alto y ancho de su contenido.
background: El fondo de la caja. Puedes colocar un color (a modo hexadecimal), o una imagen colocando url('LINK DE LA IMAGEN');
overflow: Determina qué pasará si el contenido de la caja excede el tamaño de la misma. Si le colocas de valor auto, saldrá una barra desplazadora. Si colocas hidden, se esconderá el contenido que sobre y no se podrá ver. El valor por defecto es visible, y hace que lo que sobre salga para abajo. Aquí te dejo un ejemplo práctico.
box-shadow: Permite colocar una sombra a la caja. La sintaxis es igual que la de la sombra para textos:
box-shadow: XXpx YYpx ZZpx #000000;
Allí reemplazas XX por el desplazamiento en el eje X de tu sombra, YY por el desplazamiento en el eje Y, ZZ por el tamaño de tu sombra y #000000 para el color.


Ok, este tema de los bordes te servirá prácticamente para cualquier cosa, veamos veamos...
border: Es la propiedad básica para darle un borde sobre todos los lados a un elemento. Su sintáxis es:
border: XXpx estilo #000000;
Donde XX es el grosor del borde en píxeles, #000000 debe reemplazarse por el color de borde deseado y estilo debe ser reemplazado por una de las siguientes opciones:

solid	dashed	dotted	double
groove	ridge	inset	outset

La propiedad border puede ser reemplazada por border-top, border-right, border-bottom y border-left (borde superior, derecho, inferior e izquierdo en ese orden) si sólo quieres dar borde a uno o dos lados de la caja, o si quieres darles diferentes estilos.

border-radius: Sirve para redondear los bordes de las cajas. El valor debe darse en píxeles (por ejemplo: border-radius: 20px;), y afectará todas las esquinas de la caja. Si quieres que sólo afecte a determinadas esquinas de la caja, puedes darle cuatro valores, que corresponderán respectivamente a la esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda. Por ejemplo, si uno colocara border-radius: 20px 60px 45px 6px; a una caja de 200x200px, pasaría esto:

Como verán, la cantidad de píxeles del redondeado se cuenta desde la esquina hacia los lados, de forma pareja. Si quieren que sea diferente en cada lado (por ejemplo, en la esquina superior izquierda que tenga 20 píxeles hacia la derecha y 70 hacia abajo) pueden usar border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border bottom-left-radius (esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda respectivamente) y asignarle dos valores en píxeles, en este caso border-top-left-radius: 20px 70px; (la asignación de valores es en el sentido de las agujas del reloj comenzando por la esquina superior izquierda, como todo en CSS):




El padding es un margen interior que tendrá la caja antes de mostrar el contenido que le des. Debes tener en cuenta que el padding se agrega hacia afuera de las medidas de la caja; es decir, si la caja mide 200x200 y el padding es de 20px, la caja pasará a medir 240x240px (se sumará 20px por cada lado). El padding adopta el color o imagen de fondo propios de la caja (si tu caja es negra, tu padding será negro). Su sintáxis es simplemente:
padding: XXpx;
Donde XX es el márgen interior de todos los lados de la caja, aunque también se puede utilizar:
padding XXpx YYpx ZZpx WWpx;
Donde XX es el márgen superior, YY el derecho, ZZ el inferior y WW el izquierdo.

Los margin son márgenes exteriores a la caja, transparentes, que te permiten que no salga pegada a otros elementos si así no lo quieres (además de ser útiles para desplazar elementos, como vimos en el tuto de posicionamiento). Su sintáxis es idéntica a la de padding (sólo que poniendo margin en vez de padding, daaah...). Si uno coloca margin: auto; el elemento se centrará.


Veamos, entonces ¿cómo podemos hacer una caja como la que envuelve a este turorial? Ahora les nombraré algunas de las propiedades que tiene, para que se orienten en los elementos que emplee.
- La caja en sí cuenta con un color de background llamado #999, unos 20px de padding y un border de 10px de grosor, sólido y color #265175. No le dí alto ni ancho predefinidos, pero determiné un margen superior e inferior de 10px y unos márgenes laterales de 30px. También hice que el texto salga justificado, sea color #222 y tamaño 11px.
- Los subtitulos emplean una google font muy simpática, están centrados, tienen un width del 100% y un padding de 20px a los costados, igual que la caja grande. Para que no se deformen y queden salidos, les coloqué un margen izquierdo de -20px, contrarrestando el efecto del padding de la caja grande.


CREO que eso es todo sobre el tema :3 Recuerda que puedes crear cajas dentro de cajas y darles diferentes colores y propiedades (por ejemplo, hacer una caja grandota con una imagen de fondo que tenga una pequeña dentro con texto y overflow).
Si quieres jugar y experimentar con estas propiedades, te recomiendo usar http://jsfiddle.net. De hecho, en este caso es importante que juegues y experimentes para familiarizarte con los atributos y que puedas ver cuáles son los límites de las cajas.
Cualquier dato que sepas que falte o consulta que quieras hacer, deja un aviso aquí ^^