16/08/2013

Efeito Mod


Boa tarde minna-san, passeando pelo R.O achei um efeito super simples, ele deixa as imagens em preto e branco com bordas internas. Ele se chama Mod achei muito lindo e acho que vou usar no meu próximo layout, não sei bem. Venho dizer que vou abrir uma nova Tag aqui no blog, de divulgação de blogs, assim que estiver pronto irei avisa-los. Mas vamos ao tutorial?


1. Vá ate seu HTML, utilizando o atalho procure por  ]]>,  assim que o achar acima cole:

Códigos
.mod {-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;-webkit-filter:grayscale(100%);outline-offset: -5px;outline: 1px solid #caa29a; /*Cor da linhazinha*/}mod:hover {-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;-webkit-filter:grayscale(0%);outline-offset: -2px;outline: 1px solid #caa29a; /*Cor da linhazinha*/}

2. Salve e vá ate seu Layout adicionando um Gadget html/javascript e nele cole: 

Códigos
<a href="LINKDOBLOG" title="Nome aqui" ><img src="LINKDAIMAGEM" class="mod" /></a>


Arrume as parte indicadas e prontinho, se quiser adicionar mais é só repetir o código. Créditos pelo tutorial: R.O Kiss

35 comentários:

  1. Que lindo esse efeito :3
    Opa, divulgação de blogs? Que top, não perderei por nada ;)
    Kiss
    With You

    ResponderExcluir
  2. Anônimo16/8/13

    Queee lindooo <3

    - HTML Secret

    ResponderExcluir
  3. Awnt, eu acho tão fofas essas frases na ilustração *3*
    eu não entendi o efeito mod o.O

    Kawaii Land

    ResponderExcluir
    Respostas
    1. Obrigada <3
      O efeito é simples, deixa a imagem preta e branca com uma bordinha por dentro, mesmo a imagem sendo colorida.

      Excluir
    2. ahh, que fofo, acho que talvez eu use >3<

      Excluir
  4. Que fofo esses efeito Wendy.

    ResponderExcluir
  5. Anônimo16/8/13

    ooii wendy!!! eu por aqui de novo rsrsrsrsrs eh pq eu amoo visitar seu blog hihihi... mt legal esse efeito.. eu queria te pedir um tutorial se não for muito incomodo... sabe aqueles efeitos nas imagens quando passamos o mouse? eh isso o tuto que eu qro pedir.. tipo a imagem fica com um efeito esbranquiçado mas qnd passa o mouse ela fica da cor normal q a imagem é... será que poderia fzr esse tuto??
    desde já agradeço!! bjnhss wendy!!!

    ResponderExcluir
    Respostas
    1. Eu que fico grata *-----* Bom acho que entendi +/- o que você disse, o efeito é similar ao que uso neste lay?
      http://w-chanteste24.blogspot.com.br/

      Excluir
    2. Anônimo19/8/13

      sim sim wendy....... esse msm... será q poderia fzr o tuto pra mim???
      bjnhss

      Excluir
    3. Anônimo20/8/13

      ain wendy mt obrigaduuu!! vlw mesmo!!! mt sucesso para vc!!!
      ~chuuu ^3^

      Excluir
  6. As frases na imagem de ilustr. de post são muito lindas *-*

    ResponderExcluir
  7. Nossa que legal, adorei o efeito!
    Ótimo tutorial *-*

    http://www.revolucaonerd.com/

    ResponderExcluir
  8. Muito bom efeito >.<

    http://lonely-in-wonderl4nd.blogspot.com.br/

    ResponderExcluir
  9. Eu achei o efeito bem legalzinho, simplisinho, kawaii *--* KKK' parei :p
    Bom, eu adorei adorei o tutorial!!
    kiss~

    castle-madness.blogspot.com

    ResponderExcluir
  10. Lindo, kisses

    Candy || http://epidemiadosblogs.blogspot.com

    ResponderExcluir
  11. Divulgação? Estou nessa, hu3.
    Lindo efeito, bem diferente!

    SEMPRE FUI ESTRANHA

    ResponderExcluir
  12. Anônimo17/8/13

    Amei seu blog *u* vou seguir... Quando fui ver a preview não tem efeito ;s passei o mouse em cima e não aconteceu nada :( amei seu layout.
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada por seguir e por gostar do lay. O efeito e deixar imagens coloridas em
      preto e branco com borda.

      Excluir
  13. Anônimo17/8/13

    Amei o efeito ! Divulgação UHUUL !!
    http://g-arotasimples.blogspot.com.br/

    ResponderExcluir
  14. Super fofo, porém simples!
    quem sabe no próximo Lay eu use ;)

    Beijos:*

    # Eu escolhi Cristo : Vida Cristã!

    ResponderExcluir
  15. Adorei esse efeito, ele é bem simples e muito lindo *u*
    bj bj
    sorrisomet4lico.blogspot

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345