Como fazer caixas sombreadas, passo 3

continuando do Passo 2

Passo 3

Para fazer com que nosso amigo IE deixe a caixa sombreada, precisaremos recorrer a tag-proprietária -ms-filter (ou filter, para algumas versões) e utilizar o filtro (também específico do IE) DXImageTransform.Microsoft.Shadow para aplicar sombreamento em cada direção (0º, 90 º, 180 º e 270º). O código é um pouco extenso, mas relativamente simples:

div.sbox {
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=90,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=270,strength=2)";
 filter: progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=90,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#d9d9d9,direction=270,strength=2);
}

Nota 1: Como o código já é específico do IE, recomendamos utilizar o teste <!--[if IE]> para escondê-lo de outros browsers (ver código fonte do passo 3).

Nota 2: Você deve ter reparado que não utilizamos o mesmo hexadecimal de cor do box-shadow (#ccc) - isso porque, por alguma estranha razão, a cor utilizada nesse filtro sempre parece um pouco mais escura no resultado final. Dessa forma acreditamos que o hexadecimal #d9d9d9 trás um resultado melhor.

Dessa forma chegamos a um resultado final onde é praticamente impossível identificar diferenças entre o IE e o Firefox:

Ver Passo 3

E é apenas isso, agora temos caixas sombreadas sem utilizar imagens. Algo que deve ter levado uns 2% das horas que os desenvolvedores da CNN utilizaram na sua solução... Tudo bem que essa solução não irá funcionar em versões mais antigas do Firefox e do Chrome, mas os usuários desses browsers costumam atualizá-los com bastante frequencia. Acredito que temos uma solução que atenda a pelo menos 95% dos browsers usados na web, e com um custo de criação e manutenção muitíssimo inferior a maioria das outras soluções do mercado.

***

Nota final: parte do Passo 3 desse tutorial foi baseado no excelente artigo "Cross-browser drop shadows using pure CSS" de Nick Dunn.

***

Como fazer caixas sombreadas, passos 1 e 2

Outro elemento bastante usado em design elaborados são caixas sombreadas. Vejamos como elas funcionam bem para complementar o design clean da CNN.com:

No entanto, os desenvolvedores da CNN parecem ter tido muito trabalho elaborando esse css. Vejamos como eles fizeram (retirado do css da CNN):

/* SECTION SHADING SPRITE CSS */

.cnn_shdsectbin .cnn_shdcaheader,
.cnn_shdsectbin .cnn_shdcafooter,
.cnn_shdmnfooter,
.cnn_shd755pxfooter,
.cnn_shd755pxheader,
.cnn_shd755px2footer,
.cnn_shd755px2header,
.cnn_shd235pxheader,
.cnn_shd235pxfooter { height:6px;overflow:hidden;background:transparent url('http://i.cdn.turner.com/cnn/.element/img/3.0/global/shade/sprite_shades.gif') 0px -81px no-repeat; }

.cnn_shdsectbin .cnn_shdcafooter { background-position:0px -124px; }

.cnn_shdmnfooter { background-position:0px -174px;clear:both; }

.cnn_shd755pxheader { background-position:0px -252px;height:7px; }
.cnn_shd755pxfooter { background-position:0px -214px;height:7px; }

.cnn_shd755px2header { background-position:0px -342px;height:7px; }
.cnn_shd755px2footer { background-position:0px -299px;height:7px; }

.cnn_shd235pxheader { background-position:0px -424px;height:7px; }
.cnn_shd235pxfooter { background-position:0px -383px;height:7px; }

Reparem como eles chamam a imagem "sprite_shades.gif" contendo diversos tipos de bordas sombreadas e a reposicionam, usando background-position de acordo com a classe e largura do box em que são utilizadas. O resultado final ficou excelente, e é melhor dar load de apenas uma imagem mesmo, por questões de performance... Mas, NOSSA, isso deve ter dado um trabalho infernal!

Felizmente, agora vou lhes ensinar o que os desenvolvedores da CNN aparentemente não sabem (ou mesmo sabendo, preferiram ignorar para justificar mais horas no projeto); Como fazer caixas sombreadas que funcionam em todos os browsers atuais (incluindo o ie6!) e sem usar nenhuma imagem, muito menos essa engenharia de background-position da CNN... Não acredita? Então vamos lá:

Passo 1

Primeiro vamos definir o html de nossa caixa:

<div class="sbox">
 <h3>Só o sombra sabe</h3>
 <p>O mal que se esconde no coração desses geeks que ficam até altas horas da noite na web.</p>
</div>

Agora vamos deixar nossa caixa mais bonitinhas usando um pouco de css:

div.sbox {
 width:482px;
 padding:8px;
 background:#fff;
 border:1px solid #999;
 font-family:georgia,arial,sans-serif;
 font-size:120%;
}
div.sbox h3 {
 padding:0 0 12px 0;
 margin:0;
 font-weight:bold;
 font-size:130%;
}
div.sbox p {
 margin:0 0 8px 0;
}

Definimos a fonte e o espaçamento, assim como uma borda em cinza claro. Nossa caixa está agora um pouco mais interessante:

Ver Passo 1

***

Passo 2

Agora vamos adicionar sombreamento a nossa caixa. Para tal vamos utilizar a tag box-shadow, própria do CSS3, assim como as tags proprietárias -moz-box-shadow e -webkit-box-shadow, que são suportadas, respectivamente, pelo Firefox e o Chrome/Safari:

div.sbox {
 width:482px;
 padding:8px;
 background:#fff;
 border:1px solid #ccc;
 font-family:georgia,arial,sans-serif;
 font-size:120%;
 box-shadow:0 0 4px #ccc;
 -moz-box-shadow:0 0 4px #ccc;
 -webkit-box-shadow:0 0 4px #ccc;
}

Isso nos trará uma caixa sobreada, algo muito valorizado por navegantes de fino trato:

Ver Passo 2

Acho que muita gente está deixando o ceticismo de lado agora... Mas ainda não venci o maior obstáculo - porque nossa caixa ainda não tem sombreado algum no IE.

A seguir, no Passo 3, usaremos alguns filtros específicos do IE para finalizar nossa epopéia e deixar os desenvolvedores da CNN um pouco envergonhados...

***

Javascript links: pop-ups acessíveis

Vocês viram como resolvemos o problema de links com evento de onlick que precisam manter a barra de rolagem do browser no mesmo lugar. Pois bem, utilizando uma solução bem parecida, podemos agora montar um link que abre uma pop-up centralizada na tela e com dimensões definidas através do window.open() do javascript, e que ainda assim permanecerá funcional - abrindo uma nova janela com target="_blank" - para quem estiver usando um browser sem javascript habilitado. Ou seja, teremos um link para abrir pop-ups perfeitamente acessível!

Vejamos como é simples. Primeiro precisamos do script com a função para abrir nossa pop-up centraliada na tela dos usuários que tem javascript habilitado:

<script type="text/javascript">
function PopUpCentralizado(nomepagina, titulopagina, w, h, scroll) {
 var winl = (screen.width - w) / 2;
 var wint = (screen.height - h) / 2;
 winprops = 'height=' + h + ', width = ' + w + ', top = ' + wint + ', left = ' + winl + ', scrollbars = ' + scroll + ', location=no, status=no';
 win = window.open(nomepagina, titulopagina, winprops);
 if (parseInt(navigator.appVersion)  >= 4) {
  win.window.focus();
 }
} 
</script>

Agora vejamos como esse tipo de link é usualmente montado em sites que não tem preocupação com acessibilidade:

<a href="http://www.google.com" onclick="javascript:PopUpCentralizado(this.href, 'pop', '800', '600', 'yes');">Link com pop-up</a>

Rapare que o script pega o atributo href da tag <a> com "this.href". Com alguns pequenos ajustes conseguimos transformar esse link em um link acessível:

<a onclick="javascript:PopUpCentralizado(this.href, 'pop', '800', '600', 'yes'); return false" href="http://www.google.com" target="_blank">Link com pop-up acessível</a>

Utilizando a mesma solução para links com onclick, invertemos a ordem dos atributos na tag <a>, de modo que o onclick venha antes do href, e inserimos o "return false" para o script parar após o evento de clique e o browser não considerar o target="_blank". Dessa forma, quando o usuário tiver javascript habilitado, abrirá a pop-up normalmente, sem uma segunda janela ser chamada. Já quando o usuário por alguma razão não dispor de javascript no browser (seja um browser antigo, um leitor de tela ou browsers de mobiles, etc.) ele continuará abrindo uma nova janela - ou seja, o link continuará funcional e, portanto, acessível.

Ver exemplo

***

Muitas vezes o esforço requerido para esse tipo de ajuste é mínimo, e como o link servirá para browsers com ou sem javascript, esse tipo de "boa prática" deveria ser encorajado em qualquer projeto web, particularmente quando focado em acessibilidade.

Javascript links: problema do "onclick" e rolagem da página

Uma das formas mais tradicionais de se inserir chamadas de javascript em um site é através do evento de "onclick" dos links (tags <a>). O motivo desse pequeno tutorial sobre o assunto é mostrar como coisas tão simples podem ser feitas de várias formas, e como nem sempre pensamos em usar a melhor forma possível.

Vamos considerar a forma mais usual de links com "onclick" que vemos por aí:

<a href="#" onclick="javascript:alert('Hello world!');">Clique aqui</a>

O que é chamado no "onclick" pode ser qualquer outra função mais complexa, não é isso que estou querendo discutir aqui. O problema está no atrubuto "href" que permanece com o valor "#". Como todos sabem isso fará com que a barra de scroll do browser retorne ao topo da página, caso estejamos clicando em um link somente após descer um pouco nosso scroll.

Isso é um problema irritante para a grande maioria dos usuários. O "problema desse problema" é que ele não impede a navegação nem causa qualquer outro grande dano a funcionalidade do site, ele apenas irrita... E hoje em dia, usuários irritados vão pensar duzentas e uma vezes em retornar ao seu site.

Agora gostaria de mostrar 3 soluções para esse problema, e depois descrever os prós e os contras de cada uma delas:

Solução 1: manter-se no mesmo lugar

Com essa solução inserimos um ID (#stay) em torno do link (também poderia ser <a name="stay"></a>) e apontamos o "href" do link para ele:

<span id="stay"><a href="#stay" onclick="javascript:alert('Hello world!');">Clique aqui</a></span>

Prós
- É a solução mais simples para um único link do tipo na página.

Contras
- Precisamos criar um ID específico para cada link, pois se dois IDs iguais aparecerem na mesma página, o link irá apontar para o primeiro deles (afora isso, obviamnete seu html não irá validar). Dessa forma não é uma boa solução para quando temos diversos links com "onclick" na mesma página.

Solução 2: usar javascript:undefined no "href"

Com essa solução inserimos no "href" um comando de javascript que na verdade não causa efeito algum:

<a href="javascript:undefined;" onclick="javascript:alert('Hello world!');" onmouseover="javascript:window.status='Este link abre um javascript'; return true" onmouseout="javascript:window.status=''; return true">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Parece ser a solução mais usada na web.

Contras
- A mensagem de status do browser vai mostrar exatamente "javascript:underfined;" ao invés de uma url usual. Para sites com público leigo, isso pode assustar potencialmente, levando a crer que existe "alguma coisa estranha ali naquele link" - isto é, se é que os usuários vão se preocupar com a mensagem de status do browser.
- No exemplo temos inclusive uma tentativa de contornar o problema com mais um pouco de javascript, a questão é que a maioria dos browsers modernos vem configurado para não considerar esse tipo de script de alteração da mensagem de status, por óbvias questões de segurança. Portanto, não parece haver solução para isso.

Solução 3: inserir o "onclick" com return false

Com essa solução informamos ao browser para parar de rodar eventos do link no o "onclick", evitando que o valor do "href" nos leve a qualquer lugar:

<a href="#" onclick="javascript:alert('Hello world!'); return false">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Na minha opnião é a melhor solução.

Contras
- Apesar de simples, não podemos esquecer de utilizar o return false.

Ver exemplos

***

É isso, espero que esse pequeno tutorial tenha lhes ajudado a resolver esse problema em específico; e também a sempre considerar que as soluções usuais e mais usadas nem sempre são as melhores soluções...

Como fazer botões, passos 5 e 6

continuando do Passo 4

Passo 5

Mesmo indo além do que o IE pode oferecer (ainda que se considerando o uso de JavaScript), ainda podemos incrementar o layout de nosso botão para usuários do Firefox e do Chrome. Esses browsers já conseguem ler o atributo de CSS3 box-shadow, ainda que utilizando tags-proprietárias (exatamente como com o border-radius). Utilizando esse atributo iremos agora aplicar um efeito de sombra ao evento de rollover de nosso botão:

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #3792b3;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
}
div.btns a:hover {
 background-color:#a14141;
 border-color:#a14141;
 box-shadow:2px 2px 4px #999;
 -moz-box-shadow:2px 2px 4px #999;
 -webkit-box-shadow:2px 2px 4px #999;
}

Em nosso evento de rollover, estamos aplicando um efeito de sombreamento ao botão na cor #999 (cinza claro). Este efeito se estende a 2px abaixo e 2px para direita do botão (valores negativos também poderiam ser usados aqui) e aplica um efeito de "blur" de 4px. Para quem costuma usar efeitos parecidos em programas como Photoshop ou Macromedia, esses parâmetros são de simples entendimento.

De fato, é quase como se estivéssemos editando o css com um programa de edição de imagens... Vejam como fica bem interessante este efeito nos browsers mais inteligentes (qualquer coisa além do IE é "mais inteligente"):

Você não deve se sentir desencorajado em usar a "degradação com beleza". Se seu cliente perguntar porque você se atraveu a ignorar o IE e aplicar sombreamento de rollover somente nesses browsers de geeks, informe-o que sites como YouTube.com (repare no rollover dos botões, como "Gostei") já fazem o mesmo. Deve ser o suficiente...

Antes do passo final, vamos chegar ao ápice do perfeccionismo nerd e utilizar um atributo exclusivo do webkit (Chrome/Safari) e que não consta sequer no CSS3, mas que é absolutamente sensacional. O -webkit-transition faz um efeito de transição entre alguma cor ou cor de fundo, transformando gradualmente a cor padrão na cor da classe de rollover. É algo que na prática é muito parecido com efeitos em flash, a diferença é que trata-se de puro CSS (embora, por enquanto, proprietário do webkit):

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #3792b3;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -webkit-transition:background-color .3s linear;
}

Estamos informando ao Chrome que a transição da cor de fundo (background-color) deve ser linear e durar 3 décimos de segundo (repare que aplicamos a tag-proprietária na classe "a", e não em "a:hover" - é assim mesmo). Não vou criar um gif animado ou vídeo apenas para te mostrar quão interessante ficou nosso rollover de botão, para ver basta abrir o link abaixo com o Chrome ou Safari:

Ver Passo 5

Embora apenas os felizardos que navegam com o Chrome possam ver esse efeito de rollover, é algo que não custa quase nada adicionar, e que não deverá deixar nenhum cliente de cabelo em pé...

***

Passo 6

Chegamos ao passo final. Nesse passo não quero adicionar mais nenhum layout ou efeito com css. Gostaria apenas de demonstrar o quão simples é editar um botão construído dessa forma.

Vamos agora mudar nosso código html para inserir um texto bem mais extenso ao nosso botão:

<div class="btns png">
    <a href="#">Cadastrar-se na promoção e concorrer a muitos prêmios</a>
</div>

Agora, em nosso css, vamos aumentar bastante o tamanho da fonte (lembre-se que isso também é um teste comum de acessibilidade) e mudar a cor de fundo do botão para verde:

div.btns a {
 font-size:26px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#6c9441 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #6c9441;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -webkit-transition:background-color .3s linear;
}

Pronto, em alguns segundos, temos um botão comum de pesquisa transformado em um gigantesco botão de cadastro para a última promoção de noso site (certamente o pessoal de marketing pensaria num título melhor para esse botão):

Acredito que para a imensa maioria dos portais de conteúdo, esse método se mostrará muito mais prático e elegante do que contratar um designer exclusivo para produzir milhares de botões diferentes. Tudo bem que isso pode tirar o emprego do designer, mas acredito que se ele ler este tutorial, nem irá se importar :)

Ver Passo 6

***

Nota final: parte desse tutorial foi diretamente inspirada no capítulo 2 do excelente livro de Dan Cederholm: "Hancrafted CSS".

***

Como fazer botões, passos 3 e 4

continuando do Passo 2

Passo 3

Temos inúmeros scripts na web para tratar de imagens PNG no IE6, para nosso exemplo entretando optei pela solução de Drew Diller, chamada "DD_belatedPNG".

Inicialmente precisaremos adicionar uma classe (".png") em nosso html:

<div class="btns png">
    <a href="#">Pesquisar</a>
</div>

Com essa classe lá, bastará chamarmos o arquivo .js de nosso amigo Drew Diller (você pode baixá-lo aqui) e declararmos que em tags com a classe .png, ou em links dentro dessas tags, o script deverá rodar. Para termos certeza de que isso só será chamado no IE6, envolveremos o código com o famoso teste "if IE" dentro de comentários (porque será que a Microsoft pensou nisso?):

<!--[if IE 6]>
<script type="text/javascript" src="../pngfix.ie6.min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png, .png a');</script>
<![endif]-->

Isso pode entrar em qualquer parte do código, mas é melhor que entre junto com os outros scripts dentro da tag <head>.

Bem, se tudo correu bem, bastará cruzar os dedos e abrir nosso botão no IE6...

Além disso, vamos aproveitar e adicionar bordas arredondadas ao nosso botão! Isso mesmo, hoje em dia isso pode ser feito somente por CSS, embora tenhamos de usar algumas tags-proprietárias de cada browser. Vamos ao CSS adicional:

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
 border:1px solid #3792b3;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
}
div.btns a:hover {
 background-color:#a14141;
 border-color:#a14141;
}

Reparem que aplicamos uma borda ao botão, borda esta que muda de cor no rollover; Além disso, aplicamos 8px de borda arredondada ao botão com 3 declarações diferentes: border-radius é o padrão do CSS3, mas este ainda não foi implementado por quase nenhum browser...

Felizmente, porém, tanto o Firefox quanto o Chrome (e o Safari, no qual é baseado) tem tags-proprietárias que realizam o mesmo efeito: -moz-border-radius (Firefox) e -webkit-border-radius (Chrome/Safari). Tenha em mente que usando essas tags proprietárias intencionalmente, seu css não passará por validadores sem erros, mas acredito que esse seja um pequeníssimo preço a pagar.

Agora teremos um botão bem mais interessante:

Ver Passo 3

Isto é, exceto no IE (é claro)... O que nos leva a uma outra solução com JavaScript no Passo 4...

***

Passo 4

Você devia estar achando que esse tutorial estava interessante, mas que como vários outros tutoriais interessantes de css, esbarraria no famigerado IE, e portanto não poderia ainda ser utiliado em seus projetos web. Afinal, como vimos, mesmo o Twitter deixa seu visual "quadrado" para os usuários de IE.

Isso é chamado de "degradação com beleza", uma forma esforçada de tentar definir o conceito corrente de que, se um design não pode parecer igual em todos os browsers, que ao menos façamos com que nos browsers com menor capacidade (leia-se: IE) ele ainda fique o mais interessante possível.

Tudo isso é muito bonito e revigorante, mas não servirá de nada se o seu cliente simplesmente exigir que o IE mostre os malditos botões com bordas arredondadas!

Bem, felizmente nosso querido amigo Drew Diller também solucionou esse problema com míseros 9kb de JavaScript. Sua solução foi entitulada "DD_roundies" (os programadores geralmente são bem melhores com programação, se comparado a criatividade para nomes e títulos).

Para fazer as bordas funcionarem no IE bastará chamar o arquivo .js de Drew Diller em nosso código (você pode baixá-lo aqui):

<!-- faz border-radius funcionar no IE, depois ajusta CSS no IE8 -->
<script type="text/javascript" src="js/ie.border.radius.min.js"></script>
<script type="text/javascript">
    //uso: DD_roundies.addRule('.sua-classe', #); onde # = border-radius
 DD_roundies.addRule('div.btns a', 8);
</script>
<!--[if IE 8]>
<style type="text/css" media="screen">
div.btns a {border:0;background-image:url(img/bt_bg.png) !important;padding-bottom:7px;}
</style>
<![endif]-->

Conforme consta nos comentários (é sempre bom comentar quando usamos código "fora do escopo tradicional"), estamos aplicando 8px de border-radius nos links (tags <a>) dentro de um <div class="btns">.

Como a Microsoft se esforça para infernizar nossa vida, devo adiantar que apenas no IE8 econtraremos um problema caso utilizemos bordas em nosso botão. Por isso utilizamos um teste condicional dentro de comentários para corrigir o problema apenas no IE8... Não me pergunte porque, mas mesmo com border:0; o botão continua tendo bordas. Bem, talvez o script de nosso amigo Drew Diller não seja infalível, mas já foi de grande ajuda até aqui!

O layout de nosso botão não mudou em nada, mas agora ele aparecerá com bordas arredondadas mesmo no IE. Pronto, pense nas possibilidades!

Ver Passo 4

***

A seguir, no Passo 5, aplicaremos mais alguns efeitos decorativos. Infelizmente desta vez não há nada que poderemos fazer quanto ao IE...

***

Como fazer botões, passos 1 e 2

Um dos elementos mais usados no design para web são os botões. Até pouco tempo atrás botões mais elaborados eram criados diretamente pelo designer no photoshop ou programa similar, e já trazia o texto "embutido" na imagem. Algo como:

No entanto, hoje em dia já é possível criar botões com design elaborado, efeitos de rollover e bordas arredondadas apenas com CSS (e algum script para o IE, mas veremos isso em breve). Você pode achar que o botão "Join Today" (junte-se hoje) da home do Twitter.com é uma imagem - senão com texto "embutido", no mínimo com imagens de fundo com bordas arredondadas:

Mas não! Trata-se de um botão criado apenas com CSS, a única imagem existente é um PNG com alguma transparência que dá o efeito de degradê no fundo. Porém, esse tipo de formato de construção de botões permite que editemos o texto, as cores de fundo e até mesmo a curvatura das bordas facilmente - apenas editando CSS. Além disso, acaso o usuário aumente a fonte, o botão irá se ajustar automaticamente (ponto para acessibilidade).

Caso você já tenha testado a home do Twitter em vários browsers, deve ter percebido que no IE não temos bordas arredondadas pela página - incluindo o bortão de que falei... No entanto, com um pouco de JavaScript é possível deixar tudo arredendado mesmo no IE... Vamos ver como se faz.

Passo 1

Primeiro vamos definir o html de nosso botão (no caso, um exemplo comum, o botão de "Pesquisar"):

<div class="btns">
    <a href="#">Pesquisar</a>
</div>

Agora vamos definir o estilo básico inicial usando um pouco de css:

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3;
 text-decoration:none;
}
div.btns a:hover {
 background-color:#a14141;
}

Definimos a fonte e o espaçamento, assim como a cor de fundo (azul) e o efeito de rollover, que muda a cor de fundo para vermelho. Nosso botão deverá ser algo simples por agora:

Ver Passo 1

***

Passo 2

Agora vamos adicionar uma imagem de fundo ao botão, para dar um efeito interessante ao fundo. Essa imagem é um PNG simples com 50x200 pixels, onde na metade superior temos um box com fundo branco e transparência em 15%. Isso permite que o efeito seja aplicado sobre a cor de fundo já defunida no CSS - e dessa forma acaso mudemos a cor de fundo (como no rollover) o efeito irá permanecer, sem que tenhamos de criar múltiplas imagens para o mesmo botão. Veja abaixo uma imagem dessa imagem PNG sendo criada no Fireworks:

Com a imagem criada, devemos atualizar nosso CSS (repare que alinhamos ela a esquerda e ao centro vertical [0 50%], e a fizemos se repetir indefinidamente no eixo horizontal [repeat-x]):

div.btns a {
 font-size:12px;
 font-family:helvetica,arial,sans-serif;
 font-weight:bold;
 letter-spacing:1px;
 padding:5px 12px;
 color:#fff;
 background:#3792b3 url(img/bt_bg.png) repeat-x 0 50%;
 text-decoration:none;
}

Isso nos trará um botão mais interessante:

Ver Passo 2

***

Porém, como muitos devem saber, imagens PNG com transparência não "se comportam muito bem" no IE6 e inferiores...

A seguir, no Passo 3, usaremos um pouco de JavaScript para corrigir a rebeldia de nosso querido IE6...

***