JMiur [E]

Usando las nuevas propiedades del CSS3, Alex and The Web ha creado una forma de mostrar imágenes en una galería muy particular y a la vez, muy sencilla de implementar porque no requiere ningún script.

Como todas estas cosas, funciona correctamente en Firefox (versión 3.6 en adelante), en Google Chrome y en Safari. En Opera y en Internet Explorer, la galería se ve si esos detalles pero aun así, puede usarse.


Creamos la galería con HTML, un DIV que la contendrá; dentro de este, agregaremos otros DIVs, tantos como imágenes querramos mostrar. A cada uno de ellos deberemos identificado con un ID único y adentro, colocaremos la imagen y eventualmente, un texto:
<div id="gallery">
<div id="img1">
<img src="URL_imagen_1">
<span>un texto optativo para la imagen 1</span>
</div>
<div id="img2">
<img src="URL_imagen_2">
<span>un texto optativo para la imagen 2</span>
</div>
<div id="img3"> ....... seguimos agregando imágenes ....... </div>
</div>
Ahora, debemos establecer las propeidades de estilo, las agregamos antes de </head>:
<style>
/* es el rectángulo de la galería, definimos su tamaño total */
#gallery {
height: 680px;
margin: 20px auto;
position: relative;
width: 650px;
}
/* los rectángulo que contendrán cada una de las imágenes */
#gallery div {
overflow: hidden;
position: absolute;
/* efectos opcionales */
box-shadow: 3px 3px 50px #555;
-moz-box-shadow: 3px 3px 50px #555;
-webkit-box-shadow: 3px 3px 50px #555;
-webkit-transition: all 1500ms linear;
background-color: #444;
opacity: 0.9;
}
/* el efecto hover sobre las imágenes las "endereza" */
#gallery div#img1:hover, #gallery div#img2:hover, #gallery div#img3:hover {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
opacity: 1;
z-index: 999;
}
/* los textos optativos */
#gallery span {
background-color: #222;
bottom: 5px;
color: #ABC;
font-size: 15px;
font-weight: bold;
padding: 2px 10px;
position: absolute;
right: 0;
text-align: right;
width: 40%;
}
/* ahora debemos definir la posicion y el giro de cada imagen */
#gallery #img1 {
/* esto rota la imagen una catidad de grados a la izquierda (valores negativos) o hacia la derecha (valores positivos) */
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
/* esta es la posición dentro del rectángulo #gallerty y podemos usar left top right o bottom */
left: 50px;
top: 30px;
/* esto indicará la capa, cuanto más bajo sea el valor, más abajo estará y permite superponerlas */
z-index:1;
}
/* lo mismo hacemos con todas las demás, por ejemplo */
#gallery #img2 {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
left:250px;
top: 300px;
z-index:7;
}
#gallery #img3 { ....... }
</style>
Y eso es todo. La imágenes aparecerán "desordenadas" y cuando coloquemos el puntero del ratón sobre ellas, se enderezarán y se mostrarán en primer plano. En Google Chrome y Safari, lo harán con una animación, en Firefox de forma directa y en el resto de los navegadores no se verán "torcidas" pero el efecto funcionará igual.

18 comentarios:

Shuatas  

Se ve original, aunque un poco lenta. Pero interesa el CSS3, asi que es interesante :D

Responder
Garabato  

Lo habrán diseñado así o “les quedó” irremediablemente así… ¿?
Me hace acordar a “mis desastres”, cuando trato de imponerle a mis blogs todo lo que ustedes enseñan… tal mezcolanza hago, que luego me es imposible explicarlo ni puedo repetirlo…
En lo personal, hoy no me gusta esta forma desordenada para las imágenes con CSS3…. No me gusta este tío. Pero como, a fuerza de ser vieja, me conozco bastante, sé que no podré evitar encarar otro desastre…. ¡quién te dice! A lo mejor me quedan ordenados!!

Oh, ya es lunes………. Buen día JMiur

Responder
Graciela  

Diferente y encantadora, el efecto es rápido no sé a qué se refiere Shuatas con lo de lento ¿de cargar?

Buena semana :)

Responder
José GDF  

¿Hay alguna manera de controlar la velocidad de la animación?

En una versión antigua de Firefox que uso aún se ven las imágenes siempre rectas, pero lo de ponerse en primer plano con el hover sigue funcionando.

Responder
Leonardo  

Soy Ingeniero Informático y siempre he tenido una gran confianza en que el futuro de la Informática son las páginas Web y por supuesto Internet. Sin dudas lo que se puede hacer con CSS sigue marcando la diferencia visual de las páginas y por tanto la diferencia visual del futuro. Saludos y gran trabajo.

Responder
Osdashil  

Mis cordiales saludos JMiur no por donde mas comunicarme con usted son el administrador del WebBlog el ElUltimoTrueno. Era para saber si nos puede ayudar integrar un Slidesow como el que sale en esta pagina : http://evangelion-ec.blogspot.com es un blog de Anime por suspuesto que el mio tambien pero necesito pero necesito saber como insertarlo a mi plantilla o recomendaciones de un sitio que me enseñe a hacerlo... Hasta Luego.

Responder
Anahí  

Ah, me gusta, ¿pero no será mucho ese choclo? :P
Usté anda muy animalesco últimamente...
Slds.

Responder
Manfenix  

Comentario fuera de tópico: a partir de hrs. 14,30, las imágenes subidas a blogger no se pueden cargar. Vaya lío se les armó... !!!

Responder
JMiur  

Shuatas: No me ha parecido tan lento :$

Garabato: Justamente, lo que me gusta ese esa forma pseudo-desordenada; como si fueran fotos arrojadas sobre una mesa y hay que revolver para verlas :D

Graciela: Sí, me pareció lo mismo; puede ser que eso haya sido un problema temporal de Blogger.

José GDF: Esta galería sólo usa CSS así que no existe esa posibilidad. Como dice el post, sólo se verá el efecto de rotación en los navegadores más nuevos pero, en el resto, se verá bien; con limitaciones, claro.

Leonardo: Coincido. Veremos cosas muy interesantes en los pr´ximos años.

Osdashil: Todo lo que puedo decirte es que esa galería funciona con jQuery y puedes descargarla desde acá. No la he probado pero, allí están las explicaciones para implementarla.

Anahí: Me encantan estas cosas ... hay que "animarse" :D

Responder
José GDF  

Pues sería un puntazo que se pudiera controlar las animaciones con el CSS... :D

PD: a ver si me actualizo pronto a FF 3.6, lo que me estoy perdiendo... :(

Responder
Webmaster  

Muy original, me encanto esto!

Gracias por traerlo JMiur!Saludos

Responder
Miller Soto  

Muy bueno el post ... sabes hasta cuantas imagenes se pueden colocar en una galeria asi? Es decir, una galeria de 80 imagenes expuesta de esta forma, seria mucho?

Responder
JMiur  

La limitación la da la memoria de la PC y el tiempo que tarden en cargarse que también depende del tamaño de las imágenes. Si me preguntas, así, sin analizar el ejemplo concreto, diría que sí, que parecen
muchas pero, todo es cuestión de probar y ver que pasa. No hay limitaciones técnicas al respecto.

Responder
Miller Soto  

Gracias Mjiur, ya lo hice, cargué 17 y creo que asi se ven bien!

http://millersoto1.blogspot.com

Responder
JMiur  

Perfecto, hasta ahí no parece haber problemas de carga, no se lo nota pesado en absoluto.

Responder
Naku design  

Muy buen aporte, te felicito de nuevo :)

Att:// Naku design :)

Responder
guillermo  

deberias saber que css es hoja de estilos en cascada y no se coloca en el head sino que va aparte como la palabra lo dice en una hojas de css APARTE DEL HTML

Responder
JMiur  

Deberías saber que las reglas de estilo puede ser colocadas tanto como archivos externos (texto plano con extensión CSS por convención pero puede ser cualquier otra), dentro de etiquetas STYLE (que para eso existen) o en el atributo inline style de cualquier etiqueta.

Todas ellas esas formas son válidas, aceptadas por la w3org de uso corriente.

En el caso de Blogger, no existe una hoja de estilo separada porque no existe una web en el sentido estricto ya que no hay archivos individuales ni tampoco hay un espacio físico real donde puedan ser alojados. Por lo tanto, usar un archivo externo cuyo dominio es otro, sería contraproducente a los efectos de la performance del sitio ya que se requería muchísimo más tiempo para procesar la conexión que el que requiere el servidor en procesar esos datos.

Así que tu corrección es técnicamente errónea y conceptualmente principista porque carece de fundamentos lógicos. Sólo se basa en una definición semántica.

El diseño web no es una religión es una mera artesanía donde las reglas son subjetivas, cambiantes y contradictorias. Amén.

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