1.12.13

Efeito swap


Atendendo um pedido nos comentários, hoje ensinarei a aplicar o efeito que uso nos gifs e em grande parte das imagens, aquele com uma bordinha interna branca que, ao passar o rato, desaparece. É um efeito mesmo muito fofo, e ensino com muito gosto, mas tenho de agradecer ao blog "Joven clube" (blog incrível, visitem» www), porque foi com ele que eu aprendi. Só retirei o blur, mas vou dar essa opção aqui para quem quiser, tal como a opção de bordas arredondadas, rotação ligeira e opacidade. Assim fica um efeito mais complexo >.<

Ah, mas embora eu tenha retirado o efeito de lá, como eu uso em imagens grandes, fiz uma ligiera alterção, então créditos para mim de qualquer maneira, tá?

Prévia:


Tutorial:

Procure por :
/b:skin
Acima da tag, cole:
.swap {
border-radius: 1px; /*é o arredondamento, remova a linha se não quiser*/
outline: solid 10px rgba(255, 255, 255, .5);
outline-offset: -10px;
-webkit-transition-duration: .60s;
}
.swap:hover {
outline: solid 0px rgba(255, 255, 255, .5);
outline-offset: 0px;
opacity: .80; /*é a transparência, remova a linha se não quiser*/
border-radius: 5px; /*é o arredondamento, remova a linha se não quiser*/
-webkit-filter: blur(1px); /*é o desfoque, remova a linha se não quiser*/
-webkit-transform: rotate(5deg);  /*é a inclinação, remova a linha se não quiser*/
-webkit-transition-duration: .60s;
}

Era isto, não se esqueçam de remover as linhas com coisas que não quiserem (eu, por exemplo, não uso blur nem rotação). Alterem os valores à vontade, mas não indico que o façam nas linhas que dizem outline...

Sempre que quiserem aplicar numa imagem, seja na postagem ou na side, escrevam:
<img src="URLDAIMAGEM" class="swap" />
Ja nee ^^

7 comentários:

  1. Obrigado, ficou muito bom o tuto... E você explicou bem.
    Esperando ansioso pelos seus próximos posts.
    Obrigado e um abraço.
    Diego|Sendo um Otaku||

    ResponderEliminar
    Respostas
    1. Douitashimashite, este nem é o meu blog principal como você sabe, mas espero postar o máximo possível ;)

      Eliminar
  2. Este comentário foi removido pelo autor.

    ResponderEliminar
  3. Olá! E depois de um longo período fora, eu voltei! E já estava ficando com raiva, pois vi este lindo blog que você abriu, mas não podia comentar, pois estava mexendo na casa de minha prima e precisava ser rápido, aí, eu só segui, pois assim eu voltava. E queria falar que o layout do blog é bem lindo! Fiquei impressionado principalmente com o gadget "Nii-san", sério, lá tá perfeito. E sobre o efeito, eu achei bem fofo! E o jeito como explicou deu para eu entender tudo! Chu ~♥

    O Perfeccionista

    ResponderEliminar
    Respostas
    1. Notei a sua falta, fico muito feliz por estar de volta e... OMG, o seu blog agora está perfeito!!! *.* Ainda bem que gostou do tudo, agora vou a correr para comentar sobre as mudanças no seu cantinho. Ja nee ^^

      Eliminar
  4. Adorei ^-^ É um efeito muito -ESPERTO- , e eu estou com duvida de como ums pequenos e simples códigos HTML podem fazer isso com várias imagens textos,etc... :o Adorei! Concerteza irei usar ;3

    ~~Visita?

    http://toolovepandas.blogspot.com.br/ || #Too♥Pandas || Novo lay,espero ter agradado *3* rsrs...Bye.

    ResponderEliminar
    Respostas
    1. Arigatou, foi bem fácil criar, na verdade :3 O lay está lindo, mas dicas da vez: side mais larga, ou imagens mais pequenas, para não saírem por fora; cabeçalho com pelo menos 1 png, e com o texto melhor combinado. Já sei, quer que eu crie um cabeçalho por você? Não me importo nada, e se quiser escrevo todo o texto que já lá está. Aceita?

      Eliminar