1. TugaTech » Programação, Scripts e Webmasters » Tutoriais e Dicas

Siga-nos

Realize o Login na sua conta ou Registe-se para participar.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

#1 [Dica] Codigo CSS - Arredondar bordas - em Qua 26 Jan 2011 - 10:18

DJPRMF

Administrador
avatar
Hoje trago aqui uma pequena dica de css, que permite arredondar as bordas de websites.

Este código está, por exemplo, colocado no Tugatech. Basta ver as bordas da zona dos fóruns para reparar que estão arredondadas. Apesar do efeito ser interessante, existe um navegador que não suporta o código. Sim, é o IE...
O IE ainda não foi actualizado para suportar o CSS3, ficando-se pelo CSS 1 e (por vezes) o CSS 2.
Neste navegador, as bordas não são arredondas, mas não cria mais nenhum problema, pelo que é seguro de utilizar.

Mas a maioria dos restantes browsers suportam bem o código e sem problemas.

Vamos então a parte interessante...
Para arredondar as bordas basta utilizar o seguinte CSS:
Código:
border-radius: 10px;


Esse codigo irá definir uma borda de 10px (valor que pode ser alterado conforme o gosto).

Mas devido a alguns browsers terem adaptado o código, deve colocar outros códigos adicionais.
Um desses casos é o Firefox, que necessita do código:
Código:
-moz-border-radius: 10px;


Para os que são baseados em Webkit,como o Chrome e o Safari, necessitam do código:
Código:
-webkit-border-radius: 10px;


Assim sendo e aplicado no código inteiro, aqui fica um exemplo:
Código:
colunaabc (header, main, sidebar, footer, etc)
{
-moz-border-radius: 10px;   /* para funcionar no Firefox*/
-webkit-border-radius: 10px;   /* para funcionar no Chrome ou no Safari */
border-radius: 10px;  /* É bom colocar caso haja alguma incompatibilidade no futuro */
}



Espero que goste e que seja útil.
Ate breve!



____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum




Aplicações do TugaTechAplicações TugaTechBlog TugaTechBlog do TugaTechRSS TugaTechRSS do TugaTechSpeedtest TugaTechSpeedtest TugatechHost TugaTechHost TugaTech