Creamos una galería de fotos maquetada con CSS, de una manera sencilla pero vistosa.
Hoy en día cada vez es más común contar con una galería fotográfica en nuestra página web. A lo largo de este tutorial vamos a ver dos propuestas para hacer una galería de fotos vistosa y trivial de usar para nuestros visitantes, maquetada íntegramente con código estándar HTML y CSS.
Maquetar la galería utilizando capas
En esta primera versión de nuestra galería fotográfica vamos a emplear capas contenedoras donde insertar cada una de nuestras miniaturas, junto con la información que queramos asociarles (título, descripción, etc.).
Para hacernos una idea más clara del trabajo que vamos a realizar lo mejor va a ser que veamos el ejemplo en funcionamiento.
Como viene siendo habitual trabajando con capas usaremos otra capa contenedora para nuestra galería fotográfica con la intención de organizar de forma lógica nuestro diseño y englobar nuestro contenido en un bloque que podemos manipular con estilos. Podemos limitar el ancho de esta capa contenedora y situarla a nuestro gusto. En este ejemplo no restringiremos ninguna propiedad salvo los márgenes para conseguir que nuestra maquetación se adapte a cualquier resolución. Los estilos para esta capa contenedora principal son:
#principal {
margin:0 auto;
}
Ahora que ya tenemos una capa donde insertar las fotos prepararemos el estilo para cada una de las miniaturas de las fotos. Haremos flotar cada una de las miniaturas con un float:left; para que se alineen horizontalmente ajustándose al ancho de la ventana. Dándoles margen las separamos unas de otras. Gracias a que estas capas que contienen a las miniaturas de las fotos flotan, se organizarán según el ancho de la ventana, adaptándose a la resolución del usuario.
Una primera aproximación al estilo para las miniaturas es:
.contenedorfoto {
float:left;
margin: 10px;
padding:5px;
}
El código html de nuestra galería tiene el siguiente aspecto:
<body>
<div id="principal">
<h3>GALERÍA CSS</h3>
<div class="contenedorfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen extrañamente larga</span></div>
</div>
</body>
Como puede observarse hemos añadido una descripción adicional con un <span>. Podeis ver el aspecto de esta primera aproximación aquí.
Antes de mejorar la apariencia del texto trabajaremos sobre la capa contenedora de la foto para limitar su anchura y altura y así lograr la apariencia de mosaico típica de las galerías de fotos. Centraremos el contenido dentro de esta capa, le añadimos estilo al color de fondo y dos bordes (en nuestro caso inferior y derecho) para dar a cada miniatura apariencia de profundidad:
.contenedorfoto {
float:left;
width:210px;
height:180px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
}
Ahora ya tenemos nuestra galería con una apariencia más apropiada, como podeis ver en el ejemplo terminado aquí. Para este ejemplo hemos usado para mostrar las miniaturas unas dimensiones proporcionales a la resolución típica.
Existe otra forma de maquetar una galería de fotos utilizando CSS y aplicando listas. Utiliza la que más te guste.
Maquetar la galería utilizando capas
En esta primera versión de nuestra galería fotográfica vamos a emplear capas contenedoras donde insertar cada una de nuestras miniaturas, junto con la información que queramos asociarles (título, descripción, etc.).
Para hacernos una idea más clara del trabajo que vamos a realizar lo mejor va a ser que veamos el ejemplo en funcionamiento.
Como viene siendo habitual trabajando con capas usaremos otra capa contenedora para nuestra galería fotográfica con la intención de organizar de forma lógica nuestro diseño y englobar nuestro contenido en un bloque que podemos manipular con estilos. Podemos limitar el ancho de esta capa contenedora y situarla a nuestro gusto. En este ejemplo no restringiremos ninguna propiedad salvo los márgenes para conseguir que nuestra maquetación se adapte a cualquier resolución. Los estilos para esta capa contenedora principal son:
#principal {
margin:0 auto;
}
Ahora que ya tenemos una capa donde insertar las fotos prepararemos el estilo para cada una de las miniaturas de las fotos. Haremos flotar cada una de las miniaturas con un float:left; para que se alineen horizontalmente ajustándose al ancho de la ventana. Dándoles margen las separamos unas de otras. Gracias a que estas capas que contienen a las miniaturas de las fotos flotan, se organizarán según el ancho de la ventana, adaptándose a la resolución del usuario.
Una primera aproximación al estilo para las miniaturas es:
.contenedorfoto {
float:left;
margin: 10px;
padding:5px;
}
El código html de nuestra galería tiene el siguiente aspecto:
<body>
<div id="principal">
<h3>GALERÍA CSS</h3>
<div class="contenedorfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen</span></div>
<div class="contenedorfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descripción de la imagen extrañamente larga</span></div>
</div>
</body>
Como puede observarse hemos añadido una descripción adicional con un <span>. Podeis ver el aspecto de esta primera aproximación aquí.
Antes de mejorar la apariencia del texto trabajaremos sobre la capa contenedora de la foto para limitar su anchura y altura y así lograr la apariencia de mosaico típica de las galerías de fotos. Centraremos el contenido dentro de esta capa, le añadimos estilo al color de fondo y dos bordes (en nuestro caso inferior y derecho) para dar a cada miniatura apariencia de profundidad:
.contenedorfoto {
float:left;
width:210px;
height:180px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
}
Ahora ya tenemos nuestra galería con una apariencia más apropiada, como podeis ver en el ejemplo terminado aquí. Para este ejemplo hemos usado para mostrar las miniaturas unas dimensiones proporcionales a la resolución típica.
Existe otra forma de maquetar una galería de fotos utilizando CSS y aplicando listas. Utiliza la que más te guste.
Javier Chaure
Desarrollador freelance