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>
Via - Vagabundia
Marcadores por: TuMundoBlogger
0 comentarios:
Publicar un comentario