[Resolvido] Bordas arredondadas...

tem algumas dicas aqui

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Sempre me passam esse site ..

Não manjo inglês, nem os tratutores <_<

Gostaria de ajuda mesmo, pelo menos sobre as classes. não indicação. Obrigada ;)

o box que você quer tem tamanho fixo ?

se sim, é só fazer a figura redondinha xD

se não tem tamanho fico, você faz uma 'fatia' pra ficar do lado esquerdo, emcima, o mais fina que puder e uma imagem pra direito com o canto redondo que seja grande o suficiente pra cobrir toda a extenção do box até onde ele possa ser 'esticado'. coloca essas duas em uma div pra fazer a 'parte de cima' ou titulo.

faz a mesma coisa com a parte do conteudo.

pode trabalhar com posicionamento de background, ai não vai ter maiores problemas

ve o codigo desse aqui pra entender melhor

http://www.vertexwerks.com/tests/sidebox/

Depende cara.. os boxs que você precisa, terão sobras nas laterais? bordas retas? ou apenas os cantos redondos?

serão espansíveis verticalmente? horizontalmente ?

tudo depende de como você quer o efeito final.. impossível lhe sugerir algo, se você não tentar.

alternativa 1: simples [apenas cantos arredondados sem transparência]

para fins didáticos, vamos assumir que suas bordas serão de 5pixels

1.1 - Desenhe um círculo de 10x10 (duas vezes o tamanho da borda) e nomeie como [bordas.jpg].

1.2 - Crie 4 classes da seguinte maneira:

.se { background: url('bordas.jpg') top left; position: absolute; top: -1px; left: -1px; width: 5px; height: 5px }
.sd { background: url('bordas.jpg') top right; position: absolute; top: -1px; right: -1px; width: 5px; height: 5px }
.ie { background: url('bordas.jpg') bottom left; position: absolute; bottom: -1px; left: -1px; width: 5px; height: 5px }
.id { background: url('bordas.jpg') bottom right; position: absolute; bottom: -1px; right: -1px; width: 5px; height: 5px }
1.3 - Ao fim de cada elemento que será 'arredondado' adicione:

<span class="se"></span>
<span class="sd"></span>
<span class="ie"></span>
<span class="id"></span>

Atenção: O elemento a ser arredondado, precisa estar setado como position: relative;

Alternativa 2: sofisticado [sombras e transparência]

2.1 - Desenhe o seu bloco, aplique os efeitos de sombra, chanfro, relevo etc.

2.2 - Corte 8 áreas dele:

2.2.1 - Superior esquerdo;

2.2.2 - Superior;

2.2.3 - Superior direito;

2.2.4 - Esquerdo;

2.2.5 - Inferior esquerdo;

2.2.6 - Inferior;

2.2.7 - Inferior direito;

2.2.8 - Direito;

2.3 A metodologia de CSS é a mesma do anterior, mas com mais classes:

.se { background: url('sup_esq.png') top left; position: absolute; top: -1px; left: -1px; width: 5px; height: 5px }
.sup { background: url('superior.png'); position: absolute; top: -1px; left: 4px; right: 4px; height: 5px; repeat-x }
.sd { background: url('sup_dir.png') top right; position: absolute; top: -1px; right: -1px; width: 5px; height: 5px }
.esq { background: url('esquerdo.png'); position: absolute; top: 4px; left: -1px; bottom: 4px; width: 5px; repeat-y }
.ie { background: url('inf_esq.png') bottom left; position: absolute; bottom: -1px; left: -1px; width: 5px; height: 5px }
.inf { background: url('inferior.png'); position: absolute; bottom: -1px; left: 4px; right: 4px; height: 5px; repeat-x }
.id { background: url('inf_dir.png') bottom right; position: absolute; bottom: -1px; right: -1px; width: 5px; height: 5px }
.dir { background: url('direito.png'); position: absolute; top: 4px; bottom: 4px; right: -1px; width: 5px; repeat-y }
2.4 A inclusão delas na marcação:

<span class="se"></span>
<span class="sd"></span>
<span class="ie"></span>
<span class="id"></span>
<span class="sup"></span>
<span class="inf"></span>
<span class="esq"></span>
<span class="dir"></span>

PS.: Os dois modelos são flexíveis para elementos de largura estática E dinâmica

Dobras na laterais ? O.o

Serão expansíveis verticalmente...

meu layout é o da imagem desse tópico

Clique aqui

Gostaria de por bostas na parte do menu, conteudo e rodapé, pois o topo é apenas uma imagem.

é possivel ? volto a tarde.

ah, percebi que eu já tinha respondido algo parecido por esses dias

sim.. gostaria de saber se é mais ou menos assim para fazer com as minhas próprias imagens com o código que você passou, ou se devo testar os dois, o que você passou no outro tpc e esse de hoje.. :mellow:

a diferença entre os dois códigos é que um (o mais novo) utiliza CSS_Sprite o outro não.

Ah. Beleza. Obrigado, qualqr duvida posto, pode dar o tpc como resolvido. ;)