Pesquisa personalizada

quarta-feira, 18 de março de 2009

Como fazer bordas arredondadas com CSS





Eu já falei que odeio o Internet Explorer? Sim, e várias vezes seja aqui ou no Twitter. Algumas funcionalidades (scripts ou hacks) simplesmente deixam de funcionar ou acabam com o lay out da página.

Um exemplo disso é a criação de bordas arredondadas sem o uso de imagens, apenas usando CSS. Browsers como o Firefox(Eu o amo!!!), Chrome e o Safari já apresentam em seus códigos o reconhecimento das especificações do CSS3, mas o Explorer, bem que mer...cadoria!!!

O meu template tinha bordas arredondadas feitas a partir de imagens. Muitas vezes o servidor dava pau e elas simplesmente desapareciam, por isso deletei por completo qualquer vestígio delas, deixando as colunas retas.

Para colocar bordas arredondadas sem imagens basta inserir no CSS de seu template uma propriedade nova chamada border-radius que define o tamanho do raio da curva:
border-radius: 10px;
Essa propriedade irá definir um raio de 10 px em cada canto da borda.

Como essa funcionalidade ainda não está totalmente implementada, os navegadores deram nomes especiais para essa propriedade. Para o Firefox, esse atributo fica assim:
-moz-border-radius: 10px;
Para aqueles que são baseados no Webkit , como o Chrome e o Safari, o atributo fica desse jeito;
-webkit-border-radius: 10px;
Dessa maneira, devemos acrescentar no CSS de cada coluna esse atributo da seguinte maneira:
coluna qualquer (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 compatibilidade no futuro */
}
Como exemplo, vocês podem ver esse atributo funcionando acima, no meu header. Legal, não? Se você estiver lendo o meu blog no IE, infelizmente não verá nada. Dançou, playboy!!!

E vou repetir de novo: Odeio o IE!

Além do mais, você pode criar bordas circulares apenas alterando as medidas em px. Tente criar uma div colocando 200px no comprimento do raio da borda, e veja o resultado que acontece.

E eu que odiava o CSS... Mas depois que comecei a decifrá-lo e entendê-lo, vi a maravilha de linguagem que é. Styles really rock, man!!!

Fontes: Maujor e Somebo



Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



15 comentários :

  1. Crazyseawolf na verdade eu achei um jeito muito mais façil de aredondar as bordas das imagens, basta ir até o RoundPic que ele arredonda qualquer imagem automaticamente (mas isso é só para imagens e não para o Blog Inteiro), então quem quizer vai la ver...

    ResponderExcluir
  2. Esqueça o Explorer. Use o Firefox, o Flock, o Safari, o Chrome. Todos eles são infinitamente melhores que o navegador do Bill.

    ResponderExcluir
  3. AndersonZ1: Mas aí a coisa vem pronta. Eu sou daqueles que gosta de mexer no código. De saber como a coisa funciona de fato. Mas é uma boa dica! :o)

    Lino: Você tem toda a razão, mas infelizmente, o navegador do tio Bill ainda tem uma fatia bem grande no mercado. Isso é o que ferra!

    ResponderExcluir
  4. Não uso o ie a muito tempo, anos pra ser sincera. Entrei numa campanha contra o maledito e além da faixa na lateral do blogue, tem uma mensagem para quem usa o famigerado. Na verdade isto tem me rendido muitas dores de cabeça. As pessoas pensam que é defeito do blogue e não enxergam que o defeito está em usar essa geringonça. Nesta campanha que aderi, até os representantes da microsoft entraram, é mole? Disseram que não aguentam mais tanta aporrinhação que o ie6 causa. Beijus

    ResponderExcluir
  5. As pessoas só usam IE por 2 motivos: Falta de informação ou preguiça.
    Como preguiçosos comigo não tem vez, a falta de informação é o calcanhar de aquiles da questão. Por isso, faço de tudo para os usuários se informarem da grande "encrenca" que é o navegador do "Biu Gaytis", assim, já digo de antemão, meu blog não abre no IE6 ou menos.

    Sei lá se é certo, mas não vou ficar esquentando por causa disso.

    E a idéia é ótima, uso imagens ainda no meu para arredondar, quem sabe mais no futuro eu mudo isso aí.

    Valeu,
    abs

    ResponderExcluir
  6. Eu postei tb sobre isso ...
    Bom.. a propriedade border radius bla bla , n pega no IE e nem no Opera

    .. para os dois a solução seria um Javascript

    ou então procurar por tags proprias de navegadores


    :P

    ResponderExcluir
  7. Rounpic eu ja conhecia.. não é muuito util pois dae teria que usar imagens.. e claro que codigos sao mais leves do que ficar carregando imagens ^~

    " As pessoas só usam IE por 2 motivos: Falta de informação ou preguiça. "

    Bom.. o IE 7 eu não gosto ! FATO !

    ma so IE 8 me agradou muito.. para quem tem um pc bom tanto faz o navegador amigo :)

    contanto que abra os sites com rapidez que ele precisa ..

    eu mesmo , estou usando Opera pois meu pc ta com uns problemas que dae n consigo mais abrir alguns sites pesadinhus como este , fikei ate sumido =D

    mas.... IE eu tb n gosto embora eu esteja achando muito divertindo fazer sites para ele

    ResponderExcluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Luma: Eu tinha visto no seu blog. O problema é que muitos ainda o usam, e para falar a verdade, se é só para acessar orkut e msn, basta. Quem está mesmo inserido nesse mundo virtual conhece o quanto o IE é uma droga.

    Fabricio: Acredito mais na falta de informação, pois a grande maioria é ignorante no uso de computadores e da internet. Um abraço!

    Gama: Bem, você tem razão quando diz que basta qualquer navegador, pois a grande maioria só usa a internet para bater papo e fazer coisas fúteis(odeio a inclusão digital).

    Não gostei do Opera, na verdade não me cativou.
    Um abraço!!!

    ResponderExcluir
  10. Ah o Opera tem umas funçõies bem maneiras :)

    e ele le algumas coisas como o IE .. dae melhora muito minhas coisas aki, tive um problema com os tres , em cada um tinha uma visão diferente , sorte que consegui resolver :)
    é a inclusão digital é foda XD

    mas se todos fosse como nozes ! ... teria mais um trilhao de blogs por awe
    :P

    ResponderExcluir
  11. Cidão!!! Você anda lendo os meus pensamentos... Estava pensando ontem mesmo se não haveria uma forma mais simples de arredondar as bordas. Criar a imagem é mais chato e fora que, nem todos abandonaram o IE. Amei!!!!

    ResponderExcluir
  12. Gama: Não sou web-designer, mas construir um site e ter que verificar em cada navegador a compatibilidade é f*#@!

    ResponderExcluir
  13. Jaqueline: No HTML 5, há muitas novidades, o ruim é que o IEca não é compatível. Eu sempre indico aos meus alunos o uso de qualquer navegador, menos o IEca, é claro.
    No sitemeter vi que mais da metade dos que visitam o meu blog vem do Firefox. Pelo menos é uma luz no fim do túnel.

    ResponderExcluir
  14. cara gostaria se vc poderia me ajudar a arredondar as bordas do meu blogger para o IE que nao consigo de jeito eh maneira tbm odeio o IE mas como a microsoft monopolizou boa parte do mundo com a instalação do windows vindo junto seu navegador muitos usuarios na internet usam o IE nao por opção e sim por patrica e facilidade de ja vir instalado no seu Computador pessoal

    Fico no aguardo meu msn: johnatanlopes@hotmail.com
    meu blog: www.nerdtagarela.blogspot.com

    ResponderExcluir
  15. Senhor Técnico: Infelizmente até agora, em nenhuma versão do IEca o HTML5 e o CSS3 irá funcionar. Dizem que a versão 9 dará suporte, o negócio é esperar para ver.
    Para fazer bordas arredondadas que apareçam no IEca, você deverá fazer com imagens feitas num editor como Photoshop ou similar, infelizmente.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.