Modelos de Blockquote

Olá Anjos!

Como vai a vida de vocês? Minhas aulas estão voltando, então é bem provável que eu diminua a quantidade de postagens que faço. Aulas são tão chatas, ainda bem que esse é meu último ano na escola, e infelizmente o começo de todos os problemas. Só de pensar que depois disso vou ter que trabalhar atéé aposentar... Nem é bom pensar.

Hoje trouxe alguns modelos de blockquote para vocês. Alguns fui eu mesma quem fiz, outros eu estou repassando. Nem todos tem hover, mas caso queira acrescentar, é só copiar o código novamente e colocar :hover depois da tag blockquote (acho que todo mundo já sabe né?). Enfim, clique em leia mais para ver os modelos.

Modelo 1:

Código:

blockquote {

border: 3px solid #fafcfd;

background-color: #fbf0ff;

padding: 10px;

font-size: 11px;

color: #a48ead;

text-align: center;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

box-shadow: inset 0 0 12px #f6dad8, 0 0 5px #d976a3;

}

Modelo 2:

Código:

.post blockquote {
background: url("http://static.tumblr.com/oiizew6/Zgqm3v6uq/blockquote.png");
padding: 14px;
padding-left: 70px;
font-size: 11px;
color: #696969;
text-align:justify;
box-shadow: 0px 1px 2px #edeeec;
}

Modelo 3: (reblogado do Kawaii World)

Código:

blockquote {

border-right: 10px solid #f99db3;

border-left: 10px solid #f99db3;

background-color: #f5f2f3;

padding: 10px;

font-size: 12px;

color: #e193a6;

text-align: center;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;

box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;

}

Modelo 4:

Código:

blockquote {

border-left: 1px solid #F417BD;

border-bottom: 2px dashed #F417BD;

border-right: 1px solid #F417BD;

border-top: 1px solid #F417BD;

background-color: #F8CFEE;

padding: 10px;

font-size: 14px;

color: #5F0749;

text-align: center;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

Modelo 5:

Normal:

Hover:

Código:

blockquote {

background: #F0CEFB; 

border-top: 6px solid  #BF81D2; 

border-bottom: 2px solid #BF81D2; 

border-left: 2px solid #BF81D2; 

border-right: 2px solid #BF81D2; 

font-family:arial; 

padding: 5px;

font-size: 14px; 

color: #5B266B; 

text-align: center;

border-top-right-radius: 5px;

border-bottom-right-radius: 50px;

-webkit-transition-duration: .60s;

}

blockquote:hover {background: #F0CEFB;

border-top-left-radius: 50px;

border-bottom-right-radius: 1px;

}

Espero que gostem! 

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar