25 de jan de 2013

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! 

2 comentários:

  1. Adorei o 2°, vou usar!
    Aulas são uma droga mesmo, pena que são necessárias.

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!