Boa noite, cheirosos (=^・ω・^=)
Fiz uma nova ask para o blog, quem quiser perguntar ou pedir algo, é só ir até o final do gadget, ok? Ah, e também abri novas vagas para afiliações, pois alguns daqueles blogs quase nem me visitavam, e porque a lista estava muito cheia e embolada, ia ficar feio aquela lista enooorme no blog. Quem quiser se afiliar, é só pedir pela ask. E sobre o layout? Vocês gostaram? Espero que sim, fiz com muito carinho pra vocês *u*
Hoje eu irei ensinar vocês a fazerem um efeito suuper legal, para gadgets de welcome. Realmente, o efeito é muito show. Tenho certeza de que vocês vão gostar. Passei ele do tumblr para o blogger, então se reblogarem, creditem. Ah, para visualizarem o efeito, cliquem aqui :3
1- Procure por ]]>< e acima desse código cole:
/***IMAGEM FLIP SIMONE (CEREJADOSUNDAE)***/#imagesm {background: transparent;padding:4px; width:170px;height:200px;-webkit-box-shadow: -1px -1px 12px rgba(50, 50, 50, 0.38);-moz-box-shadow: -1px -1px 12px rgba(50, 50, 50, 0.38);box-shadow: -1px -1px 12px rgba(50, 50, 50, 0.38);}#imageside:hover{-webkit-transition-duration: .90s;-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);}.imageside { padding:4px; width:170px;}.imageside .imagesm {width:170px;color:#fff;margin-top:-110px;opacity:0;-webkit-transition-duration: .99s;}.imageside:hover .imagesm {margin-top:10px;opacity:1;-webkit-transition-duration: .99s;transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}.imageside .descr {width:160px;height:190px;-webkit-transition-duration: .99s;opacity:1;margin-top:-450px;background: rgba(0, 0, 0, 0.5);color:#fff;padding:4px}.imageside:hover .descr {-webkit-transition-duration: .99s;margin-top:-210px;opacity:1;-webkit-transition-duration: .90s;}.image{width:170px;height:200px;positon:fixed;-webkit-transition-duration: .90s;;}.image:hover {-webkit-transition-duration: .90s;-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);}
2- Para usar o efeito, basta adicionar o código abaixo num gadget de HTML/JavaScript:
<div class="imageside"><div id="imagesm"><img src="http://25.media.tumblr.com/tumblr_m5sctx1eig1rnkpueo1_500.jpg"class="image"><div class="imagesm"><div class="descr">Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.</div></div></div></div></div></div>
3- Edite na sua preferência e salve.
Adorei o tutorial *-*
ResponderExcluir# Psycho Tutoriais ✿
AIHHH JÉSSIKA
ResponderExcluirVOCÊ VOLTOU >..<