Home Tutoriais Desenvolvimento Criando molduras com CSS


Neste tutorial mostrarei uma técnica CSS de criação de molduras para uma imagem de um quadro, de uma foto ou de qualquer outro gráfico retangular. O campo de aplicação de manipulação de imagens em páginas Web é vastíssimo e certamente o efeito obtido com esta técnica poderá ser útil para aplicação em muitas diferentes maneiras. O assunto não se esgota e nem fica limitado ao efeito aqui mostrado.
Explicarei através de um exemplo os conceitos que fundamentam a construção. A partir do entendimento destes conceitos você estará em condições de prosseguir com novos experimentos e extensões de modo a obter efeitos bem mais interessantes que o deste tutorial.

A estrutura para estilização

A moldura em volta da imagem será construida com uso das propriedades CSS
border padding e background.

Etapa 1 – A imagem

A imagem que usei tem 350 x 275 px, mas para efeito de ilustração das etapas do tutorial, usarei a miniatura mostrada abaixo:

miniatura da paisagem marinha

Iniciamos com uma DIV à qual atribuimos a classe .conteudo (div.conteudo) e que destina-se a container da imagem, com as mesmas dimensões da imagem e com uma borda de 4px na cor cinza (#999).
As CSS e marcação são mostradas a seguir:

CSS:

1..conteudo {
2.width:350px;
3.height:275px;
4.border:4px solid #999;
5.background:transparent url(/imagem.jpg);
6.}

HTML:

1.<div class="conteudo"></div>

Que será renderizado conforme mostrado a seguir:
Nota: Conforme dito acima, para mostrar as renderizações em etapas utilizarei uma miniatura.

Etapa 2 – A primeira moldura

A seguir criaremos mais um DIV ao qual atribuimos a classe .moldura-dois e que destina-se a container dadiv.conteudo. Ele terá uma borda de 8px em cor esverdeada (#5f6632) estilo inset (inserido, interior) e um padding de 15px mostrando a cor lilás do background #b1b1c3.
As CSS e marcação com as novas regras são mostradas a seguir:

CSS:

01..conteudo {
02.width:350px;
03.height:275px;
04.border:4px solid #999;
05.background:transparent url(/imagem.jpg);
06.}
07.
08..moldura-dois {
09.width358px/*350+4+4(bordas)*/
10.border:8px inset #5f6632;
11.padding:15px;
12.background#b1b1c3;
13.}

HTML:

1.<div class="moldura-dois">
2.<div class="conteudo"></div>
3.</div>

Que será renderizado conforme mostrado a seguir:

Etapa 3 – A moldura externa

Finalmente criaremos mais um DIV ao qual atribuímos a classe .moldura-um e que destina-se a container dasdiv.moldura-dois e div.conteudo anteriores. Ele terá uma borda de 20px em cor azulada (#5d738b) estilo inset (inserido, interior) e um padding de 25px mostrando uma imagem de fundo bg-um.gif.
As CSS e marcação com as novas regras são mostradas a seguir:

CSS:

01..conteudo {
02.width:350px;
03.height:275px;
04.border:4px solid #999;
05.background:transparent url(/imagem.jpg);
06.}
07.
08..moldura-dois {
09.width358px;
10.border:8px inset #5f6632;
11.padding:15px;
12.background#b1b1c3;
13.}
14.
15..moldura-um {
16.width404px/*358+8+8(bordas)+15+15(paddings)*/
17.border:20px inset #5d738b;
18.padding:25px;
19.backgroundtransparent url(/bg-um.gif);
20.}

HTML:

1.<div class="moldura-um">
2.<div class="moldura-dois"></div>
3.<div class="conteudo"></div>
4.</div>
5.</div>

Que será renderizado conforme mostrado a seguir:

E acabou!
Chegamos ao efeito final proposto. Lembramos que foram mostrados os fundamentos da técnica. Você poderá usar mais DIVs e ampliar ou aperfeiçoar a construção de molduras com CSS a partir destes fundamentos.

Fonte: http://www.maujor.com/tutorial/molduras.php