Galeria de fotos html pronta

Galeria de fotos html pronta

Por Raúl Martín

Es un momento muy interesante para los aficionados al CSS (Cascade Style Sheets). Y es que ya empiezan a verse 'Pure CSS', alardes web hechos solo con CSS. Cada vez hay más herramientas a nuestra disposición y más experimentos hechos con ellas.

Así que cuando estaba a punto de ponerme a redactar una explicación sobre cómo hice el paso a paso de mi anterior post, un nuevo "y si..." apareció por mi cabeza. Así que dejé atrás mi primera intención y cambié de tercio.

Lo que voy a contar ahora no es una solución a un problema, es simplemente ver hasta dónde  podemos llegar con CSS y poco tiempo.  En esta caso se trata de  hacer un carrusel de imágenes que quede resultón.

 

De momento sólo he pensado en Firefox 4.0, aunque espero que pronto será compatible con el resto de navegadores. He encontrado problemas en diversos navegadores con el selector () y con la combinación de la pseudoclase :hover y el pseudo-elemento :after. Probablemente porque :hover:after es distinto de :after:hover y cada navegador está decidiendo implementaciones al respecto.

Empezamos

 Lo primero que vamos hacer es crear el código HTML adecuado: 

  <ul class="slider">
       <li><img height="..." width="..." src="..." /></li>
       ...
   </ul>

   

Ver el html básico.

Después, a través de CSS, colocaremos todos li con sus imágenes unos encima de otros. Fácil, sobre todo si nuestras imágenes tienen todas el mismo ancho y alto.

El siguiente código es muy simple:

    ul.slider{
    
        height:375px;
        width:562px;
    
        margin:0 auto;
        padding:0;
        
        position:relative;
        
        list-style-type:none;            
    } 

En este caso, en el  ul:

- Eliminamos el margin y el padding, como sabemos cada navegador establece los suyos por defecto (centramos con margin:0 auto;)

- Establecemos el ancho y alto máximo de nuestra galería.

- Eliminamos los bullets por defecto de la lista.

- Y establecemos un posicionamiento para hacer que nuestro conjunto sea relativo a este espacio que acabamos de crear. 

   ul.slider li{
    
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        left:0;
    } 

Esta vez al elemento sólo le decimos que ocupe todo el espacio disponible. Y para ello lo colocamos "absolutamente" con ancho y alto 100%.

    ul.slider li img{    
        display:block;
    }

La imagen ya tiene el tamaño exacto, así que sólo le decimos que se transforme en un elemento de bloque para eliminar ese incómodo efecto que produce el line-height sobre los img cuando son elementos de línea en algunos navegadores.

Ver el HTML con los estilos de colocación minimos.

Paso 2

Lo primero que haremos será la marca de tiempo. Es decir, que al posarse encima de cada  se dibuje una barra inferior que decrezca para indicar que vamos a dar paso a la siguiente imagen.
Aprovechando el pseudo-elemento :after pintaremos un barra roja inferior de cada en cada li.

    ul.slider li:after{
        content:'';
        
        height:10px;
        width:100%;
    
        
        position:absolute;
        bottom:0;
        left:0;
        
        background:red;    
    }

En este ejemplo vemos la banda roja. La única propiedad rara que hemos aplicado al :after es content, que le comunica a esa 'capa' :after que tiene contenido aunque sea un string vacio.

Ver el resultado con la barra de progreso.

Paso 3

Ahora eliminaremos la barra y haremos que aparezca cuando pasemos con el ratón por encima de cada. Para eso cambiaremos su width a 0. De esta manera no se mostrará al principio y si además le añadimos a :hover:after el width de 100% haremos que crezca cuando se active la pseudoclase :hover. Es decir, cuando pasemos el ratón por encima de cada  li.

 

Si además queremos que no crezca de golpe... podemos aplicarle una propiedad nueva: transition.

Transition recibe hasta cuatro valores:

- La propiedad que queremos modificar, si ponemos all se aplicará todas las propiedas que son suceptibles de ser modificadas paso a paso,

- tiempo que debe durar la transición,

- función de transición en función del tiempo (siento la redundancia). Existen varias prefefinidas (ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier),

- tiempo de espera hasta empezar a ejecutar la animación.

¿Y cuando se producen estas transciones? Fácil: Siempre que en un elemento esté definida la propiedad transition y forcemos un cambio de una segunda propiedad afectada por transition. Este cambio de propiedad se puede definir en :hover, en :target... o bien desde javascript, por ejemplo cambiando el className del elemento.

    ul.slider li:after{
    
        width:100%; /importante esto lo hemos cambiado/
        
        -moz-transition: width 5s linear;
        -webkit-transition: width 5s linear;
        -o-transition: width 5s linear;
        transition: width 5s linear;
        
    }
    
    ul.slider li:hover:after{    
        width:100%;
    }     

La definición de la propiedad transition (width 5s linear) indica que se va a animar la propiedad width (en este caso de 0 a 100%) durante 5s y con una funcion linear. Como no indicamos ningún tiempo de espera, se inciará en cuanto se establezca el :hover del elemento.

[NOTA: Hasta ahora hemos complicado la propiedad para que funcione en muchos navegadores. Aunque está hecho para Firefox, siempre intentamos pensar en todos los navegadores. El W3C aún no ha cerrado la redacción de la recomendación y por lo tanto los desarrolladores de navegadores todavía experimentan con la propiedad. Cada uno puede haber decidido los parámetros que recibe o sus valores por defecto. Por eso, y para no interferir con el estándar final, se establecen prefijos a estas propiedades. No obstante, esta propiedad esta muy  'estandarizada' entre navegadores, por eso me aventuro a poner la final después de las definiciones específicas.]

Probad a poner el ratón encima de la imagen visible y a quitarlo. Como ejemplo probad a poner el transition dentro del :hover para ver la diferencia. Es sutil pero importante.

Ver el resultado con la barra de progreso, esta vez animada.

Paso 4

Ahora queremos que la imagen cambie. En principio es fácil, solo tendríamos que utilizar display:none. Pero... ¿cuándo?

Podríamos utilizar una transición, pero hay un problema. Display no aparece entre las propiedades con posibilidad de ser animadas. El listado lo tenéis aquí : http://www.w3.org/TR/css3-transitions/#animatable-properties-.

También podríamos usar javascript para cambiar el valor de display. Pero esto es 'Pure CSS'; además, sería demasiado fácil.

La tercera opción es ir a buscar entre las propiedades que se pueden animar. En este caso nos vamos a quedar con margin. Y como no podemos hacer que la imagen desaparezca, haremos que se salga del foco. Y para que no de problemas utilizaremos un tiempo muy pequeño para la animación. Además, para que ocurra en el momento apropiado, pondremos un tiempo de espera igual al tiempo que tarda la barra de progreso en finalizar su animación.

Por último, pondremos un overflow:hidden en el  ul.

     ul.slider{
        overflow:hidden;
    }
    
    ul.slider li:hover{
    
        margin:10000000px; /truco o trato/

        
        -moz-transition: margin .1s linear 5s;
        -webkit-transition: margin .1s linear 5s;
        -o-transition: margin .1s linear 5s;
        transition: margin .1s linear 5s;
    }

En este punto, la animación se lanza pasados 5 segundos y se produce muy rapidamente. Ni siquiera se ve cómo la capa desaparece de la vista. ¿Por qué no funciona? Porque parece que va a cambiar pero no lo hace.

Ver el resultado con la barra de progreso, esta vez animada.

Paso 5

Cuando la capa desaparece, el :hover deja de estar presente, de modo que el margin vuelve a ponerse a cero. Por eso parapadea.

Así que ahora tenemos que hacer algo para que las capas que ya se han visto desaparezcan de verdad. Además, hay que tener en cuenta que las imágenes están al reves. Es decir, la primera en el código HTML esta la última y la última la primera. Podemos utilizar el operador para que las capas ya vistas desparezcan.   

    ul.slider li:hoverli
    {
        /hacerla desparecer/
    }

Es decir, los elementos  hermanos colocados después de un   con la pseudoclase :hover activa no queremos que se muestren. 

    ul.slider li:hoverli
    {
        display:none; /volveremos sobre este display/
    }

Ver ejemplo casi, casi funcional.

Paso 6

Esto ya funciona. Pero quedaría mejor con algún tipo de efecto. Por ejemplo, un fade, es decir, que la capa desaparezca poco a poco.

Para ello, transición al canto: a la transicion de desaparición margin le añadiremos otra

    ul.slider li{
        opacity:1;   

        background:#000; /Solo para que no se vean cargar las fotos una encima de la otra/    
        
    }
    
    
    ul.slider li:hover{
        opacity: 0;
        
        -moz-transition: margin .1s linear 5s, opacity 1s linear 4s ;
        -webkit-transition: margin .1s linear 5s, opacity 1s linear 4s ;
        -o-transition: margin .1s linear 5s, opacity 1s linear 4s ;
        transition: margin .1s linear 5s, opacity 1s linear 4s ;
    }

A la anterior transición de margin le añadimos otra con la propiedad opacity (opacidad). Con lo que hemos aprendido hasta aquí, esto tiene que ser sencillo.

Ver ejemplo listo para pasar enseñarselo a los amigos.

Paso 7

Hasta aquí, el ejemplo ya está muy bien resuelto. Pero para afinar, vamos a incitar al usuario a que pase el ratón por encima del carrusel mediante un botón de 'play' sobre la imagen. Para ello, qué mejor que usar :before. Así no tendremos que añadir ningun elemento HTML adicional en nuestro código.

     ul.slider:before{
        content:'';
        
        background:transparent url(http://estaticos01.elmundo.es/elmundo/iconos/v4.x/v4.02/play.png) no-repeat scroll right bottom;
        
        height:30px;
        width:100%;

        position:absolute;
        
        left:0;
        bottom:0;
        
        z-index:1;
    }
    
    ul.slider:hover:before{
        display:none;
    } 

Con lo que hemos visto hasta ahora, debería ser fácil de desentrañar lo que hemos hecho en este paso. Si no es así, lo aclaramos en los comentarios.

Y con esto está todo completo. Aquí lo puede copiar quien quiera analizarlo.

Paso opcional

En el paso 5 pusimos un display:none para finalizar la transición de la capa. Es el responsable de que quede un efecto bastante desagradable: la última imagen de la galería hace un fundido a blanco cuando desaparece... y después aparece la primera imagen. Para  evitarlo, en lugar de utilizar display:none y que la capa 'desaparezca', lo mejor es apilarlas por debajo. Por ejemplo con z-index:-1. Siempre que el ul no tenga background, funcionará.

    ul.slider li:hoverli{
        z-index:-1
    }

Otro detalle: al cargar todas las imágenes por primera vez puede darse un efecto poco estético: que todas las imágenes se carguen a la vez y en orden inverso a como las tenemos dispuestas visualmente. Para evitarlo, podemos establecer un fondo en el li.

     ul.slider li{
        background:#000;
    }

Y con esto queda todo 'fino'. Aquí dejo  el ejemplo final con el CSS sin pasos y limpito.

 

Galeria de fotos html pronta 76
25 Scripts de Galeria de Imagem em jQuery Cdigo Fonte
Galeria de fotos html pronta 67
Website Photo Galery Como criar uma galeria de fotos para website
Galeria de fotos html pronta 21
Una galera hecha slo con CSS Total, si es solo apretar un botn
Galeria de fotos html pronta 7
Galeria de imagens (HTML /CSS) - Stack Overflow em Portugus
Galeria de fotos html pronta 15
Criar uma galeria de fotos em seu site em dois minutos
Galeria de fotos html pronta 80
JQuery Lightbox: Como criar uma galeria de imagens
Galeria de fotos html pronta 12
Galeria de fotos html pronta 78
Galeria de fotos html pronta 19
Galeria de fotos html pronta 4
Galeria de fotos html pronta 27
Galeria de fotos html pronta 84
Galeria de fotos html pronta 85
Galeria de fotos html pronta 25
Galeria de fotos html pronta 71
Galeria de fotos html pronta 2

Site menu