Google
 

quarta-feira, 13 de maio de 2009

Aplicar efeito Alpha com CSS

Para quem deseja de utilizar usar um efeito alpha sem precisar gerar uma nova imagem apenas deve usar o seguinte exemplo:

Primeiro vamos adicionar a mesma imagem duas vezes em nosso HTML






Agora vamos adicionar o seguinte CSS

#img {
opacity:0.4;
filter:alpha(opacity=40);
}


Resultado é a mesma foto só que um agora tem efeito de alpha


Este metodo pode ser utilizado em varia tags como textos e até em campos de formulários.

quarta-feira, 6 de maio de 2009

Problema com layout das paginas use o CSS Hack

Para aqueles que estão tendo problemas com suas CSS por causa de dinossauros digitais que ainda usam o IE6 ou aquelas famosas incompatibilidades com os navegadores do mercado, não se preocupe a solução é usar o CSS Hack.

Muito bem ai vai a dica de como utilizar o CSS Hack.

Neste exemplo nos vamos adicionar um "_" no inicio do elemento "background-color" sendo assim no IE6 a cor de fundo ficará Vermelho e nos demais navegadores o fundo ficará azul:
div {
background-color: blue;
_background-color: red; /* IE6 */
}

Mas digamos que você queria que no IE7 fique diferente dos demais, mesmo processo só vamos mudar o caracter do inicio, vamos adicionar um "*":
div {
background-color: blue;
*background-color: red; /* IE7 */
}

Então você fica pensando e o Firefox? Agora nos faremos de outra maneira:
Firefox 3:

div, x:default {
background-color: green;
}

Firefox 2:
div, x:-moz-any-link {
background-color: brown;
}

Tá mais existe também o Opera, o que você deve fazer é muito simples, só devemos usar o seguinte método:
@media all and (min-width: 0px) {
div {
background-color: yellow;
}
}

Publicidade