Segundo tutorial de hoje, minna-san!
Digamos que eu estive a estudar diversos modelos para status, mas que achei todos muito semelhantes entre si, então praticamente misturei vários deles e ainda um efeito chamado "novi", para fazer um modelo meu. Indico que mudem apenas as cores, e talvez as bordas, mas se souberem como mudar algo mais, à vontade, desde que creditem a base. Pessoalmente, adorei o resultado, mas só clicando em Ler mais para ver ;)
Prévia: www
Tutorial:
Procure por <head> e acima cole:
<link href='http://static.tumblr.com/dlelfro/WSvmh91f0/pisca5.css' media='screen' rel='stylesheet'/>Procure por /b:skin e cima cole (mude as cores à vontade):
.novi { /*área do texto*/
width: 154px;
height: 50px;
background-color: #d470aa;
margin-left: 60px;
margin-top: 10px;
font-family: muli;
font-size: 16px;
color: #fff;
text-shadow: 1px 1px 0px #b347a1;
text-align: left;
text-indent: 5px;
border-radius: 5px;
box-shadow: 3px 3px 0px #fff;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.novi:hover { /*área do texto*/
background-color: #fff;
color: #2d3f73;
text-shadow: 1px 1px 0px #f7dacb;
border-radius: 5px;
box-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.novi p {font-size:14px;line-height:14px;}
.novi img { /*alinhamento da imagem em relação à caixa*/
width: 50px;
height: 50px;
position: absolute;
margin-left: -74px;
border: 1px dashed #fff;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
}
.novi:hover img {
-webkit-animation-name: piscaporra;
-moz-animation-name: piscaporra;
-o-animation-name: piscaporra;
animation-name: piscaporra;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
}
.novi:before { /*dá para definir a seta*/
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 16px solid #d470aa;
border-bottom: 8px solid transparent;
margin: 22px 0 0 -21px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
Cole num gadget HTML/Javascript:
Não sei se é usável, mas eu gostei do resultado.<center><br /><a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a><a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a><a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a></center><br />
Gostei do resultado, acho lindo modelos de status e ficam lindinhos no blog <3
ResponderEliminarAbraços *3*
{www.h-oneypie.com}
Eu também adoro modelos de status, aliás, eu adoro modelos de quase tudo, embora me tenda a esquecer precisamente de usar status nos meus layouts >.<
EliminarAny-chan porfavor posta mais modelos para titulo da postagem,Beijokas :v
ResponderEliminarDesculpa só ter visto agora, vou tratar do assunto :)
EliminarAny-chwaaaaan
ResponderEliminarAdorei o modelo! *u* Estou usando no lay que estou fazendo, só que está beeeem adaptado, acabei tirando a imagem e usei só a caixinha mesmo; mas não se preocupe, vou te dar os créditos de qualquer jeito =w= Obrigada pelo tuto! ♥
Eu não me preocupo, confio em você :) Fico feliz por ter gostado >///<
EliminarNossa.. gostei do novo lay
ResponderEliminarEstou um pouco curioso, de qual anime é essa personagem dos gifs?
Dei uma olhada na preview, e gostei de como ficou.
Vejo algumas blogueiras usando status. Eu n uso, mas vai servir para muita gente.
Abraço.
Eu ainda não vi o anime, mas creio que é bakemonogatari, ou coisa assim. Eu também não uso, mas adorei testar o modelo ^^
EliminarCara que perfeito... Isso deixaria qualquer blog bonitinho e.e Sei lá, é fofo!
ResponderEliminarAny!! Não suma! Amo seu blog (e você também moça cwc)!!
http://linhaselirios.blogspot.com.br/
Não se preocupe, não se vai livrar de mim tão cedo ;) Fico feliz por gostar do meu blog - deste ou do Forever Sapo?
Eliminar4ever-sapo.blogspot.pt
Este comentário foi removido pelo autor.
ResponderEliminarO código é meio grande, em compensação o modelo é super diferente e bonito. Amei! Hey, a parte do 'piscaporra' é obra da Kaorii, né? Já ri muito com isso huashuash
ResponderEliminarGostei muito do layout, esse background é tão fofo...
Bjs,
Bipolaridades (antigo heartmoon)
Ah, sim, o piscaporra é da Kaorii, eu na altura também ria imenso com o tutorial :) Fico contente por ter gostado deste modelo, realmente o código não é curto, mas foi a única maneira que consegui de o deixar assim. Thank you :3
Eliminar