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 para baixo  Mensagem [Página 1 de 1]

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

DJPRMF

Administrador
DJPRMF
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!



____________________________________________

[Dica] Codigo CSS - Arredondar bordas Tugatechuserbar
[Dica] Codigo CSS - Arredondar bordas 3
[Dica] Codigo CSS - Arredondar bordas 2
TugaTech || Host TugaTech
https://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF

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

Permissões neste sub-fórum
Não podes responder a tópicos




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