:: Criando molduras com CSS ::
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 uma DIV à qual atribuimos a classe .moldura-dois e que destina-se a container da div.conteudo. Ela 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:350px;
height:275px;
border:4px solid #999;
background:transparent url(/imagem.jpg);
}
.moldura-dois {
width: 358px; /*350+4+4(bordas)*/
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 uma DIV à qual atribuimos a classe .moldura-um e que destina-se a container das div.moldura-dois e div.conteudo anteriores. Ela 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:350px;
height:275px;
border:4px solid #999;
background:transparent url(/imagem.jpg);
}
.moldura-dois {
width: 358px;
border:8px inset #5f6632;
padding:15px;
background: #b1b1c3;
}
.moldura-um {
width: 404px; /*358+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, lembrando 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.
Última modificação: 2008/11/20 09:12:20 GMT
Criado em: 2006-05-15
