Columnas con CSS: Mosaico de entradas

Partiendo de la idea de usar CSS para generar columnas auto-ajustables, podemos recrear cosas existentes aunque no funcionen en Internet Explorer y deberemos esperar que ese navegador incorpore estas propiedades que son unas de las más interesantes porque permiten pensar el diseño de un sitio web desde un ángulo totalmente diferente.

Vamos a jugar y usar un ejemplo previo, crear una página con un resumen de entradas que incluya paginación y simplemente, vamos a dejar todo como está pero cambiaremos algunas de las reglas de estilo. El modelo original es el que podía verse acá.

En ese ejemplo, el DIV cuyo ID es resultados es el rectángulo donde se muestran las entradas y, cada una de ellas es otro DIV cuya clase es paginaposts. El script, simplemente lee una cantidad determinada de entradas, extrae una imagen y la muestra junto al título que es una etiqueta H6. Nada de eso cambiará, sólo lo mostraremos de manera distinta, simulando el estilo mosaico de las Vistas Dinámicas de Blogger.

Y estas serán las reglas de estilo diferentes:

<style>
  #resultados { /* se mostrará todo en cuatro columnas */
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    column-count: 4;
    column-gap: 0;
    margin-left: 0;
  }
  .paginaposts { /* cada entrada */
    background-color: #EEE;
    border-bottom: 4px solid #101921;
    display: inline-block;
    margin: 0;
    opacity: 0.8;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 205px;
  }
  .paginaposts:hover { opacity: 0.8; }
  .paginaposts a { vertical-align:top; }
  .paginaposts img { width: 205px; }
  .paginaposts h6 { /* el título permanece invisible hasta que ponemos el cursor encima */
    background-color: #AAA;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 204px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;transition: all 1s;
  }
  .paginaposts h6 a {
    color: #000;
    font-size: 18px;
    text-shadow: 1px 1px 1px #FFF;
  }
  .paginaposts:hover h6 { opacity: .8; }
</style>

Mosaico