Criando molduras com CSS

Publicado em: 15/05/2005

Introdução

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:

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:

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

HTML:

<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 da div.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:

.conteudo {
	width:358px;
	height:275px;
	border:4px solid #999;
	background:transparent url(/imagem.jpg);
	}

.moldura-dois {
	width: 406px; 
	border:8px inset #5f6632;
	padding:15px;
	background: #b1b1c3;
	}

HTML:

<div class="moldura-dois">
<div class="conteudo"></div>
</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 das div.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:

.conteudo {
	width:404px;
	height:275px;
	border:4px solid #999;
	background:transparent url(/imagem.jpg);
	}

.moldura-dois {
	width: 404px; 
	border:8px inset #5f6632;
	padding:15px;
	background: #b1b1c3;
	}

.moldura-um {
	width: 450px; /*404+8+8(bordas)+15+15(paddings)*/
	border:20px inset #5d738b;
	padding:25px;
	background: transparent url(/bg-um.gif);
	}

HTML:

<div class="moldura-um">
<div class="moldura-dois"></div>
<div class="conteudo"></div>
</div>
</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.

O resultado final em tamanho natural

Este artigo foi traduzido para o russo. Grato ao Nikolay.