sábado, 4 de setembro de 2010

Criando bordas semi-transparentes com CSS3 (ou CSS3 glass effect borders)

Criando bordas semi-transparentes com CSS3

O CSS3 está aí, junto com o HTML5, e mesmo que ainda não seja seguro ou mesmo viável pela disponibilidade de suporte, usar todos os recursos, existem muitos efeitos que podem ser usados a partir de agora.



O que vamos fazer aqui não é nada novo, afinal, as bordas arredondadas ou molduras estão presentes na maioria dos sites, mas a criação das mesmas ainda é feita de forma que a partir de agora é desnecessariamente complicada. O CSS3 traz um jeito clean de se alcançar estes efeitos.

Onde cai bem?
Lightboxes, overlays, mega dropdowns... elementos de destaque em geral.

A marcação
<div id="moldura">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae venenatis nisl. Nulla eu convallis ante. Nam non lectus mi. Proin porta, ante eu aliquam vestibulum, ligula sem pellentesque lectus, sit amet pulvinar dolor neque vel arcu. Duis id tellus eu purus blandit adipiscing. Phasellus malesuada rhoncus elit id semper. Curabitur mollis aliquam elit. Aenean in enim vitae massa pretium viverra vitae sit amet ipsum. Donec in lorem felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>

O estilo
* {margin:0px; padding: 0px;}
.moldura {width: 360px; border: 8px solid rgba(0,0,0,0.3); -moz-border-radius: 10px; border-radius: 10px;}
.moldura div {background-color: rgba(255,255,255,0.7); padding: 0.5em;}

Isto funciona bem para o Firefox 3.5+, Chrome, Safari e Opera. Como podemos ver as regras necessárias para criar o box e estilizá-lo são bem simples. Fazemos uso apenas de border-radius e cores rgba dos recursos do CSS3. Note que apesar de tudo, ainda temos duas divs (o que semanticamente não é tão correto assim, mas é melhor que as soluções anteriores, onde haviam 10 ou mais divs aninhadas). Isto por causa do box model. Quando usamos apenas uma div a cor de fundo da div se mescla com a cor de fundo da borda, tirando o efeito desejado.

Para o IE, o border-radius não funciona - pra variar. Antes de continuar com a seção dos poréns, vale dar uma lida no meu artigo anterior.

OK, hora das regras de fallback. Para as bordas a regra mais acessível é ligeiramente diferente de background. Para a cor de fundo vamos usar a seguinte cadeia de regras: cor sólida, imagem, cor rgba. Para bordas utilizaremos cor sólida e cor rgba. Isto porque os navegadores que suportam imagens de fundo para bordas, através da propriedade CSS3 específica border-image, via de regra aceitam cores rgba.

Então reescrevendo as regras com os fallbacks (na folha de estilo exclusiva para IE) temos:
.moldura {border: 8px solid #000;}
/* criamos uma imagem PNG de 1x1 pixel de cor branca, e com opacidade de 80% */
.moldura div {background-color: transparent; background-image: url('white_80.png');}

Até a próxima

----------- keepReading

Nenhum comentário:

Postar um comentário