Radial shadow background

Há algum tempo atrás precisei criar uma textura de fundo pra um site que fosse bem elaborada, com sombras nos quatro cantos e que fosse leve. Um background típico de sites em Flash. De cara percebi que se fizesse isso usando uma única imagem (um JPEG gigante) não ficaria leve o suficiente.

O resultado você confere no final. A vantagem é a de usar apenas duas pequenas imagens, um GIF e um PNG transparente (que continua transparente no IE6!), num total de apenas 2Kb (!). O GIF é a textura que se repete nos eixos X e Y (baixei do site Squidfingers.com) e o PNG com degradé circular é a sombra, criado no Photoshop, e mede só 64×64 pixels. A desvantagem, se é que podemos chamar isso de desvantagem, é o uso de dois hacks pro IE. Vou explicar todo o processo.

HTML

No código HTML tudo vai acontecer corretamente se aplicarmos uma div extra como descrito abaixo, e não é necessário que ela esteja no final do documento:

<div class="extradiv"><img src="radial.png" alt="" /></div>

CSS

O primeiro passo é definir as tags html e body com 100% de largura e altura:

html, body { width:100%; height:100%; }

A textura (GIF) vai no body. Aproveitando, defini margem, preenchimento e fonte:

body { background:url(pattern_157.gif) left top; margin:0; padding:0; font:1em Georgia, "Times New Roman", Times, serif; }

Uma div só pra centralizar o texto na página:

.wrap { width:780px; margin:0 auto; }

E essa outra pra fazer a “mágica” das sombras nos cantos:

.extradiv { position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="radial.png", sizingMethod="scale"); }

O position:fixed é importante para que o IE6 não role a sombra verticalmente, o z-index negativo a coloca por trás de tudo e o filter da Microsoft faz com que seu produto (IE) renderize corretamente o PNG, ou seja, com transparência.

O primeiro hack:

* html .extradiv { position:absolute; top:expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+0+"px": body.scrollTop+0+"px"); }

Aqui os parâmetros precedidos pelo hack estrela os tornam específicos para o IE6. O position é novamente atribuído agora com o valor absolute e é necessário, a expressão faz “colar” a sombra nas margens verticais da tela.

A imagem dentro da extradiv precisa ter 100% de largura e altura para que se adeque às dimensões da tela. E precisa do segundo hack pra não ser exibida nos IE, já que pro IE foi definido como background, evitando sobreposição:

.extradiv img { width:100%; height:100%; display:none\9; }

Note que, para os IE, a extradiv exibe a sombra por background (definido por filtro) e, pros não-IE, exibe a imagem com 100% de largura e altura.

O restante é perfumaria e, portanto, dispensa explicações:

p { font-style:italic; color:#fff; line-height:3em; text-align:justify; margin:0 0 2em 0; }
p:last-child { color:#ff9; font-style:normal; font-weight:bold; }

Um aspecto negativo desta implementação é que com páginas de maior conteúdo, a rolagem vertical fica um pouco tremida, e se agrava quanto mais fraco for o poder de processamento da máquina.

Agradecimentos especiais ao Lucas Sousa, André Amaral, Leo Ota e Henrique Pereira pelo apoio no desenvolvimento desta solução. Valeu, pessoal!