CSS: Caixas com cantos arredondados

Tradução livre de artigo originalmente publicado na tutorialvault.

Bem, o efeito final é este:

Caixa com cantos arredondados

Primeiramente, você precisa de duas imagens: a parte de cima e a parte de baixo da caixa. Fiz as minhas no Fireworks, e ficaram assim:

caixa_topo.png


caixa_baixo.png

A "mágica" da técnica é associar cada imagem como background de um elemento HTML. Isso cria uma vantagem óbvia, que é a de você montar uma estrutura bem definida, mantendo seu código semântico. A estrutura ficará desta forma:

<div class="caixa-curva">

<h2>Caixa com cantos arredondados</h2>

<p>Este texto se quebra automaticamente, sem deformar o formato da caixa.</p>

</div>



Vamos agora ao CSS:

.caixa-curva
{
width: 300px;
margin: 10px;
background-color: #c3d0d4;
}

.caixa-curva h2
{
background: #c3d0d4 url(../images/caixa_topo.png) no-repeat left top;
color: #f4fbfd;
padding: 10px 15px 5px 15px;
}

.caixa-curva p
{
background: #c3d0d4 url(../images/caixa_baixo.png) no-repeat left bottom;
margin: 0px;
padding: 5px 15px 10px 15px;
text-align: left;
}

O código garante as bordas arredondadas, e o texto não provocará quebra da caixa.

Qualquer dúvida, postem nos comentários.

Abraço e até a próxima!

Posicionando elementos no meio da página via CSS

Esta é uma dúvida recorrente entre todas as pessoas que estão começando a usar CSS para montar o layout de sites. Além disso o comportamento para alinhamentos não funciona de forma homogênea, tendo em vista que o Internet Explorer (sempre ele) trata as bordas de maneira diferente do mundo... Por isso vamos a uma solução global.

Suponhamos que o código entre as suas tags BODY seja assim:

<body>
<div id="div_geral">
Aqui vai o resto do site
</div>
</body>

O seu trecho de CSS deve ser da seguinte forma, para alinhar em todos os browsers:

body {
text-align: center;
}

#div_geral {
text-align: left;
margin: 0 auto;
}


O atributo text-align no marcador BODY diz para o IE alinhar todo conteúdo pelo centro da página. Em qualquer outro browser que não o IE, este comando afeta somente elementos visíveis como texto, o que é o certo. Por isso, quando definimos as propriedades da ID de div #div_geral, dizemos primeiramente para resetar o alinhamento à esquerda, e em seguida vemos o atributo margin com valor 0 (zero) auto. Mas o que isso significa?

Bem, o atributo margin pode ter até quatro propriedades:

margin: 10px 20px 10px 20px;

Estas propriedades se referem respectivamente às margens superior, direita, inferior e esquerda do elemento. Se for trabalhada em pares, ou seja, fornecendo apenas duas propriedades, ela trata o topo com o valor da primeira propriedade e o espaçamento à esquerda e à direita com o valor da segunda propriedade. Note que, neste exemplo, a segunda propriedade tem o valor auto. Isto significa que o browser pega todo o espaço em volta do elemento e divide-o igualmente entre as margens esquerda e direita do elemento, resultando desta forma no desejado alinhamento centralizado.

Na verdade, parece complicado, mas com o tempo você verá que é bem simples. E espero assim estar acabando com a sua desculpa para ainda usar tabelas para montar estruturas de layout...

Abraços e até a próxima.