<
Menu

Tableless


feature6

Grids semânticos com LESS

preprocessadores-css

CSS on steroids

Untitled-1

Locaweb Style – Como iniciamos

admin-wordpress

Personalizando o painel de administração do WordPress


CSS3 com PIE – bordas, sombras e gradiente

Utilizar CSS3 no front-end de websites ainda parece uma realidade um pouco distante devido a incompatibilidade de renderização entre os browsers, mas com o lançamento final dos navegadores IE9 e Firefox 4, esta realidade fica ainda mais próxima da prática efetiva que vai criar a nova etapa do desenvolvimento tableless.

Apesar das incompatibilidades entre browsers, utilizar as novas ou modificadas propriedades em folhas de estilo na versão 3 virou motivo de testes e de implementação das modificações que tanto almejamos no desenvolvimento web. Junto como HTML 5, o uso de CSS3 resultará em facilidades na criação de estruturas semânticas e válidas bem como melhor planejadas visualmente e com velocidade de carregamento reduzida, mas enquanto ainda não o colocamos em prática com HTML5, neste processo de transição em que nos encontramos já podemos utilizar algumas propriedades de CSS3 com os navegadores de mercado, ainda que com o uso de scripts externos para tanto.
Abaixo um breve tutorial de como criar boxes com degradês, sombras e bordas arredondadas, apenas utilizando propriedades de css.

CSS3 PIE

Aplicar propriedades CSS3 é bastante simples e nenhum segredo para desenvolvedores experientes, porém fazer com que estes atributos sejam aplicados aos novos e aos atuais browsers de mercado pode representar uma tarefa um pouco mais trabalhosa.

O browser IE (sempre ele) é um dos responsáveis por esse trabalho. Nas versões 7 e 8, não interpreta as propriedades que vamos demonstrar em nosso tutorial, desta forma, a renderização deverá acontecer através do uso de javascript (neste caso PIE) e mesmo que você não tenha familiaridade com a linguagem, não se preocupe, pois a aplicação deste é simples e baseada apenas na hospedagem de alguns arquivo no servidor e a chamada destes na classe ou ID correspondente no css.

Para iniciar, clique aqui e baixe os arquivos CSS3 PIE.

Após, descompacte os arquivos e os hospede no diretório raiz de seu site (seja online ou local) e pronto! Já podemos começar a utilizar bordas arredondadas, gradientes e sombras no IE 7 e 8.

Firefox, Chrome, Safari e Opera.

Todos os browsers acima citados, em suas versões de mercado, renderizam as propriedades que vamos aplicar neste tutorial, porém o Opera 10 não identifica o atributo que cria gradientes de background e desta forma, utilizaremos valores diferenciados para esta exceção.

Bordas arredondadas

Para inserirmos bordas arredondadas utilizando CSS3, basta inserirmos a propriedade border-radius e atribuir um valor para tanto, porém devido as diferenças entre browsers e considerando que suas versões de mercado ainda não suportam completamente o parâmetros, distribuimos esta declaração para cada navegador.

Como utilizar a propriedade?
border-radius – declaração integral para todas as bordas do box

Na prática:
[cc lang="css" line="1"].boxBorda{
border-radius: 15px; /* Implementação W3C */
-moz-border-radius: 15px /* Implementação Mozilla */
-webkit-border-radius: 15px; /* Implementação para browsers que renderizam via webkit */
behavior: url(PIE.htc); /* Comportamento adicionado para renderização das propriedades acima no IE 7 e IE 8 */
}[/cc]

E pronto! A borda arrendonda dos elementos será renderizada.
Outras possibilidades de valores ainda são permitidas, por exemplo quando pretendemos atribuir um valor diferenciado entre a distância do centro do círculo imaginário ao topo ou à lateral.

Como utilizar a propriedade?
border-[top/bottom]-[left/right]-radius – declaração segmentada para cada uma das bordas do box

Na prática:
[cc lang="css" line="1"].boxBorda{
border-top-left-radius: 15px 20px; /* Implementação W3C */
-moz-border-radius-topleft: 15px 20px; /* Implementação Mozilla */
-webkit-border-top-left-radius: 15px 20px; /* Implementação para browsers que renderizam via webkit */
behavior: url(PIE.htc); /* Comportamento adicionado para renderização das propriedades acima no IE 7 e IE 8 */
}[/cc]

Sombras

A propriedade que define sombra à um box, no CSS3, pode criar diversas possibilidades visuais desde que os atributos sejam declarados. Na totalidade da propriedade, o que podemos declarar é:

Como utilizar a propriedade?
box-shadow: [inset (declaração opcional e referente a shadow interna), posição X, posição Y, blur, largura, cor ]

Abaixo, as declarações para nosso exemplo:

[cc lang="css" line="1"].boxSombra{
box-shadow: 0 0 .25em #CCC; /* Implementação W3C */
-moz-box-shadow: 0 0 .25em #CCC; /* Implementação Mozilla */
-webkit-box-shadow: 0 0 .25em #CCC; /* Implementação para browsers que renderizam via webkit */
behavior: url(PIE.htc); /* Comportamento adicionado para renderização das propriedades acima no IE 7 e IE 8 */
}[/cc]

Background: linear-gradient ou radial-gradient
Para definir um degradê de fundo à um box utilizando CSS3, basta inserir a propriedade background: linear-gradient ou radial-gradient e declarar os devidos valores, porém esta propriedade ainda pode ser renderizada de forma diferente entre os browsers, inclusive nas porcentagens que saem de uma cor migrando para outra. De qualquer forma, dependendo do resultado que você pretende obter em tela é perfeitamente aplicável.

Como utilizar a propriedade?
background: linear-gradient{posição, cor (from), cor(to) porcentagem};

Segue o exemplo:
[cc lang="css" line="1"].boxGradiente{
background: linear-gradient(#EEF, #FFF 70%); /* Implementação W3C */
background: -moz-linear-gradient(#EEF, #FFF 70%); /* Implementação Mozilla */
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));/* Implementação para browsers que renderizam via webkit */
-pie-background: linear-gradient(#EEF, #FFF 70%); Propriedade adicionada para renderização das propriedades acima no IE 7 e IE 8 */
background: url (image.png) repeat-x 0px 0px; /* Background com imagem para degradê para o Opera 10 */
}[/cc]

Leia mais sobre gradientes em css, clicando aqui.

Veja um exemplo, clicando aqui. E baixe o código pelo nosso GitHub aqui.

Até a próxima.

;)

Por Thaiana Poplade

Web Designer & Front-End Developer entusiasta de UX e comunicação online, viciada em filmes, música para os ouvidos e conversa fiada ;). @thaipoplade

http://about.me/thaianapoplade

Mais posts do autor

Comentários (34)

  • Douglas Faria

    Muito bacana!

  • http://www.williancosta.com.br Willian

    Até então tinha problemas com gradiente no IE9. Não sabia que precisava usar imagens pra funcionar no opera 10.

  • Julio Vedovatto

    Legal o artigo, uma abordagem bem sucinta no assunto.

    Mas faltou a seguinte consideração: o PIE não faz milagres, não dá pra fazer borda arredondada com qualquer coisa. Um dos grandes problemas é fazer borda arredondada com BG em hover. Fica a dica.

  • Mayza

    Conheci o PIE CSS3 a pouco tempo e estou gostando muito de utilizá-lo.
    Apesar dos probleminhas com z-index que geralmente acontecem mas que são super fáceis de resolver, o PIE CSS3 facilita muito a vida do desenvolvedor.
    Ótimo artigo Thaiana, parabéns.

  • http://luizz.com.br Luizz

    É muito bom, uso faz um tempinho, mas tive problema com borda arrendondada em table “somente no IE”.

  • http://camisa13.com.br/ Vinícius Siller

    Valeu pela dica Thaina. Estou fazendo uma nova versão do meu blog, e ele terá várias seções com bordas e sombras. Esse artigo foi uma luva. :)

  • http://tcelestino.com.br Tiago Celestino

    Além de quer é melhor utilizar o CSS3 Pie com um framework javascript (jQuery, por exemplo) do que usar usando o “behavior” no CSS.

  • Mario Rinaldi

    Um detalhe, é que o firefox 4.0 já utiliza a implementação do box-shadow e border-radius, ou seja, não precisa utilizar o prefixo -moz

  • Julio Vedovatto

    Mais alguns detalhes pros desavisados: sempre apele pra “zoom: 1″, “position: relative;” e “z-index” > 0 nos elementos que querem usar o PIE.htc #fikdik

    No meu caso eu crio uma classe numa folha de estilo que só é atividade em navegadores IE < 9. Exempo:

    .rouded-coners {
    position: relative;
    z-index: 1;
    zoom: 1;
    }

  • charles lins

    No meu caso, quando implemento a solução, o elemento some.

    Outra dúvida: os arquivos necessitam estar na raiz, não sendo possível linkar de uma pasta (PIE)?

  • http://www.twitter.com/andre_amaral andré amaral

    Eu experimentei o PIE e cheguei a conclusão que não resolve o problema completamente.

    Ou seja, você vai precisar fazer gambiarras para usar o PIE.

  • http://tutsmais.com.br/blog ofelquis

    simplesmente fodastica esse mulher, parabéns isso me ajudou por uma vida toda.

  • Thiago

    Esse tutorial foi show de bola !!!

  • Luís Henrique

    Eu vejo esse PIE com maus olhos. Conheço-o faz um tempo, mas penso eu que a linguagem javascript tem outras finalidades, ainda mais se levarmos em conta que CSS3 já faz isso. No IE não funciona? Beleza, mas até onde é necessário colocar uma sombra ou uma borda arredondada que seja por javascript par ao usuário desse navegador? Aliás, quem disse que os sites têm que ser iguais em todos os navegadores?

    E peço novamente para que não retirem meu comentário e que possamos falar desse assunto por aqui também, acho importante.

    Obrigado!

  • Luís Henrique

    Eu vejo esse PIE com maus olhos. Conheço-o faz um tempo, mas penso eu que a linguagem javascript tem outras finalidades, ainda mais se levarmos em conta que CSS3 já faz isso. No IE não funciona? Beleza, mas até onde é necessário colocar uma sombra ou uma borda arredondada que seja por javascript par ao usuário desse navegador? Aliás, quem disse que os sites têm que ser iguais em todos os navegadores?

  • http://pponto.com Paula Faria

    Quase sempre que uso o PIE para bordas, o background some no ie8 e a borda nao funciona no ie7. Ainda não descobri um motivo para isso acontecer, alguma ideia?

    =)

  • http://carosamigos.wordpress.com João Marcos Santos Teixeira

    Só temos que ficar ligados no endereço do arquivo .htc, dependendo da estrutura das pastas, uso endereço absoluto ou faço um pequena chamada de css no header da pagina (como no exemplo) contendo apenas o .htc, ai ele nao perde o caminho e funciona lindo.

    #fikdica

  • Fabio

    no IE 9 64bits não funcionou para background linear-grandiente, nem com -pie-background: linear-gradient(#FFFFFF, #FFFF99 70%);… já para border e shadows sim, tudo ok!

    Alguma dica para resolver o problema galera?

  • Alan Silva de Albuquerque

    Obrigado e valeu pela dica thaiana, foi de muita valia saber disso.

  • estenio

    copiei o arquivo coloquei na raiz tudo certinho ai não aparece nada no ie7, e 8 e no nove só aparece a sombra, ja com o link do ar aparece direitinho no 7 e no 8 mas no 9 não vai entender huahuhauhaua

  • http://@GuedesMarra Wallison

    Muito bom, me ajudou bastante!

  • Marcelo Rios

    Galera, estou vendo muito gente se queixando de problemas ligados a position e z-index. Porém, usei o PIE em um site que acabei de fazer e não tive nenhum desses problemas (www.terradetodosnos.com.br/vidamelhor).

    Quanto à observaçãodo Luis Henrique, concordo: nem todos os sites têm de parecer iguais em todos os navegadores. Porém, trabalhamos para o cliente e, infelizmente, nem todos os clientes compram essa filosofia de trabalho (principalmente quando há questões ligadas à unidade visual entre produtos de uma mesma plataforma, como é o caso de clientes governamentais).

    Ainda sobre o PIE, o problema da url relativa é facilmente resolvido usando uma url absoluta. Assim, esteja onde estiver o arquivo carregado, o PIE será carregado.
    ;)

    Ficaria grato em ler considerações acerca do position e do z-index, bem como o zoom, que não se fizeram necessários nesse projeto, caso eu não tenha vivido uma experiência que outros tenham e que tenha feito necessário o uso destes dispositivos.

    Ah, só mais uma coisa: sobre o problema com o :hover, basta implementar a propriedade no elemento em seu estado normal. Deixa apenas para mudar a cor no :hover.
    ;)

  • Pingback: Em tempo de transição, quais recursos utilizar? | Tableless

  • Giovanna Appel

    Estou fazendo um site, e meu professor comentou que teria que declarar uma frase para utilizar o CSS3, nesse caso ele comentou do CSS Pie, e gostaria de saber qual é essa declaração.

    Obrigada

  • http://www.fordev.com.br Rogério

    Aqui na empresa, já trabalhamos com esse recurso a algum tempo, e falo para vocês, é impressionante o que podemos fazer, é realmente uma mão na roda…

  • Icaro Olegário

    Dura realidade da falta de compatibilidade!

  • Camilo Bracarense

    PIE salvador. Utilizo e recomendo.

  • http://twitter.com/jardel_xavier Jardel Xavier

    Muito bom! Ótimo artigo parabéns e obrigado, espero que em breve seja compatível com todos os navegadores (sonho meu).

  • Luciana Mendes

    To sem palavras!! SIMPLESMENTE ESPETACULAR!!!!!!!!

  • Pechas

    Geeeeeente isso é mágica, eu desprezava tanto o coitado do Explorer asuhaushasuasha VALEU VEEEEEEEEEEEEEEEEEEEEEEEY

  • http://www.icosites.com.br/ Paulo Alexandre

    Muito bacana, me ajudou muito!

  • zullcore

    Quem usará isso com sprite, BUG total no IE!

  • Isabel

    nosaaa q showww dessa eu nao sabia!!!!! achoq todo mundo deveria usar isso

  • Felipe Viana de Almeida

    Muito bom.. funcionou perfeitamente no meu IE8… Obrigado..