28 de dez. de 2012

Efeitos em imagens


Oi Oi pessoas!!
Hoje eu vou postar alguns efeitos para elite de afiliados ou para os posts.
Eu tirei a base no blog Vodca e Coca. Veja uma demonstração dos efeitos.
 Coloque os código acima da tag /b:skin. Para usar na elite você deve acrescentar a class="Nome da class" depois do link da imagem. (Class é a palavra depois do ponto (.). Exemplo: .elite, class="elite".

Efeito 1 - Borda e opacidade 
Na elite de afiliados: 
.efeito1 {
width: 50px;
height: 50px;
-webkit-transition: 0.5s;
opacity: 0.6;
text-align: center;
-webkit-border-radius: 25px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.efeito1:hover {
text-align: center;
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 0px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}
Nas imagens do post:
.post img {
-webkit-transition: 0.5s;
opacity: 0.6; 
-webkit-border-radius: 25px;
-webkit-box-shadow: 0 0 .8em #000000; 
}
.post img:hover {
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 0px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}

 Efeito 2 - Borda e opacidade quando passa o mouse
Na elite de afiliados:
.efeito2 {
-webkit-transition: 0.5s;
opacity: 0.6;
text-align: center;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.efeito2:hover {
text-align: center;
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 25px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}
Nas imagens do post:
 .post img {
-webkit-transition: 0.5s;
opacity: 0.6;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.post img:hover {
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 25px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}
Efeito 3 - Opacidade 
Na elite de afiliados:
.efeito3 {
width: 50px;
height: 50px;
-webkit-transition: 0.5s;
opacity: 0.6;
}
.efeito3:hover {
opacity: 1.0;
}
Nas imagens do post:

.post img {
-webkit-transition: 0.5s;
opacity: 0.6;
}
.post img:hover {
opacity: 1.0;
}
Efeito 4 - Opacidade e borda arredondada
Na elite de afiliados:
.efeito4 {
width: 50px;
height: 50px;
opacity: 0.6;
-webkit-transition: 0.9s;
text-align: center;
}
.efeito4:hover {
opacity: 1.0;
border-radius: 35px;
}
Nas imagens do post:
 .post img {
opacity: 0.6;
-webkit-transition: 0.9s;
text-align: center;
}
.post img:hover {
opacity: 1.0;
border-radius: 35px;
}

 Efeito 5 - Opacidade e borda
Na elite de afiliados:
.efeito5 {
border: 5px solid #AE18F2;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
}
.efeito5:hover {
opacity: 1.0;
border: 5px solid #666666;
}
Nas imagens do post:

.post img {
border: 5px solid #AE18F2;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
}
.post img:hover {
opacity: 1.0;
border: 5px solid #666666;
}
Efeito 6 - Borda na imagem
Na elite de afiliados

.efeito6 {
padding: 5px;
background: #FDC3F8;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #d6d6d6;
opacity: 1.0;
-webkit-transition: 0.5s;
}
.efeito6:hover {
padding:5px;
background: #997D94;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #f2c5f0;
border-left: 1px solid #f2c5f0;
border-right: 1px solid #f2c5f0;
border-bottom: 1px solid #be98cc;
opacity: 0.6;
}
 Nas imagens do post:
 .post img {
padding: 5px;
background: #FDC3F8;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #d6d6d6;
opacity: 1.0;
-webkit-transition: 0.5s;
}
.post img:hover {
padding:5px;
background: #997D94;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #f2c5f0;
border-left: 1px solid #f2c5f0;
border-right: 1px solid #f2c5f0;
border-bottom: 1px solid #be98cc;
opacity: 0.6;
}
Só pra lembrar gente, não adicione todos os efeitos, quanto mais código HTML seu blog tem, mais pesado ele fica, e quanto mais pesado, menos visitas. Nem todo mundo tem internet boa. Espero que tenham gostado, e não se esqueçam de ver a demonstração;





Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

3 comentários:

  1. - Amei, parabéns!
    *
    Créditos a minha mensagem ->
    *
    http://sheikstylish.blogspot.com.br
    *
    kk' bjus2. :)

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!