helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Realizar com imagens e folhas de estilo um desenho para uma caixa para colocar conteúdos.
Por Miguel Angel Alvarez - Tradução de JML
Vamos fazer um artigo prático de CSS para mostrar uma maneira de fazer uma caixa com CSS para colocar conteúdos. A caixa terá um design especial que emoldure os conteúdos que colocarmos dentro.
O exemplo que escolhemos poderia ser feito de várias maneiras, cada uma com suas vantagens e inconvenientes. Não obstante, nós vamos explicar a forma de fazê-lo que nos pareceu mais útil. Teria estas vantagens e inconvenientes:
Vantagens: A caixa pode crescer para baixa o quanto você desejar. Portanto não seria problema se tivéssemos que colocar mais ou menos texto, porque a caixa se ajustaria ao tamanho que tivéssemos.
Inconvenientes: A caixa tem uma largura fixa, que está marcada pelo tamanho das imagens que tivermos realizado. Se adicionarmos muitas camadas dentro desta caixa, pode dar problemas de projeção, embora não experimentamos este problema em nosso exemplos.
As imagens
Para realizar esta caixa utilizamos duas imagens. Uma para a parte de cima da moldura e outra para a parte de baixo da moldura. Estas imagens podem ser feitas com qualquer programa de edição de imagens, ajustando cores e formas ao aspecto de nossa própria página. As imagens que utilizamos são estas:
O código HTML
Realizamos o exercício utilizando duas camadas (etiqueta <DIV>), uma dentro da outra. Uma camada se chama "caixa acima", que terá o estilo da parte de cima da caixa, e outra "caixa abaixo", onde colocaremos os estilos necessários para o corpo da caixa e a parte debaixo. A camada principal é "caixaacima" e dentro estará a camada "caixaabaixo". Em "caixaabaixo" é onde colocaremos o texto para colocar dentro da caixa.
O código é o seguinte:
<div class="caixaacima">
<div class="caixaabaixo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
….
</div>
</div>
Por Miguel Angel Alvarez - Tradução de JML
Vamos fazer um artigo prático de CSS para mostrar uma maneira de fazer uma caixa com CSS para colocar conteúdos. A caixa terá um design especial que emoldure os conteúdos que colocarmos dentro.
O exemplo que escolhemos poderia ser feito de várias maneiras, cada uma com suas vantagens e inconvenientes. Não obstante, nós vamos explicar a forma de fazê-lo que nos pareceu mais útil. Teria estas vantagens e inconvenientes:
Vantagens: A caixa pode crescer para baixa o quanto você desejar. Portanto não seria problema se tivéssemos que colocar mais ou menos texto, porque a caixa se ajustaria ao tamanho que tivéssemos.
Inconvenientes: A caixa tem uma largura fixa, que está marcada pelo tamanho das imagens que tivermos realizado. Se adicionarmos muitas camadas dentro desta caixa, pode dar problemas de projeção, embora não experimentamos este problema em nosso exemplos.
As imagens
Para realizar esta caixa utilizamos duas imagens. Uma para a parte de cima da moldura e outra para a parte de baixo da moldura. Estas imagens podem ser feitas com qualquer programa de edição de imagens, ajustando cores e formas ao aspecto de nossa própria página. As imagens que utilizamos são estas:
O código HTML
Realizamos o exercício utilizando duas camadas (etiqueta <DIV>), uma dentro da outra. Uma camada se chama "caixa acima", que terá o estilo da parte de cima da caixa, e outra "caixa abaixo", onde colocaremos os estilos necessários para o corpo da caixa e a parte debaixo. A camada principal é "caixaacima" e dentro estará a camada "caixaabaixo". Em "caixaabaixo" é onde colocaremos o texto para colocar dentro da caixa.
O código é o seguinte:
<div class="caixaacima">
<div class="caixaabaixo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
….
</div>
</div>