Tutorial - Efeito Yume


Toxxic!

Estou pensando em seguir a dica da Kaorii, e criar um blog de icon - eu adoro fazê-los. Estava pensando nisso e na escola... Como vou fazer com mais um blog. Agora, pensando bem, acho que vou desistir. Estamos quase completando mais uma meta, hoje estou atenta á isso. Quando o blog completar 100 seguidores, acho que vou fazer alguns packs e layouts free. Mas isso, só no dia do aniversario do blog. Não estamos tão longe assim, né?
Mas, vamos ao assunto principal, a Kaorii deixou o KW em hiatus. Entendo ela, serio mesmo. Ás vezes precisamos de um descanso e tal, só espero que esses meses passem bem rápido. Para ele poder abrir. O mais engraçado de tudo, é que, ela fechou assim que comecei a fazer um template. Isso é azar ou apenas um mal-entendido?

Mais voltando mesmo ao assunto principal, o tutorial. Trouxe um efeito muito fofinho, para imagens. Ele fica bem nos afiliados, por exemplo. Eu aprendi ele no Adolescente Nerd. Mas então, vamos ao tutorial.
Sobre cada efeito, tem o nome dele. É só passar o mouse para ver o nome e o efeito. Mas vamos aos códigos?
Visualize aqui.
Abra se HTML e procure por: ]]
Acima dessas tag, cole o código correspondente ao efeito que quer usar.
Sepia
.sepia {-webkit-filter:sepia(1);-webkit-transition-duration: 1.5s;-webkit-transform: rotate(30deg) scale(1.1);border-radius: 100px;margin: 5px;-moz-box-shadow: 0 0 1em #00CED1;-webkit-box-shadow: 0 0 5px #888;}.sepia:hover {-webkit-filter: none;-webkit-transform: rotate(0deg) scale(1.1) ; opacity: .99;-webkit-transition-duration: 1s;border-radius: 5px;}
Blur 
.blur {-webkit-filter:blur (1);-webkit-transition-duration: 1.5s;-webkit-transform: rotate(30deg) scale(1.1);border-radius: 100px;margin: 5px;-moz-box-shadow: 0 0 1em #00CED1;-webkit-box-shadow: 0 0 5px #888;}.blur:hover {-webkit-filter: none;-webkit-transform: rotate(0deg) scale(1.1) ; opacity: .99;-webkit-transition-duration: 1s;border-radius: 5px;}
Gray 
.gray {-webkit-filter:grayscale(1);-webkit-transition-duration: 1.5s;-webkit-transform: rotate(30deg) scale(1.1);border-radius: 100px;margin: 5px;-moz-box-shadow: 0 0 1em #00CED1;-webkit-box-shadow: 0 0 5px #888;}.gray:hover {-webkit-filter: none;-webkit-transform: rotate(0deg) scale(1.1) ; opacity: .99;-webkit-transition-duration: 1s;border-radius: 5px;}
Contrast 
.contrast {-webkit-filter:contrast(1);-webkit-transition-duration: 1.5s;-webkit-transform: rotate(30deg) scale(1.1);border-radius: 100px;margin: 5px;-moz-box-shadow: 0 0 1em #00CED1;-webkit-box-shadow: 0 0 5px #888;}.contrast:hover {-webkit-filter: none;-webkit-transform: rotate(0deg) scale(1.1) ; opacity: .99;-webkit-transition-duration: 1s;border-radius: 5px;}
 Agora, vá em layout, adicione um novo gadget html/Javascript e nele cole o código correspondente ao seu efeito.

Sepia
<a href="LINK DO BLOG" title="Sepia"><img class="sepia" src="http://4.bp.blogspot.com/-WBNd1Rt2mP0/URlZy907UVI/AAAAAAAACxs/Siuv4G9j0To/s1600/hy011.png" /></a>
Blur
<a href="LINK DO BLOG" title="Blur"><img class="blur" src="http://4.bp.blogspot.com/-WBNd1Rt2mP0/URlZy907UVI/AAAAAAAACxs/Siuv4G9j0To/s1600/hy011.png" /></a>
Grayscale
<a href="LINK DO BLOG" title="Grayscale"><img class="gray" src="http://4.bp.blogspot.com/-WBNd1Rt2mP0/URlZy907UVI/AAAAAAAACxs/Siuv4G9j0To/s1600/hy011.png" /></a>
Contrast
<a href="LINK DO BLOG" title="Contrast"><img class="contrast" src="http://4.bp.blogspot.com/-WBNd1Rt2mP0/URlZy907UVI/AAAAAAAACxs/Siuv4G9j0To/s1600/hy011.png" /></a>
Em itálico, estão as partes na qual você terá que mudar. Tais como: link, titulo e imagem. Em negrito, tanto no código em css quando do de funcionamento, as "tags" do efeito. Caso queira mudar, coloque nas duas o mesmo nome. 
Espero que tenham gostado.
Beijos, Ana.
Exclusividade da Luanne rsrs': Beijos da sua feiosa <3, Ana.

2 comentários:

  1. Noossa, não sabia desse efeito, não.. No próximo lay, nos afiliados, vou usar ele :c
    Seeeeu bloooooooooog é liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiindjo' Já tô seguindo ^^

    Visita lá >>
    http://barbiemundogirls.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Achei quando estava fuçando no AN. rsrs' Obrigadaaaaaaaa! Já visitei vários blogs seus :)

      Excluir