En este taller de CSS vamos a crear una serie de 4 marcos para fotos, que podemos utilizar en una página web para mejorar la presencia, pero sin complicarnos la vida. Una vez elegido el marco que más nos guste, podemos utilizarlo repetidas veces en la página para que todas las fotos se vean de manera parecida y gane también un poco de personalidad el diseño de la web.

Para hacer esta serie de marcos hemos evitado el uso de imágenes adicionales, sólo las fotografías, lo que hace que el diseño sea más fácil de aplicar, sólo definiendo los estilos CSS.

Podemos ver el resultado conseguido en una página aparte.

Primer marco CSS, que es sencillo y aplica estilos tanto al contenedor de la foto como a la imagen misma.

.marco1 {
   padding:8px;
   background-color: #f5f5f5;
   width: 200px;
   border: 1px solid #999999;
}
.marco1 IMG{
   border: 1px solid #000000;
}

<div class="marco1">
<img src="im1.jpg" width="200" height="150" alt="">
</div>

En este caso hemos definido un espacio entre el marco y la foto, un color de fondo y un borde. Con la segunda declaración estamos definiendo también un borde de color negro para la imagen, para que quede más resaltada.

Veamos ahora el segundo marco, que hemos querido hacer un borde como con relieve.

.marco2 {
   padding:8px;
   background-color: #f5f5f5;
   width: 200px;
   border-bottom: 1px solid #999999;
   border-right: 1px solid #999999;
}

<div class="marco2">
<img src="im2.jpg" width="200" height="150" alt="">
</div>

Hemos definido estilos CSS para un espacio entre la foto y el borde del contenedor, un color de fondo y los mencionados bordes, que sólo se aplican abajo y a la derecha.

Ahora hemos definido un marco muy sencillo, pero que recuerda a las fotos instantáneas de Polaroid.

.marco3 {
   padding:8px 8px 20px 8px;
   background-color: #ffffff;
   width: 200px;
   border: 1px solid #999999;
}

<div class="marco3">
<img src="im3.jpg" width="200" height="150" alt="">
</div>

Simplemente hemos definido unos espacios entre la foto y el borde del elemento, donde el espacio de abajo es mayor para emular el marco de las Polaroid, que era más ancho abajo.

Luego hemos puesto un borde al propio contenedor para que se distinga con el fondo de la página, que también es blanco.

Por último hemos creado un marco con sombra. Este marco con sombra sin utilizar imágenes se nos complica bastante en el código HTML, pero todavía más en el código CSS. Este efecto de sombra con CSS ya fue explicado en otro artículo anterior en DesarrolloWeb.com, por lo que no voy a dar más explicaciones, sino la referencia al artículo: Efecto de sombra con CSS

.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
   width: 224px;
}
.shadow, .content{
   position: relative;
   bottom: 2px;
   right: 2px;
}
.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}
.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}
.content IMG{
   border: 1px solid #000000;
}

<div class="blur">
<div class="shadow">
<div class="content"><img src="im4.jpg" width="200" height="150" alt=""></div>
</div>
</div>

Como vemos en el código HTML, se utilizan tres contenedores distintos, para emular el efecto de degradado de la sombra, que es más oscura cerca del objeto y más clara a medida que la sombra se aleja del objeto.

Tendremos que definir estilos para cada uno de los tres contenedores. Lo bueno es que, como los estilos se definen por clases CSS, sólo los tendremos que definir una vez y los podremos utilizar en todas las imágenes que se deseen.

Podemos ver de nuevo los distintos marcos realizados con CSS en una página aparte.