07 fevereiro 2013

Efeito HeartBeat {Exclusivo!} | Blockquotes

| |
{Créditos se usar, ok? ;♥ }
Oi gente ^-^
Eu trouxe, a pedido da Vick lá na Ask, alguns blockquotes fofinhos que eu mesma fiz. Eu tentei fazer uns bem diferentes, porém não tão exagerados como vemos em muitos blogs por aí. E eu também vim compartilhar com você um efeito bem legal que eu fiz ^-^

Gente, todos estão cansados de saber que tudo o que é postado aqui é meu (Shaking, Flipping, Menu Cute Flip, etc), mas eu vou ter que colocar {Exclusivo!} em todos os títulos de posts porque sempre tem aquelas pessoas cínicas. Isso não dá!
Mas indo ao assunto, clique em leia mais *-*





Para usar o blockquote, no HTML do seu blog aperte F3 e procure por ]]></b:skin> | Quando achar, acima cole:
blockquote {
text-align: justify;
font-family: trebuchet ms;
border-radius: 0px 0px 10px 10px;
background: #fff;
padding: 2px 3px 2px;
line-height:1.8em;
color: #DF2D58;
border-top: solid 4px #DF2D58;

box-shadow: inset 0 0 30px #eee, 0 0 4px #ccc;}
background: #fff; cor do fundo
color: #DF2D58; cor do texto
border-top: solid 4px #DF2D58; é o tipo de borda (solid) a grossura (4px) #DF2D58 é a cor

No HTML do seu blog aperte F3 e procure por ]]></b:skin> | Quando achar, acima cole:
blockquote {
text-align: justify;
font-family: trebuchet ms;
border-radius: 0px 10px 10px 0px;
background: #fff;
padding: 2px 3px 2px;
line-height:1.8em;
color: #DF2D58;
border-left: solid 4px #DF2D58;
box-shadow: inset 0 0 30px #eee, 0 0 4px #ccc;}
background: #fff; cor do fundo
color: #DF2D58; cor do texto
border-top: solid 4px #DF2D58; é o tipo de borda (solid) a grossura (4px) #DF2D58 é a cor

Efeito HeartBeat!
No HTML do seu blog aperte F3 e procure por ]]></b:skin> e quando achar, cole logo a cima:
@-webkit-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-moz-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-o-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
.efeito-heartbeat-isa {-webkit-transition: .5s; border:solid 2px #E42D8A;border-radius: 10px; box-shadow: 1px 1px #caebe6;}
.efeito-heartbeat-isa:hover {-webkit-animation: efeito-heartbeat-isa .5s alternate infinite linear; border:solid 2px #DC1B7A;}
border: solid 2px #E42D8A; é o tipo de borda, a grossura e a cor da borda. Se não quiser apague.
border-radius: 10px; borda arredondadas

border:solid 2px #DC1B7A; é a borda, a grossura e a cor quando passa o mouse por cima. Apague se não quiser.

Após mudar o que quiser, visualize e se estiver tudo bem, salve.

Vá em Layout • Adicionar Gadgets • HTML/JavaScript • Cole:
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
Prontinho ^-^ Espero que tenham gostado! {Se repassar, dê créditos!}






9 comentários:

  1. Adorei os blockquotes, e o efeito é incrível, adorei! Você arrasa o3o Beijos, Explodindo Glitter.

    ResponderExcluir
  2. Ensina a fazer esse efeito da sua foto?

    adolescentelouco-lol.blogspot.com

    ResponderExcluir
  3. Adorei,seus tutos são os que é certeza que vai funcionar!!
    vou colocar esse efeito lá no meu blog.Obrigada!
    Sckitty World

    ResponderExcluir
  4. Adorei o segundo estilo de blockquote, ficaram lindos *-*
    E o efeito é super legal, parece que é tipo uma pessoa respirando DFGSHJKASDHA.' Bem legal, gostei ><

    www.poisonhtml.blogspot.com/

    ResponderExcluir
  5. oi teu blog florzinha. muito fofo, amei de ♥ estou te seguindo, da uma passadinha no meu (segue de volta?), saiba que vc sera muiitoo bem vinda. bjiinhuss cariinhososs!

    http://leyahff.blogspot.com.br/

    ResponderExcluir
  6. Muito boom o tutorial, o efeito fica muito boonito também :]

    Jhoonasw - www.ejhonas.com (Seguindo)

    ResponderExcluir
  7. Muito lindo esse efeito, e o seu layout é simplesmente perfeito.
    Adorei conhecer esse blog, ele é muito lindo, venho visitar sempre a partir de hoje !
    Beijos ;*

    ResponderExcluir

« »