Como aplicar opacidade / transparência na CSS3

A opacidade ou transparência é um novo efeito no CSS3. Designers são realmente nas fases iniciais de experimentar com esse efeito. Em CSS3, a transparência é definido pela atribuição de um valor à propriedade de opacidade. Um objeto totalmente opaco obscurece completamente o que está atrás de objetos ele- que não são totalmente opaco são parcialmente transparente, ou transparente.

Definindo fundos semitransparentes para elementos de layout de página com CSS3 apresenta algumas opções interessantes para web designers. fundos semitransparentes são muitas vezes utilizados, por exemplo, em listas drop-down. Lá, os elementos do menu drop-down tem 0,5 opacidade atribuída (eles são 50 por cento transparente). Como resultado, o conteúdo da página subjacente permanece visível quando um menu cai para baixo.

A propriedade de opacidade é definida com um valor que varia de 0 (Completamente invisível) para 1 (totalmente opaco- não é transparente em tudo). Assim, por exemplo, um valor de opacidade de 0,8 faz com que um objecto opaco 80 por cento, e assim por diante.

A propriedade de opacidade não requer prefixos para diferentes navegadores. A sintaxe é simples:

opacidade: .x

A lista drop-down mostrado, por exemplo, é definida como tal:

.menu_box {background-color: # 999-padding: 2px; color: # 333333 opacidade: .5-}