helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Novo exemplo de construção de caixas com esquinas arredondadas, realizado com CSS.
Por Miguel Angel Alvarez - Tradução de JML
Neste artigo de CSS continuaremos um exercício anterior, no qual realizávamos uma caixa com CSS para colocar conteúdo. Com o mesmo esquema relatado no artigo anterior, vamos realizar outro tipo de caixa -com esquinas arredondadas-, mudando unicamente as imagens utilizadas.
Antes de começar a leitura deste artigo deve ser lido o artigo precedente.
Também é aconselhado ver o exemplo que vamos construir.
Caixa com esquinas arredondadas
O exemplo a seguir é para criar um container com esquinas arredondadas. Os arredondados das esquinas serão feitos com imagens, de maneira que se possa variar a cor da caixa com as mesmas imagens.
Para conseguir isto vamos utilizar as seguintes imagens:
Estas 2 imagens são transparentes, menos o arredondado dos lados, que tem a cor branca. Devido a isso, estas caixas com esquinas arredondadas só poderão ser utilizadas sobre um fundo branco. Se quisermos fazer uma caixa para utilizar sobre outro fundo, temos que refazer estas imagens mudando a cor branca.
O código HTML continua sendo o mesmo:
<div class="caixaacima">
<div class="cajaabaixo">
Lorem ipsum dolor sit amet, consectetuer
…
</div>
</div>
Agora vemos o código CSS. Têm poucas variações com respeito a do exemplo anterior:
.caixaacima{
width: 600px;
background-image: url("arriba. gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.caixaabaixo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}
Há que observar que definimos uma cor de fundo na classe caixaacima. Se quisermos que a caixa varie de cor, simplesmente haveria que mudar essa cor de fundo.
Por Miguel Angel Alvarez - Tradução de JML
Neste artigo de CSS continuaremos um exercício anterior, no qual realizávamos uma caixa com CSS para colocar conteúdo. Com o mesmo esquema relatado no artigo anterior, vamos realizar outro tipo de caixa -com esquinas arredondadas-, mudando unicamente as imagens utilizadas.
Antes de começar a leitura deste artigo deve ser lido o artigo precedente.
Também é aconselhado ver o exemplo que vamos construir.
Caixa com esquinas arredondadas
O exemplo a seguir é para criar um container com esquinas arredondadas. Os arredondados das esquinas serão feitos com imagens, de maneira que se possa variar a cor da caixa com as mesmas imagens.
Para conseguir isto vamos utilizar as seguintes imagens:
Estas 2 imagens são transparentes, menos o arredondado dos lados, que tem a cor branca. Devido a isso, estas caixas com esquinas arredondadas só poderão ser utilizadas sobre um fundo branco. Se quisermos fazer uma caixa para utilizar sobre outro fundo, temos que refazer estas imagens mudando a cor branca.
O código HTML continua sendo o mesmo:
<div class="caixaacima">
<div class="cajaabaixo">
Lorem ipsum dolor sit amet, consectetuer
…
</div>
</div>
Agora vemos o código CSS. Têm poucas variações com respeito a do exemplo anterior:
.caixaacima{
width: 600px;
background-image: url("arriba. gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.caixaabaixo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}
Há que observar que definimos uma cor de fundo na classe caixaacima. Se quisermos que a caixa varie de cor, simplesmente haveria que mudar essa cor de fundo.