Molduras para fotos com CSS

Neste workshop de CSS vamos criar uma série de 4 molduras para fotos, que podemos utilizar em uma página web para melhorar a presença, porém sem complicar nossa vida. Uma vez escolhida a moldura que mais gostemos, podemos utiliza-la repetidas vezes na página para que todas as fotos sejam vistas de maneira parecida e ganhe também um pouco de personalidade o design da web.

Para fazer esta série de molduras, evitamos o uso de imagens adicionais, só as fotografias, o que faz com que o desenho seja mais fácil de aplicar, definindo somente os estilos CSS.

Primeira moldura CSS, que é simples e aplica estilos tanto ao container da foto como à própria imagem.

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

<div>
<img src=”im1.jpg” width=”200″ height=”150″ alt=””>
</div>

Neste caso definimos um espaço entre a moldura e a foto, uma cor de fundo e uma borda. Com a segunda declaração estamos definindo também uma borda de cor preta para a imagem, para que fique mais ressaltada.

Vejamos agora a segunda moldura, que quisemos fazer uma borda como com relieve.

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

<div>
<img src=”im2.jpg” width=”200″ height=”150″ alt=””>
</div>

Definimos estilos CSS para um espaço entre a foto e a borda do container, uma cor de fundo e as bordas mencionadas, que só se aplicam abaixo e à direita.

Agora definimos uma moldura muito simples, mas que lembra as fotos instantâneas de Polaroid.

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

<div>
<img src=”im3.jpg” width=”200″ height=”150″ alt=””>
</div>

Simplesmente definimos uns espaços entre a foto e a borda do elemento, onde o espaço debaixo é maior para emular a moldura das Polaroid, que era mais larga embaixo.

Logo, colocamos uma borda ao próprio container para que se diferencie com o fundo da página, que também é branco.

Por último criamos uma moldura com sombra. Esta moldura com sombra sem utilizar imagens é um pouco mais complicado no código HTML, porém ainda mais no código 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>
<div>
<div><img src=”im4.jpg” width=”200″ height=”150″ alt=””></div>
</div>
</div>

Como vemos no código HTML, utilizam-se três containers diferentes, para emular o efeito de degrade da sombra, que é mais escura perto do objeto e mais clara à medida que a sombra se afasta do objeto.

Teremos que definir estilos para cada um dos três containers. O bom é que, como os estilos se definem pelas classes CSS, só teremos que defini-los uma vez e poderemos utiliza-los em todas as imagens que desejarmos.

Fonte: http://www.criarweb.com/artigos/molduras-fotos-css.html