JMiur [E]

Este demo de Zurb utiliza CSS para mostrar imágenes con un efecto tipo Polaroid y emplea transiciones que son propiedades que, por ahora, sólo son animadas en Safari y Chrome. En Firefox, veremos el efecto como una transición estática y me he tomado el atrevimiento de agregar algún filtro para que en Internet Explorer veamos algo aunque sea incompleto. Moraleja, como siempre, lo mejor está por venir así que es bueno irse acostumbrando a ciertas cosas que no tardarán demasiado en ser un nuevo estandard en al forma de crear páginas web.

Ponemos las imágenes en una lista ordenada con una clase llamada polaroids y cada una en un enlace donde el atributo title, será el texto que agregaremos debajo de ellas:
<ul class="polaroids">
<li>
<a href="javascript:void(0);" title="imagen 1"><img src="URL_imagen1" /></a>
</li>
<li>
<a href="javascript:void(0);" title="imagen 2"><img src="URL_imagen2" /></a>
</li>
.......
<li class="messy">
<a href="javascript:void(0);" title="imagen especial"><img src="URL_imagenespecial" /></a>
</li>
.......
</ul>
Ahora el CSS que es el punto clave de todo esto; el que usé en este ejemplo es algo así:
<style>
/* a la lista le damos una dimensión y le colocamos los márgenes necesarios */
ul.polaroids {
list-style-type: none;
margin: 0 0 0 50px;
width: 600px;
}
ul.polaroids li {
display:inline;
list-style-type: none;
padding: 0;
margin: 0;
}
/* cada enlace contiene una imagen y es donde definimos los colores y las propeidades de los textos */
ul.polaroids a {
display: inline;
float: left;
margin: 10px 30px;
padding: 10px;
width: auto;
/* las propiedades gráficas */
background-color: #FFF;
/* las propiedades de los textos */
font-family: Tahoma;
font-size: 18px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #123;
/* por defecto, rotamos las imágenes */
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958);
/* y la transición */
-webkit-transition: -webkit-transform .15s linear;
}
/* cada imagen (en este caso las dimensiono todas iguales pero, pueden ser diferentes) */
ul.polaroids img {display: block;
margin-bottom: 5px;
height: 150px;
width: 200px;
}
/* esto es lo que agregará el texto contenido en el atributo title */
ul.polaroids a:after{
content: attr(title);
}
/* utilizando la pseudo-clase nth-child hacemos que algunas imágenes se muestren diferentes */
/* no usamos filtros para IE porque esta pseudo-clase no es reconocida */
ul.polaroids li:nth-child(even) a {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}
ul.polaroids li:nth-child(3n) a {
background-color: #AAA;
color: #589;
position: relative;
top: -5px;
-moz-transform: none;
-webkit-transform: none;
}
ul.polaroids li:nth-child(5n) a {
background-color:#DDD;
color:#BEF;
position: relative;
right: 5px;
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
ul.polaroids li:nth-child(8n) a {
position: relative;
right: 5px;
top: 8px;
}
/* una opción es definir una clase con una característica especial, diferenciada del resto */
ul.polaroids li.messy a {
background-color: #FEA;
margin: 20px 150px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208);
}
/* por último, el efecto hover es el que lanza las transiciones */
ul.polaroids li a:hover {
position: relative;
z-index: 5;
-moz-box-shadow: 0px 0px 20px #000 inset,10px 15px 10px #000;
-webkit-box-shadow:0px 0px 20px #000 inset,10px 15px 10px #000;
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1);
}
</style>


  • imagen 1
  • imagen 2
  • imagen 3
  • el titulo
  • un texto
  • otro texto
  • imagen 7

19 comentarios:

Pavelkapaz  

Vagabundia a la vanguardia? Jajaja, muy bien Jmiur, se agradece…
Sinceramente estoy ocupando Firefox, por lo que no tengo ni la menor idea cual es la gracia, pero debe ser algo bonito viendo tanto código que agregar :D

Veamos si en un tiempo más estamos pasando por esta entrada para aplicar el efecto
Gracias nuevamente

Responder
LuzdeLuna  

Una belleza!!!tendría que hacer un blog solo de imágenes para poner en práctica todos estos efectos hermosos que nos enseñás!! :P

Responder
JMiur  

Pavelkapaz:
En Firefox lo ves perfectamente salvo que tengas una version muy vieja. En Chrome idem y en IE se ve bastante bien. Siempre, hablando de navegadores actualizados.

LuzdeLuna:
Ud es experta en eso así que ... adelante :D

Responder
Graciela  

De una beleza de aquellas! dí que el tiempo es escaso, el día tiene 24 horas, de otra manera jugaría con todo lo que dejas aquí :P

Responder
zona lerh  

se ve padrisimo, eres un genio Jmiur

Responder
Karla  

Hola JMiur

Me gusta como se muestra y el efecto que da al gu=irar la imagen.

JMiur, me estoy volviendo adicta a tu blog y al de Gema, siempre, por lo menos (si no tengo mucho tiempo) les doy una miradita, que le ponen a sus blogs pues? (..)...jaja ;)

Responder
Pozo+10™  

JMiur una ayudita. Como achico estos espacios??? mira: http://www.uploadimage.com.ar/images/98035233712280199531.png El de arriba de: Anterior » y el de abajo de todo.

Responder
JMiur  

Graciela:
Armese de paciencia y póngase a jugar que ud sabe bastante más de lo que dice :D

zona lerh:
Eso digo siempre pero no me lo cree nadie ... y hacen bien.

Karla
Este blog no se responsabiliza por adicciones; bastante tenemos con las nuestras :D

Pozo+10:
Hay varias cosas que afecta lo que ves debajo de Disqus. Primero, hay espacios de cosas que ahora no se usan pero deberías probar por ejemplo, lso comentarios en si mismos y la paginación de esos comentarios; eso, genera ahora espacios en blanco:
#dsq-content .dsq-pagination { }
#dsq-content #dsq-comments { }

Luego, los márgenes de alo que por ahora no hay que son lso backlinks:
#backlinks-container { }
y por último, el margen de la navegacion inferior:
#blog-pager { }

abajo, en el footer pasa algo similar, hay un DIV con una seccion donde podrían ir gadgets para el footer que ahora no contiene nada per tiene un padding que hace que haya 20 pixeles en blanco:
#footer { }

Responder
Graciela  

Jmiur ha aparecido Comentarios en la bandeja de entrada, tal vez de allí se pueda marcas spam???

jajaja solo sé que no sepo nada, bueno en 5/6 años algo he aprendido :)

Responder
Pozo+10™  

Muchas gracias, hice lo que pude, modifique #footer { } - #blog-pager { } y modificando #backlinks-container { } no hay ningún cambio, y #dsq-content .dsq-pagination { } #dsq-content #dsq-comments { } no lo he encontrado. jejeje

Responder
JMiur  

Graciela: Oh si que se ha aprendido :D

Pozo+10:
El padding del footer lo veo eliminado. El margen de #backlinks-container sigue siendo el mismo, dice margin-top:30px;
Los márgenes de #dsq-content .dsq-pagination { } y #dsq-content #dsq-comments { } deben ser lso que agrega Disqus y si los quieres eliminar deberías colocar eso en tu plantilla:
#dsq-content .dsq-pagination {margin:0 !important; }
#dsq-content #dsq-comments {margin:0 !important;}
de todos modos, eso último, hazlo mirando una entrada con comentarios para ver el resultado.

Responder
Pozo+10™  

Al #backlinks-container { } lo borre y puse vista previa al igual que lo de disqus, pero no hay cambios, como si eso no fuese lo que produce ese espacio :S

Responder
JMiur  

En esta captura está indicada que es cada parte.

Lo violeta es el espacio de la paginacion de discus. Arriba y abajo, el amarillo es el margen de esa paginación. No hay nada porque eso, comienza a tener sentido cuando hay una cantidad de comentarios determinada y ahí, aparecerán enlaces para navegarlos.

El verde de abajo, son los 30 pixeles de los backlinks que siguen estando allí.

Responder
Pozo+10™  

Muchas gracias!!! El #backlinks-container { } lo pude achicar, pero después no se puede tocar ningún código de disqus por que hay funciones que no andan más.
Una consulta más, mira esta imagen: http://img84.imageshack.us/img84/74/borrari.png para achicar ese espacio que te marque con amarillo, que px tengo que modificar??? Por que he buscado y buscado y no puedo |0 |O

Responder
JMiur  

No veo tal cosa. la veía antes pero era el footer. AHora, no está.

Responder
Pozo+10™  

Esta seguro que en la pagina principal debajo de todo no ve el espacio que queda?? Por que yo ya probé por: Chrome, Explorer, Firefox, Opera y Safari, y se ve en todos el espacio :S

Responder
JMiur  

No, no lo veo pero, puede ser que eso ocurra en alguna versión de IE así que busca esto:
#bottomads {
margin:0;
padding:10px 0;
}
y coloca padding 0

Responder
Pozo+10™  

Muchas gracias JMiur!!! Ahora si quedo bien :D

Responder
JMiur  

Perfecto :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR