Menu Roll - Exclusivo?
Autor: - Megan ✞ Subdona do A.N ✞ | Publicado: 2015-04-22T20:06:00-03:00




Boa noite!&nbsp;

I'm fine in shine &amp; vocês? Espero que bem também. - Minhas rimas melhoram a cada dia muahaha.

Só eu ando viciadíssima em We coração it? É muito bom e a cada imagem heartheada mais vontade de hearthear dá. Tenho uma novidade que me fez ficar bem feliz também, é sobre as visitas em nosso blog. Já tivemos várias visitas, até da Ucrânia! Haha' isso é bom, mas é claro que nosso maior público é brasileiro, pois somos H U 3 &nbsp;H U 3 BR :v&nbsp;



Mas... Ontem li um comentário de um blog americano. Melhor do que ter visitas estrangeiras é ter comentários estrangeiros, valeu mesmo pela força gente! Outra novidade recente - com recente quero dizer que aconteceu ontem! UAHSUHA' - Foi a entrega do layout para o blog C.L {www} além do blogueiro Thawan ser super paciente, engraçado e exagerado no CAPS LOCK, o blog é super interessante oh, amo essa revista e se quiserem podem conferir o novo layout - com novo quero dizer que ele foi entregue ontem.



P.S.: Hannah G3 trouxe duas gatinhas para casa.

P.P.S.: Ela trouxe mais uma, mas minha vó irá buscar ela, e a merda é que me apeguei a bicha.



Se eu disser que me lembro, estarei mentindo, pois não me lembro onde vi o tutorial do efeito, mas se descobrirem me avisem pelo amor de Deus - pelos comentários; e sim, esse tutorial é meio exclusivo, embora o efeito não tenha sido criado por mim, eu o modifiquei muito e se quiserem ver como ele é...

Clica! {♥}




Cole o código acima de&nbsp;]]&gt;&lt;/b:skin&gt;

.menuroll {
&nbsp;width: 40px;
&nbsp; &nbsp; &nbsp;height: 40px;
&nbsp; &nbsp; &nbsp;padding: 5px;
&nbsp; &nbsp; &nbsp;-webkit-border-radius: 5px;
&nbsp; &nbsp; &nbsp;-moz-border-radius: 5px;
&nbsp; &nbsp; &nbsp;border-radius: 5px;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;
&nbsp; &nbsp; &nbsp;-webkit-box-shadow: 0px 0px 4px #efefee;
&nbsp; &nbsp; &nbsp;-moz-box-shadow: 0px 0px 4px #efefee;
&nbsp; &nbsp; &nbsp;box-shadow: inset 3px 3px 0 #faf9fb, 2px 2px 0 #f6f6f6;
&nbsp; &nbsp; &nbsp;overflow: inherit;
&nbsp; &nbsp; &nbsp;margin-bottom: 5px;
&nbsp; &nbsp; &nbsp;color: #fff;
&nbsp; &nbsp; &nbsp;background: #f1edf4;
&nbsp; &nbsp; &nbsp;border: #d4c8dd solid 1px;
&nbsp; &nbsp; &nbsp;outline: solid 1px #f1edf4;
&nbsp; &nbsp; &nbsp;outline-offset: -2px;
&nbsp; &nbsp; &nbsp;text-shadow: 1px 1px 0 #cbbcd6;}
.menuroll:hover {
&nbsp; &nbsp; &nbsp;background: #e7e1ec;
&nbsp; &nbsp; &nbsp;width: 250px;
&nbsp; &nbsp; &nbsp;height: 40px;
&nbsp; &nbsp; &nbsp;padding: 5px;
&nbsp; &nbsp; &nbsp;-webkit-border-radius: 5px;
&nbsp; &nbsp; &nbsp;-moz-border-radius: 5px;
&nbsp; &nbsp; &nbsp;border-radius: 5px;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;}
.rollimg {
&nbsp; &nbsp; &nbsp;width: 40px;
&nbsp; &nbsp; &nbsp;height: 40px;
&nbsp; &nbsp; &nbsp;float: right;
&nbsp; &nbsp; &nbsp;-webkit-border-radius: 5px;
&nbsp; &nbsp; &nbsp;-moz-border-radius: 5px;
&nbsp; &nbsp; &nbsp;border-radius: 5px;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;
&nbsp; &nbsp; &nbsp;z-index: 100;}
.menuroll:hover .rollimg &nbsp;{
&nbsp; &nbsp; &nbsp;width: 40px;
&nbsp; &nbsp; &nbsp;height: 40px;
&nbsp; &nbsp; &nbsp;float: right;
&nbsp; &nbsp; &nbsp;-webkit-border-radius: 5px;
&nbsp; &nbsp; &nbsp;-moz-border-radius: 5px;
&nbsp; &nbsp; &nbsp;border-radius: 5px;
&nbsp; &nbsp; &nbsp;position: center;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;
&nbsp; &nbsp; &nbsp;-webkit-transform: rotate(360deg);
&nbsp; &nbsp; &nbsp;-moz-transform: rotate(360deg);
&nbsp; &nbsp; &nbsp;-o-transform: rotate(360deg);
&nbsp; &nbsp; &nbsp;-webkit-box-shadow: 0px 0px 4px #d0d3bb;
&nbsp; &nbsp; &nbsp;-moz-box-shadow: 0px 0px 4px #d0d3bb;
&nbsp; &nbsp; &nbsp;box-shadow: -2px 0px 3px #d0d3bb;}
.titleroll {
&nbsp; &nbsp; &nbsp;width: 300px;
&nbsp; &nbsp; &nbsp;color: #c8cbaf;
&nbsp; &nbsp; &nbsp;font-size: 10px;
&nbsp; &nbsp; &nbsp;font-family: Jacques Francois Shadow;
&nbsp; &nbsp; &nbsp;z-index: 50;
&nbsp; &nbsp; &nbsp;margin-top: 5px;
&nbsp; &nbsp; &nbsp;margin-bottom: -31px;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;
&nbsp; &nbsp; &nbsp;opacity:0;
&nbsp; &nbsp; &nbsp;-moz-opacity: 0;
&nbsp; &nbsp; &nbsp;filter: alpha(opacity=0);
&nbsp; &nbsp; &nbsp;text-shadow:0px 0px 5px #b8a4c7;}
.menuroll:hover .titleroll &nbsp;{
&nbsp; &nbsp; &nbsp;text-shadow:0px 0px 2px #d0d3bb;
&nbsp; &nbsp; &nbsp;margin-left: 5px;
&nbsp; &nbsp; &nbsp;-webkit-transition-duration: .90s;
&nbsp; &nbsp; &nbsp;opacity: 1;
&nbsp; &nbsp; &nbsp;-moz-opacity: 1;
&nbsp; &nbsp; &nbsp;filter: alpha(opacity=100);}

cole isso em um gadget HTML / JavaScript:

&lt;a href='LINK'&gt;
&nbsp; &lt;div class="menuroll"&gt;
&nbsp; &nbsp; &lt;div class="titleroll"&gt;Nome 1&lt;/div&gt;
&nbsp; &nbsp; &lt;img src="http://3.bp.blogspot.com/-Ay-APIM2Z1U/Uo_D4_-pF6I/AAAAAAAAIFs/a8YcRTg6zcY/s1600/asno.png" class="rollimg" /&gt;
&nbsp; &lt;/div&gt;
&lt;/a&gt;
&lt;a href='LINK'&gt;
&nbsp; &lt;div class="menuroll"&gt;
&nbsp; &nbsp; &lt;div class="titleroll"&gt;Nome 2&lt;/div&gt;
&nbsp; &nbsp; &lt;img src="http://3.bp.blogspot.com/-T2hV-f-H63k/Uo_EIGudo2I/AAAAAAAAIG0/9LaLAx29wx0/s1600/egvf.png" class="rollimg" /&gt;
&nbsp; &lt;/div&gt;
&lt;/a&gt;
&lt;a href='LINK'&gt;
&nbsp; &lt;div class="menuroll"&gt;
&nbsp; &nbsp; &lt;div class="titleroll"&gt;Nome 3&lt;/div&gt;
&nbsp; &nbsp; &lt;img src="http://2.bp.blogspot.com/-cUqbQOWZIWg/Uo_Ei5OHzDI/AAAAAAAAIIs/0H6Jfr6d3f0/s1600/merdapodri.png" class="rollimg" /&gt;
&nbsp; &lt;/div&gt;
&lt;/a&gt;


Tá certo galera, foi esse o tutorial e espero que tenham curtido.&nbsp;

- Rockisses in ur faces chocos!