El selector para poder hacer multi-columnas es uno de los que mas me llamó la atención, mas que nada porque hace un par de días estaba precisando hacer exactamente esto, si hubiera sabido de esto, la solución hubiera sido mucho mas sencilla.

Ej. el texto a continuación esta todo dentro de un solo div que usa el siguiente codigo css:

div.columnas {
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-width: 150px;
-moz-column-rule: 1px solid #00000;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-width: 150px;
-webkit-column-rule: 1px solid #00000;
}

Definimos lo siguiente:

• column-count: la cantidad de columnas
• column-gap: la distancia entre columnas
• column-width: el ancho de la columna
• column-rule: linea de division entre columnas

La entrada CSS3 Diseño Multi column se publicó primero en Ariel Acosta Fotografí­a.

Aceptar Cancelar

Para lograr estos botones use estas características de CSS3:

• border-radius nos permite hacer las esquinas redondeadas
• box-shadow es la propiedad que le da la sombra al botón
• text-shadow le da la sombra al texto
• rgba donde la «a» corresponde a «alpha» y nos permite especificar la opacidad de un color

Este es el HTML

<a class="boton">Aceptar</a> <a class="boton">Cancelar</a>

y este es el CSS

.boton, .boton:visited {
	background-color: #009AD8;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;

	font-size: 18px;
	font-weight: bold;
	line-height: 1; 

	border-bottom: 1px solid rgba(0,0,0,0.2);
	position: relative;
	cursor: pointer;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.2);

}

.boton:hover { background-color: #294C76;
	color: #fff;
	text-decoration: none;
}
.boton:active { top: 1px; }

La entrada CSS3 Botones se publicó primero en Ariel Acosta Fotografí­a.