Álbum con efectos en CSS 3

  • Por
  • CSS
Creamos un álbum de fotos con estilos impactantes de CSS 3 y animación, sin utilizar Javascript o jQuery.
A lo largo de varios artículos hemos presentado un avance de las posibilidades de CSS 3 para crear animaciones. que son sin duda una de las novedades más impactantes de esa nueva versión del lenguaje de estilos. En este artículo avanzamos un poco en dinámica de los anteriores de este manual y pasamos a utilizar lo aprendido sobre las animaciones CSS para darle un mejor aspecto a nuestra web.

En este ejemplo comprobaremos como con CSS3 podemos, simplemente aplicando unas cuantas reglas de estilo, dar un formato totalmente distinto e impactante a algo tan simple como unas imágenes y un texto. Además, veremos cómo aplicarle dinamismo a nuestra presentación y una pequeña interactividad, definiendo unicamente unos estilos CSS.

Este ejemplo, que veréis es relativamente sencillo, hace años sería muy complicado de hacer y tendríamos que emplear (aparte de HTML y CSS) muchas líneas de código y conocimientos avanzados de Javascript o de algún framework como jQuery. Es una muestra excelente de cómo CSS 3 sustituirá a Javascript en algunas parcelas de sus usos habituales. Estoy segura que os encantará.

Nota: Vamos a darle estilo a una pequeña galería de imágenes con unas fotografías fijas, que tenemos en un código HTML que he escrito a mano. Pero podéis imaginar que, con un poco de programación del lado del servidor, podemos hacerla más dinámica y sacar las imágenes de una base de datos.

En este caso lo primero que vamos a ver va a ser nuestro código HTML, para ir viendo los cambios que vamos realizando según vamos metiendo propiedades a nuestro CSS.

Lo primero que tenemos son las imágenes fijas en nuestro HTML.

Nota: Aviso de antemano que este ejemplo está preparado para el navegador Google Chrome o Safari, pero que pronto otros navegadores serán capaces de interpretar estas reglas de CSS 3. No obstante, habrá que cambiar algo el código del ejemplo, para incorporar las etiquetas CSS definitivas que se definan cuando el estándar termine de estar recomendado para implementación.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Álbum de fotos con CSS</title>
   <link rel="stylesheet" href="album.css" type="text/css">
</head>

<body>

   <ul>
      <li><img src="images/mi-gatito.jpg" alt="" border="0"></li>
      <li><img src="images/queso-gema.jpg" alt="" border="0"></li>
      <li><img src="images/atardecer-pescando.jpg" alt="" border="0"></li>
      <li><img src="images/moto.jpg" alt="" border="0"></li>
      <li><img src="images/tanto-monta.jpg" alt="" border="0"></li>
      <li><img src="images/doris.jpg" alt="" border="0"></li>
   </ul>
</body>
</html>

Con esto, tan sólo nos aparecerían todas las imágenes en una lista, sin estilos y sin nada. Entonces lo primero que vamos a hacer es darle un estilo a la etiqueta <UL> dejándola así: <UL class=fotos>

Y ese estilo lo definimos con el siguiente código CSS:

ul.fotos {
   width: 970px;
   margin: 0 0 18px -30px;
}
ul.fotos li {
   display: inline;
}
ul.fotos a {
   display: inline;
   float: left;
   margin: 0 0 27px 30px;
   width: auto;
   padding: 10px 10px 15px;
   text-align: center;
   color: #333;
   font-size: 18px;
}
ul.fotos img {
   display: block;
   width: 190px;
   margin-bottom: 12px;
}

Esto lo único que hace es darle un ancho a nuestro álbum, y redimensiona nuestras imágenes para que todas tengan el mismo tamaño inicial. Todavía no hemos animado nada, vamos paso a paso.

Ahora vamos a ver que pasa si le damos más estilos a los

  • , pero esta vez tenemos que crear un enlace, aunque no apunte a ningún sitio para poder darle animación a nuestras imágenes. El enlace luego puede ir a la ampliación o a otro sitio, etc.

    <ul class="fotos">
          <li><a href="#" title="Mi gato"><img src="images/mi-gatito.jpg" alt="" border="0" ></a></li>
          <li><a href="#" title="El queso"><img src="images/queso-gema.jpg" alt="" border="0" ></a></li>
          <li><a href="#" title="Valmayor"><img src="images/atardecer-pescando.jpg" alt="" border="0" ></a></li>
          <li><a href="#" title="Mi moto"><img src="images/moto.jpg" alt="" border="0" ></a></li>
          <li><a href="#" title="Toledo"><img src="images/tanto-monta.jpg" alt="" border="0" ></a></li>
          <li><a href="#" title="Mi coneja"><img src="images/doris.jpg" alt="" border="0" ></a></li>
       
    </ul>

    Para que nos salgan los títulos de las fotos tenemos que poner el atributo title en el enlace y no en la imagen.

    Los nuevos estilos CSS serían los siguientes:

    ul.fotos a:after {
       content: attr(title);
    }

    Este estilo junto con las siguientes lineas que añadiríamos al estilo “ul.fotos a”, nos mostrarían una caja y el titulo de cada foto. Las líneas que tenemos que añadir son las siguientes:

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -webkit-transform: rotate(-2deg);
    -webkit-transition: -webkit-transform .15s linear;

    Estos estilos son para la colocación de las cajas:

    ul.fotos li:nth-child(3n) a {
       -webkit-transform: none;
       position: relative;
       top: -5px;
       
    }
    ul.fotos li:nth-child(5n) a {
       -webkit-transform: rotate(5deg);
       position: relative;
       right: 5px;
       
    }

    ul.fotos li a:hover {
       -webkit-transform: scale(1.25);
       -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
       position: relative;
       z-index: 5;
    }

    Con estos estilos lo que le decimos es que nos rote las fotos x grados y que cada 3 una la ponga recta, después en la 5 la rote algo más que las otras. Estos estilos podríamos hacerlos para infinidad de imágenes, buscando cada cuantas fotos queremos rotar o poner rectas. Además el último estilo nos hace que al pasar el ratón por la imagen, esta se agrande con scale y se ponga recta si estaba rotada.

    Nota: hay que recordar que en el momento de redactar este artículo solamente es visible en Chrome y Safari.

    Bueno y el resultado final sería el siguiente.

    En el siguiente artículo veremos otro ejemplo de álbum de fotos con CSS 3.

  • Autor

    Sara Alvarez

    Equipo DesarrolloWeb.com

    Compartir

    Comentarios

    Ambrosio

    23/3/2011
    Buen efecto sólo con CSS
    Es un efecto muy interesante y es curioso que se pueda realizar sólo con CSS, la única pega que le veo es que en navegadores que no estén actualizados no se ve dicho efecto, por ejemplo yo estoy utilizando Firefox 3.6.15 y no veo el efecto, aunque en Crome como indicas se ve de forma impecable. No se si ya se habrá estandarizado este tipo de comportamientos, pero ¿que ocurre si diseñamos una aplicación y el usuario no está navegando con las últimas actualizaciones? No todo el mundo se actualiza inmediatamente, habrá que esperar para adoptar este tipo de soluciones o tener alguna alternativa usuarios que sigan navegando con versiones anteriores de navegadores.
    De todas formas me parece una gran aportación y es interesante ver lo que nos prepara CSS 3.

    mephisto1176

    01/4/2011
    Una pequeña duda...
    Hola, antes que nada quiero agradecerles por el gran aporte que están haciendo a los desarrolladores web con la existencia de esta web. Creo que es fundamental contar con un medio que constantemente nos proporcione información actualizada, dado lo rápido que se mueve el ambiente tecnológico. En fin, tengo sólo una pequeña duda: ¿Por qué se declara el documento como DTD HTML 4.01 Transitional y no DTD XHTML 1.0 Transitional o 1.0 Strict; entendiendo que evidentemente el primero es mucho más flexible pero en la actualidad -al menos así lo tengo entendido- se recomienda más trabajar con las segundas opciones?.

    Gracias nuevamente.

    mephisto1176

    08/4/2011
    Sobre efectos complejos...
    Hola a todos... desde que he visto este artículo sobre CSS 3 he pensado muchas cosas. Creo que es importante recordar el objetivo esencial por el que el lenguaje CSS se ha ido posicionando cada día más: poner fin a las distintas sintaxis de HTML que cada empresa de navegación fué desarrollando indiscriminadamente en aquella famosa "Guerra de los Navegadores".

    El CSS ha sido una elegante solución que ha indicado al desarrollador web un concepto muy correcto y claro: cada cosa debe servir a una finalidad, es decir, el XHTML para marcar los textos, el CSS para darle formato a esos marcados y el JavaScript para animar. Ni más ni menos. Es cierto que el desarrollo del CSS ha traido por consecuencia que su uso pueda resultar cada vez más tentador en cuanto a sus posibilidades como lenguaje; pero como todo en la historia -y eso se aplica también a ésta- hay que estudiar los hecho del pasado para no volver a cometer los mismos errores.

    Saludos y gracias por el gran esfuerzo que hacen.

    conociendocss3

    01/9/2011
    ayuda
    tengo un código q me gustarìa q revisaran...la idea es cear un slide en css3 con jquery,

    el html es + jquery:


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="css/default.css" rel="stylesheet" type="text/css">
    <link href="http://jquery.com/" type="text/javascript">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    </head>

    <body>
    <script type="text/javascript">
    $(document).ready(function(){
    var posX=$("#slide").position().left;
    $("#prev").click(function(){
    if(posX!=0){
    posX=posX+1000;
    $("#slide").css("-webkit-transform","translate("+posX+"px, 0px)");}
    });
    $("#next").click(function(){
    if(posX>=(-1999)){
    posX=posX-1000;
    $("#slide").css("-webkit-transform","translate("+posX+"px, 0px)");}
    });
    $("#img1").click(function(){
    $("#slide").css("-webkit-transform","translate(0px,0px)");
    });
    $("#img2").click(function(){
    $("#slide").css("-webkit-transform","translate(-1000px,0px)");
    });
    $("#img3").click(function(){
    $("#slide").css("-webkit-transform","translate(-2000px,0px)");
    });
    });
    </script>

    <div class="stage" id="stage">
    <div class="scene" id="scene">
    <div class="slide" id="slide">
    <img src="img/Bulbasaur.png"/><img src="img/Ivysaur.png"/><img src="img/Venusaur.png"/></div>
    </div>
    </div>
    <div class="controles" id="controles">
    <a href="#" id="prev"><img src="img/imagen_flecha_izquierda.gif" alt="Arrow Prev"></a><a href="#" id="next"><img src="img/imagen_flecha_derecha.gif" alt="Arrow Next"></a></div>
    </div>
    <div id="menu"><a href="#" id="img1"><img src="img/boton.png"/></a><a href="#" id="img2"><img src="img/boton.png"/></a><a href="#" id="img3"><img src="img/boton.png" alt=""/></a></div>
    </body>
    </html>

    el css3

    #controles{
    width:1200px;
    height:50px;
    position:absolute;
    left: 30px;
    top: 141px;
    z-index:1;
    }
    #scene{
    margin-right:100px;
    margin-left:100px;;
    width:1000px;
    height:405px;
    position:absolute;
    overflow:hidden;
    z-index:3;
    }

    #slide{
    width:5000px;
    height:405px;
    position:relative;
    float:left;
    z-index:2;
    /*-webkit-animation-name:'slide';
    -webkit-animation-duration:40s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:left;*/
    }
    #slide img{
    width:1000px;
    height:405px;
    }
    #next{
    position:absolute;
    float:left;
    right:auto;
    left:1085px;
    top: 0px;
    opacity:0;
    }

    #next:hover{
    opacity:1;
    }
    #prev{
    position:relative;
    float:left;
    right:0px;
    opacity:0;
    }
    #prev:hover{
    opacity:1;
    }

    #menu{
    position:absolute;
    float:left;
    left: 499px;
    top: 465px;
    width: 228px;
    }

    @-webkit-keyframes 'slide' {
    0% {
    -webkit-transform: translate(0px,0);
    -webkit-animation-timing-function:linear;
    -webkit-transition-duration:
    }
    25% {
    -webkit-transform: translate(0px,0);
    -webkit-animation-timing-function:linear;
    }
    30% {
    -webkit-transform: translate(-1000px,0);
    -webkit-animation-timing-function:linear;
    }
    55% {
    -webkit-transform: translate(-1000px,0);
    -webkit-animation-timing-function:linear;
    }
    60% {
    -webkit-transform: translate(-2000px,0);
    -webkit-animation-timing-function:linear;
    }
    85% {
    -webkit-transform: translate(-2000px,0);
    -webkit-animation-timing-function:linear;
    }
    90% {
    -webkit-transform: translate(-3000px,0);
    -webkit-animation-timing-function:linear;
    }
    100%{
    -webkit-transform: translate(-3000px,0);
    -webkit-animation-timing-function:linear;
    }
    }

    Hay alguna forma de q la transición siga ejecutándose aún después de hacer click a alguno de los botones? y q los botones funcionen al mismo tiempo con la animación? gracias por la ayuda q me puedan prestar-...

    netovs

    28/10/2011
    FireFox 5.0 no lo procesa
    Saludos, es un efecto muy bonito en Google Chrome, sin embargo en FireFox no es procesado, esto se debe a que FireFox no es Webkit, cuidado con esas opciones.

    Alejo

    21/11/2011
    Tampoco funciona en Opera
    El efecto tampoco funciona en Opera 11 lo instale hace poco y no funcionan muchas cosas

    Yo

    12/6/2013
    No funciona.
    En mi navegador no se ve nada especial, sólo una serie de miniaturas con un pie de foto con le título de los álbumes.

    Inpane

    21/9/2015
    Para que funcione en los demas navegadores: Internet Explorer, Opera, etc.
    Mozilla: -moz-transform: scale(1.20);
    Opera: -o-transform: scale(1.20);
    Explorer: -ms-transform: scale(1.20);

    .fotos li {
    display: inline;
    width: auto;
    margin: 0 15px 30px;
    padding: 5px 5px 5px 5px;
    float: left;
    border: 5px solid #f6f6f6;
    -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 1px 3px 6px rgba(0,0,0,.25);
    -ms-box-shadow: 1px 3px 6px rgba(0,0,0,.25);
    -box-shadow: 0px 3px 6px rgba(0,0,0,.25);}

    ul.fotos li a:hover {
    -webkit-transform: scale(1.20);
    -moz-transform: scale(1.20);
    -o-transform: scale(1.20);
    -ms-transform: scale(1.20);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -box-shadow: 0 3px 6px rgba(0,0,0,.5);
    position: relative;
    z-index: 5;
    }