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.

***