Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henrique Barcelos

Bordas Arredondadas em divs

Recommended Posts

Muitas vezes estamos afim de fugir dakeles layouts meio quadradões e usar bordas arredondadas nos nossos sites (como no orkut)...

 

Muitas pessoas pensam que só dá pra fazer se você fizer o fundo inteirinho no Photoshop ou similares. Assim o site fica muito pesado...

 

Meu método não tem nada de revolucionário, acho que até já vi tutoriais quase iguais, mas de qualquer jeito tá aí:

 

Divs com bordas arredondadas

 

Tudo o que você tem a fazer é usar o Photoshop, Fireworks, etc... e criar um quadrado de bordas arredondadas...

 

No Photoshop use as Blending Options pra por uma sombra (Inner Shadow), não vou me ater a detalhes aqui...

 

Depois, use a ferramenta slice, crie um slice para o topo (até depois da curva da borda - abram o exemplo no photoshop pra ver) e embaixo do mesmo jeito...

 

para o meio, façam um slice de apenas 1px de altura...

 

Salve para web e dispositivos...

 

vão ter 4 imagens na pasta images, o 3º pode ser excluido pois não será usado...

 

de resto dêem uma olhada no CSS do arquivo HTML pra vcs entenderem...

 

flws...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem 6 imagens na pasta

_baixo.png

_meio.png

_topo.png

 

conteudo_baixo.png

conteudo_meio.png

conteudo_topo.png

Tente usar outros elementos, tem exeço de IDs, evite isso talvez classes seriam melhor, ou quem sabe se usar listas DT, DD e DL ;)

 

Fora isso muito bom, abração ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

ah, tem 6 imgs pq eu fiz o procedimento lah 2 vezes, pq a coluna do centro é maior...

 

as 2 do canto eu usei as msmas imgs

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.