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.
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>
9 comentarios:
Hola JM, la pregunta no tiene demasiado que ver con la entrada, salvo que en el ejemplo que das, entrando al "Mosaico", me gustaron las fuentes que usás en los títulos de cada mosaico, esa fuente con sombra que parece grabada, no se si me explico...la que se ve al pasar el cursor por encima de los cuadrados...
Que fuente es y como era que se le daba el efecto shadow era no? Para que quede tal cual esa, que da la impresión de hundida... se entiende?
No tiene nada especial, estas son las propiedades:
background-color: #8E8E8D;
color: #000;
font-family: Tahoma;
font-size: 18px;
text-shadow: 1px 1px 1px #FFF;
Esta vez te has superado, simplemente genial, me ha encantado, ... :o
:o Simplemente genial. JM, eres el mejor ;)
Es fantástico, me suena ese efecto mosaico :D
Magnífico Jmiur!
La verdad que muy bueno jMiur!!
yo lo estoy usando!!
lo que no sé es porqué las columnas me quedan separadas. no me quedan todas juntas como a vos. tenés idea porque será?? si no, no hay problema.
muchas gracias!!
Puede ser que column-gap no esté en cero, que haya márgenes agregados, que el ancho total sea demasiado grande y por lo tanto las columnas se separan. Debería ver el ejemplo para contestarte.
Has eliminado la variable de etiqueta. Resultaba muy útil también en este caso.
Un saludo
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...