Efeitos nas imagens do blog

Oiii cerejinhas! O tutorial aqui é básico, serve apenas para dar um aspecto mais profissional ao seu blog. Irei passar o código de três efeitos lindos que irão funcionar em todas as imagens dos posts de seu blog, ou em um Gadget específico. É o primeiro tutorial que faço aqui no blog, então, espero que usem e que seja bem útil kkkkk. Veja uma prévia dos efeitos aqui. Confira o tutorial:


Primeiramente, para usar em todas as imagens do post, vá em Tema> Editar HTML>Dê um CTRL + F e pesquise por ]]></b:skin> ,e adicione um dos códigos logo acima:

Efeito Preto e Branco com efeito de borda pontilhada dupla: (esse é o efeito mais gracinha na minha opinião <3)

.post img {
outline-offset: -5px;
outline: 1px dashed #fff;
Border: 1px dashed #000000;
opacity: 6.6;
-moz-opacity:0.70;
-webkit-transition: 8.5s;
-webkit-transition-duration: .40s;
}
.post img:hover {
outline-offset: -10px;
outline: 1px solid #d976a3;
Border: 3px outset #000000;
opacity: 1.0;
-webkit-filter: saturate(0%);
}

Efeito Desfoque:

.post img {
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.post img:hover {
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(4px); color:#fff;
}

Efeito Sépia com efeito de borda sólida:

efeito sépia:
.post img {
-webkit-filter: sepia(0%);
transition:All 4.1s ease;
outline-offset: -5px;
outline: 1px solid #ffffff
}
.post img:hover {
-webkit-filter: sepia(100%);
transition:All 1s ease;
outline-offset: -50px;
outline: 1px solid #ffffff;

Agora para usar em um Gadget específico, pesquise no HTML ]]></b:skin> e cole logo acima:

Efeito Preto e Branco com efeito de borda pontilhada dupla:

.preto{
outline-offset: -5px;
outline: 1px dashed #fff;
Border: 1px dashed #000000;
opacity: 6.6;
-moz-opacity:0.70;
-webkit-transition: 8.5s;
-webkit-transition-duration: .40s;
}
.preto:hover {
outline-offset: -10px;
outline: 1px solid #d976a3;
Border: 3px outset #000000;
opacity: 1.0;
-webkit-filter: saturate(0%);
}

Para usar, adicione o código: <a><img src="URL DA IMAGEM" class="preto"/></a> a um Gadget.

Efeito Desfoque:

.foco {
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.foco:hover {
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(4px); color:#fff;
}

 Para usar, adicione o código: <a><img src="URL DA IMAGEM" class="foco"/></a> a um Gadget.

Efeito Sépia com efeito de borda sólida:

.sepian{
-webkit-filter: sepia(0%);
transition:All 4.1s ease;
outline-offset: -5px;
outline: 1px solid #ffffff
}
.sepian:hover {
-webkit-filter: sepia(100%);
transition:All 1s ease;
outline-offset: -50px;
outline: 1px solid #ffffff;
}

Para usar, adicione o código: <a><img src="URL DA IMAGEM" class="sepian"/></a> a um Gadget.

Bem básicos, mas muito fofos <3 Se usarem, não esqueçam de creditar e comentar aqui em baixo que pegou, amores. O que acharam dos efeitos? Não sou muito boa em CSS, mas irei tentar trazer o máximo o possível esse tipo de conteúdo, já que acho muito interessante. Beijos e até o próximo post <3.

PROIBIDO reblogar.