9.5.14

Cinco modelos para blockquote (03)

Boa tarde, anjinhos! ๑(。⌒∇⌒)。๑ Como vocês estão? Estou muito bem e espero que todos vocês estejam! Estou com um ótimo humor, hoje teria aula mas acabei por não ir, o que ajudou muito no meu "bem estar", haha. Por hoje trago à vocês modelos para blockquote. Sinceramente, adoro fazer modelos e ainda mais para blockquote e afins, e por este me pediram bastante na ask. Uma pessoa que me pediu também foi a Amy, espero que goste ^u^ São cinco modelos bem bonitinhos para vocês! Creditem devidamente, sim? E quando eu falo devidamente é como todos os créditos devem estar, linkados e em uma página ou gadget visível, por favor, não é pedir demais. Enjoy!

Modelo 01: Lilás com borda outline e sombra.
 
01. Cole o código do quote abaixo acima de ]]></b:skin>
blockquote{
padding: 6px;
background-color: #f3ecf2;
border: 1px dashed #d2c3d1;
box-shadow: inset 0 6px 0 #eae3e9, 0 0 6px #f5f5f5;
color: #c7b5c5;
outline: solid 2px #fff;
outline-offset: -3px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 11px;
}

Modelo 02: Cinza, simples com borda e sombra 3d.
 
01. Cole o código do quote abaixo acima de ]]></b:skin>
blockquote{
padding: 6px;
background-color: #f3f3f3;
border: 1px solid #e1e1e1;
box-shadow: inset 1px 1px #f9f9f9, 0 0 6px #f6f6f6;
color: #bbb;
text-shadow: 1px 1px 0 #fafafa;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 11px;
}

Modelo 03: Azul com sombra interna e hover.
 
01. Cole o código do quote abaixo acima de ]]></b:skin>
@font-face { font-family: "five"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');}
blockquote{
padding: 6px;
background-color: #e3e9ef;
box-shadow: inset 0 0 3px #c4cfd9, 0 0 6px #f6f6f6;
color: #b8c4cf;
text-shadow: 1px 1px 0 #eaf0f4;
font-family: "five";
font-size: 8px;
-webkit-transition-duration: .50s;
}
blockquote:hover{
background-color: #ecf0f4;
box-shadow: inset 0 0 3px #d7dee5, 0 0 0 #f0f0f0;
color: #bfcbd6;
text-shadow: 1px 1px 0 #f1f5f7;
border-radius: 9px;
-webkit-transition-duration: .50s;
}

Modelo 04: "Roxo" com gradiente e hover.
 
01. Cole o código do quote abaixo acima de ]]></b:skin>
blockquote{
padding: 6px;
background: #d7d8dd;
background: -moz-linear-gradient(top,  hsla(230,8%,85%,1) 20%, hsla(225,6%,88%,1) 21%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,hsla(230,8%,85%,1)), color-stop(21%,hsla(225,6%,88%,1)));
background: -webkit-linear-gradient(top,  hsla(230,8%,85%,1) 20%,hsla(225,6%,88%,1) 21%);
background: -o-linear-gradient(top,  hsla(230,8%,85%,1) 20%,hsla(225,6%,88%,1) 21%);
background: -ms-linear-gradient(top,  hsla(230,8%,85%,1) 20%,hsla(225,6%,88%,1) 21%);
background: linear-gradient(to bottom,  hsla(230,8%,85%,1) 20%,hsla(225,6%,88%,1) 21%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d8dd', endColorstr='#dedfe2',GradientType=0 );
box-shadow: inset 0 0 3px #c2c4cc;
color: #fff;
text-shadow: 1px 1px 0 #c2c4cc;
border-radius: 3px;
-webkit-transition-duration: .2s;
}
blockquote:hover{
background: #dedfe2;
background: -moz-linear-gradient(top,  hsla(225,6%,88%,1) 79%, hsla(230,8%,85%,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(79%,hsla(225,6%,88%,1)), color-stop(80%,hsla(230,8%,85%,1)));
background: -webkit-linear-gradient(top,  hsla(225,6%,88%,1) 79%,hsla(230,8%,85%,1) 80%);
background: -o-linear-gradient(top,  hsla(225,6%,88%,1) 79%,hsla(230,8%,85%,1) 80%);
background: -ms-linear-gradient(top,  hsla(225,6%,88%,1) 79%,hsla(230,8%,85%,1) 80%);
background: linear-gradient(to bottom,  hsla(225,6%,88%,1) 79%,hsla(230,8%,85%,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedfe2', endColorstr='#d7d8dd',GradientType=0 );
box-shadow: inset 0 0 3px #c2c4cc;
color: #fff;
text-shadow: 1px 1px 0 #c2c4cc;
border-radius: 0px;
-webkit-transition-duration: .2s;
}

Modelo 05: Um simples preto com opacidade e hover lento.
 
01. Cole o código do quote abaixo acima de ]]></b:skin>
blockquote{
padding: 6px;
background: #000;
color: #fff;
border-radius: 3px;
-moz-opacity: 0.38;
-khtml-opacity: 0.38;
opacity: 0.38;
filter:alpha(opacity=38);
-webkit-transition-duration: .2s;
}
blockquote:hover{
background: #000;
color: #fff;
border-radius: 1px;
-moz-opacity: 0.54;
-khtml-opacity: 0.54;
opacity: 0.54;
filter:alpha(opacity=54);
-webkit-transition-duration: .2s;
}

34 comentários

  1. Adorei o primeiro modelo, pena que já terminei o
    layout do SD, mas tentarei usa-lo em um próximo.

    Abraços || sevendays-official.blogspot.com

    ResponderExcluir
  2. Awnnn unnie que bonitos esses blockquotes <33 eu posso usar o modelo 1 só que mudar as cores um pouquinho e a sombra??? (eu ou creditar é lógico u.u)

    SEXTAAAAAA ~ até que enfim \ooo/

    Chu ~ || @MyPinkOcean

    ResponderExcluir
  3. Meu blog não tem nivelação certa, mas costumo enrolar heuheuheu Hoje eu tive aula, foi meio chatinha ;-; Eu sento perto de um monte de menino e longe das minhas amigas, a minha única companheira lá é a parede </3
    Amei os blockquotes *u* Sempre procuro uns legais, mas nunca acho um quando preciso e morro de preguiça de fazer o meu.
    Beijos ♥
    guardian-luv

    ResponderExcluir
  4. Todos modelos estão lindos, mas o 4º me encantou, esta perfeito *-*
    Ah, essa coisa de ficar enchendo linhas é mesmo um saco rs. Mas a senhora se saiu muito bem q.

    Beijos,
    Nebula | Blog novo, visita?

    ResponderExcluir
  5. Eu queria pegar o azul, mas pode mudar a cor? Kiss :*

    ResponderExcluir
  6. Nada melhor que sexta não ir pra aula adljfnasdjfnajlsdnsdçjkn Eu amo blockquotes mas o pior é que eu não sei fazer x-x Tipo eu faço mas fica horrivel T^T

    Os modelinhos de blockquote estão lindos, sinceramente me apaixonei por todos *O* Mas o que eu mais gostei foi o terceiro é o quarto ^ ^ Estão uns amores.
    Mack sempre que você disponibiliza modelos de algo eu sinto uma vontade enorme de fazer layouts, mas todos os meus layouts são cagados T^T

    Querendo Voar *u* || Querendo Voar ~ (Queremos a sua visita! Beijos <3 )

    ResponderExcluir
    Respostas
    1. Pois não é, ahaha. Awe (⌒▽⌒)☆ Obrigada, Anny!

      Excluir
  7. oe :v
    Eu tô de greve, não tenho aulaaaaaaaaaaaaa \(^O^)/ E eu nem reponho a greve :D
    Amei as blockquotes, porém vou ficar com a minha mesmo! Quando eu trocar de lay vou ver se ponho alguma ^^
    Amei o post >-<
    bjuu >3<
    |unicorns-are-colorful.blogspot.com|

    ResponderExcluir
  8. Acho que sou a primeira a comentar e.e Ain que emossaum! Amei os modelinhos, eu vou usar o segundo no layout que estou fazendo, está bem fofo *-*

    Beijos,
    http://beautifulm-ind.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. A sétima ): Mas tudo bem (⌒▽⌒)☆ Obrigada, Danielle!

      Excluir
  9. Eu já enrolo nas postagens naturalmente e isso acabar ajudando para alcançar todos os números de linhas, afinal são quatorze ç3ç Bom, amei os modelos de blockquote, principalmente os que estão em hover ♥ Ah, Mack eu comecei agora com um blog e ficaria muito feliz se você pudesse fazer uma visita, eu sei que você provavelmente tem muita ocupações, mas seria ótimo ter você por lá <3
    Beijos , True Now

    ResponderExcluir
    Respostas
    1. Obrigada, Megan! (⌒▽⌒)☆ Farei sim, pode deixar.

      Excluir
  10. Amei o primeiro, muito fofo ♥

    Beijos ~♥~
    Nothing to declare
    Burucheri

    ResponderExcluir
  11. O ruim mesmo é ter só dois dias para fazer várias lições da escola e ainda separar um tempo para si mesmo.
    Os modelos de blockquote são lindos, principalmente o lilás e o azul!

    Beijos :*
    http://myworld-of-crystal.blogspot.com.br/

    ResponderExcluir
  12. São todos adoráveis x3x;Vou usar um deles no meu lay hahaha;Queria um simples lilás,acho que vou ficar com o primeiro @u@
    ~Aiza Teenage Dream

    ResponderExcluir
  13. E quem não enrola nas introduções? Alienígenas? Talvez, esses tem o que contar q
    Os modelos ficaram muito fofos, meu preferido foi o segundo *3*

    Até logo, www.milky-lemonade.blogspot.com.br

    ResponderExcluir
  14. o segundo foi o que eu mais gostei, quem não fica feliz quando não vai pra escola ? uahsuah

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir
  15. ameeeei o 3º se eu lembrar eu uso no meu blog no próximo tema e pode deixar que eu dou os créditos!
    *3* *3* *3* bjsbjs
    http://dooceutopiia.blogspot.com.br/

    ResponderExcluir
  16. Cara, sabia que eu amo seu blog ? sério ele é tipo que diwo e também carrega super fácil no meu pc.Me da um Autográfo? (⌒▽⌒)☆

    Vou usar o 2º modelo achei tão lindo Beijoos!

    ResponderExcluir
  17. São todos muito lindos! Ain moça, como você consegue? Kkkk, sua diva! Amo seu blog

    Heeey, usei o modelo 4, copiei tudo e talz... Mas diz aí! Onde que aparece isso? Um beijo ♥

    ResponderExcluir
    Respostas
    1. Oi, Luiza >3< Obrigada! Fico contente pelo elogio ♥ Ah, o blockquote aparece quando você usa o seguinte código no html da postagem que você estiver escrevendo (sem os espaços entre o "<"):
      < blockquote >Blá blá< /blockquote >

      Excluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!