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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR10m5X2SYEtfLYlgtuwmKjFXg0yeQBSdiT9awgkSREppt6-Ro1bHDzTD64jOFU73ep2N_I6J3MS0S4wYAYud-ER1KfjJLAl0_e4taDwl4XAXGfIwtUaT7OxRJGHk38u239BZ5LVEiNP8/s1600/hy011.png" /></a>

Blur

<a href="LINK DO BLOG" title="Blur"><img class="blur" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR10m5X2SYEtfLYlgtuwmKjFXg0yeQBSdiT9awgkSREppt6-Ro1bHDzTD64jOFU73ep2N_I6J3MS0S4wYAYud-ER1KfjJLAl0_e4taDwl4XAXGfIwtUaT7OxRJGHk38u239BZ5LVEiNP8/s1600/hy011.png" /></a>

Grayscale

<a href="LINK DO BLOG" title="Grayscale"><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR10m5X2SYEtfLYlgtuwmKjFXg0yeQBSdiT9awgkSREppt6-Ro1bHDzTD64jOFU73ep2N_I6J3MS0S4wYAYud-ER1KfjJLAl0_e4taDwl4XAXGfIwtUaT7OxRJGHk38u239BZ5LVEiNP8/s1600/hy011.png" /></a>

Contrast

<a href="LINK DO BLOG" title="Contrast"><img class="contrast" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR10m5X2SYEtfLYlgtuwmKjFXg0yeQBSdiT9awgkSREppt6-Ro1bHDzTD64jOFU73ep2N_I6J3MS0S4wYAYud-ER1KfjJLAl0_e4taDwl4XAXGfIwtUaT7OxRJGHk38u239BZ5LVEiNP8/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.