29.8.15

Modelos para status #novi


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:
<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 />
Não sei se é usável, mas eu gostei do resultado.


13 comentários:

  1. Gostei do resultado, acho lindo modelos de status e ficam lindinhos no blog <3

    Abraços *3*

    {www.h-oneypie.com}

    ResponderEliminar
    Respostas
    1. 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 >.<

      Eliminar
  2. Any-chan porfavor posta mais modelos para titulo da postagem,Beijokas :v

    ResponderEliminar
    Respostas
    1. Desculpa só ter visto agora, vou tratar do assunto :)

      Eliminar
  3. Any-chwaaaaan
    Adorei 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! ♥

    ResponderEliminar
    Respostas
    1. Eu não me preocupo, confio em você :) Fico feliz por ter gostado >///<

      Eliminar
  4. Nossa.. gostei do novo lay
    Estou 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.

    ResponderEliminar
    Respostas
    1. 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 ^^

      Eliminar
  5. Cara que perfeito... Isso deixaria qualquer blog bonitinho e.e Sei lá, é fofo!
    Any!! Não suma! Amo seu blog (e você também moça cwc)!!

    http://linhaselirios.blogspot.com.br/

    ResponderEliminar
    Respostas
    1. 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?

      4ever-sapo.blogspot.pt

      Eliminar
  6. Este comentário foi removido pelo autor.

    ResponderEliminar
  7. O 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
    Gostei muito do layout, esse background é tão fofo...
    Bjs,
    Bipolaridades (antigo heartmoon)

    ResponderEliminar
    Respostas
    1. 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