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:
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:
Para os que são baseados em Webkit,como o Chrome e o Safari, necessitam do código:
Assim sendo e aplicado no código inteiro, aqui fica um exemplo:
Espero que goste e que seja útil.
Ate breve!
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!