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.

Podemos ver o resultado conseguido em uma página a parte.

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 class="moldura1">
<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 class="moldura2">
<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 class="moldura3">
<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. Este efeito de sombra com CSS já foi explicado em outro artigo anterior em CriarWeb.com, por isso não daremos mais explicações, e sim a referência ao artigo: Efeito de sombra com 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 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.

Podemos ver de novo as distintas molduras realizadas com CSS em uma página a parte.