exemplo de background criado com um degradé radial (circular)

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:none9; }

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!