♦ Tutorial ~ Efeito Under


  Hey Pessoal
  É definitivo, por enquanto, a Lovelly voltou, yeahhh. Sabia que essa pandacórnio não conseguiria ficar longe do blog por muito tempo. Seja bem vinda de volta novamente Lovy. Uma pena é que a nossa postadora Gabi irá sair aqui do blog, fico triste por não ter tido tempo que conhecê-la melhor. E cadê você Mochizou?
  Essa semana eu criei alguns novos efeitos, alguns novos menus, algumas frescurinhas e outras coisinhas. Entre esses efeitos eu criei o Efeito Under, é bem simples e super usável, eu curti bastante e talvez use no próximo layout, por falar em layout criarei um tutorial de como criar um layout com tutoriais e resouces apenas que postamos aqui no C&C. Ahhh, aqui tem uma prévia do efeito, e vamos que vamos.


Vá em MODELO >> EDITAR HTML e procure por ]]></b:skin>
E cole este código em cima dele.
.bj{opacity:1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-filter: saturate(1.4); -moz-filter: saturate(1.4); -o-filter: saturate(1.4); outline-offset:-5px; outline:5px solid rgba(225,225,225,0.5);}
.bj:hover{opacity:0.3; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-filter: saturate(0); -moz-filter: saturate(0); -o-filter: saturate(0); outline-offset:-5px; outline:5px solid rgba(225,225,225,0.0);}
#jb{background:#abc; width:50px; height:50px; margin-left:8px; margin-top:8px; float:left; outline-offset:-10px; outline:5px double rgba(225,225,225,0.8);}
  Você só precisará editar o background:#abc; que é a cor que aparecerá atras da imagem, e também o width:50px; e height:50px; que é a largura e altura da sua imagem. Pronto, apenas isso.
  Onde você quiser que o efeito apareça cole este código. Mude apenas o que se pede.
<div id="jb"><a href="/" title="NOME_DO_BLOG"><img src="URL_DA_IMAGEM"  class="bj"/></a></div>
Aqui tem uma tabela de cores para você usarem. Espero que tenham curtido o feito e bye bye

8 comentários:

  1. ADOREI esse efeito *-*
    com certeza irei usar nesse próximo layout ><
    Beijos :*

    nyanko-no-sekai

    ResponderExcluir
    Respostas
    1. Olha, você usou caps, quer dizer que é sério mesmo hein.
      Obrigado, espero que use sim e me avise.

      Excluir
  2. Também sabia que ela ia voltar u.u

    Adorei o efeito! Fica legal em imagens pequenas? Talvez use em uma elite ^^

    ResponderExcluir
    Respostas
    1. Ela não consegue ficar longe de nós, somos muito importantes, rsrsrsr.
      Obrigado, fica melhor em pequenas do que em grandes. Mas coloquei as grandes no preview para ocupar mais espaço.

      Excluir
  3. Adorei o efeito! Muito lindo *--*

    - Lovely Zombies

    ResponderExcluir
  4. Lindo efeito *u*
    Adorei este blog, além de ser lindo as postagens são ótimas, seguindo já \o/
    Tem vaga nos afiliados? Eu gostaria de me afiliar se der :3

    Beijos~
    Panther Pink and Blue

    ResponderExcluir
    Respostas
    1. Obrigado, nyahhh >.<, elogios são ótimos.
      Fico contente por ter gostado do blog e pelo nosso trabalho, aceito sim tua afiliação, já já eu lhe adiciono.

      Excluir