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:
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.width: 358px; /*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.width: 358px;10.border:8px inset #5f6632;11.padding:15px;12.background: #b1b1c3;13.}14.15..moldura-um {16.width: 404px; /*358+8+8(bordas)+15+15(paddings)*/17.border:20px inset #5d738b;18.padding:25px;19.background: transparent 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.