Bíblia no Computador

19 outubro 2010

Opacidade das Imagens no Post


As imagens fornecidas entradas para ser exibido em vários estilos, às vezes, remover uma vantagem que não é do nosso agrado, outros preferem mudar isso, porque nós vimos que nós gostávamos e na maioria das vezes, porque vemos sempre os mesmos pneus.
Blogger templates no estilo de imagens que vamos encontrar as entradas da seguinte forma:


.post img {
padding:4px;
border:1px solid $bordercolor;
}

Também podemos encontrar assim:

.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}

Opacidade das imagens

Qualquer um deles é o lugar que vai nos permitir dar um aspecto diferente às imagens.
Algum tempo atrás vimos como adicionar vários tipos de borda, que também acrescentou efeito hover na borda.

O efeito hover nos permite mudar o visual de um item quando colocamos o ponteiro do mouse sobre o item neste caso é sobre as imagens, para obter esse efeito, precisamos adicionar algumas propriedades para o evento hover e vamos adicionar a propriedade de opacidade.

.post img {
background:#333;
border:1px solid #333;
padding:4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #fff;
-webkit-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
opacity:0.6; 
}
.post img:hover{
opacity: 1;
}
Related Posts Plugin for WordPress, Blogger...

TV Novo Tempo em Campo Grande

TV Novo Tempo em Campo Grande
Canal 41