10 estilos para Blockquote

Tumblr_mbist1ikwj1rx726to1_500_large


Olá leitores! Bem vindos novamente (ou não) ao Vintage Mustache! Hoje trouxe um tutorial achado lá no blog We Heart HTML (um de nossos afiliados!), portanto, créditos!
 É realmente um blog muito bom, já usei os tutoriais de lá várias vezes! Além do mais os blogueiros são SUPER atenciosos! Mas agora vamos aos blockquotes!
Para colocá-los é só ir no seu HTML e procurar por ]] e logo acima dessa tag, colar o código do blockquote escolhido!


Estilo 1 - Normal
Estilo 1 - Hover

/*** Blockquote por Mundo Html/ all-teardrop-is-a-waterfall ***/
 blockquote {background: #transparent;border-left: 2px solid #cbd3dc;border-right: 2px solid #ec5787; padding: 10px 15px 15px 10px;font-size: 13px; color: #696969; text-align: justify; font-family:arial;-webkit-transition-duration: .50s; } blockquote:hover{background: #transparent;border-left: 5px solid #cbd3dc;border-right: 5px solid #ec5787; font-size: 13px; color: #696969; text-align: justify; font-family:arial;-webkit-transition-duration: .50s; }

Estilo 2



/*** Blockquote por Mundo Html/ all-teardrop-is-a-waterfall ***/
blockquote {background: #E8BDCB url('http://static.tumblr.com/eyob2gi/Wq4m7lkbs/aapng.png') no-repeat;border-radius:5px; border-bottom: 6px solid #DE9FB4;padding:15px 15px 15px 3.2em;font-size: 11px; color: #FFF; text-align: justify; font-family:arial; }

Estilo 3


~> Blockquote Folk - By Pincelando o Céu <~
.post blockquote {
background: #F5ECED;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-right: 5px solid #FF9B8B;
font-size: 13px;
text-align:center;
}
Estilo 4
~> Blockquote Girlie - By Pincelando o Céu <~
.post blockquote {
background: #FFF0F5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-left: 8px ridge #FF6FBD;
font-size: 13px;
text-align:center;
}
 Estilo 5


/* Blockquote Friendship By: The Lovers */
.post blockquote {
background: #fffafa;
border-left: 3px solid #ff34b3;
border-right: 3px solid #ff34b3;
color: #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;}
Estilo 6


/* Blockquote Simple: The Lovers */
.post blockquote {
background: #f5f5f5;
border-left: 8px solid #66cdaa;
color: #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;}

Estilo 7


blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-box-shadow:5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}

Estilo 8


/* Blockquote By: Kawaii World */
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;
}
Estilo 9


blockquote { border-left: 8px solid #FA6B8F; background-color: #efefef; padding: 4px; color: #333333; text-align: justify; }
Estilo 10



.post blockquote {
background: #f5f5f5;
border-bottom: 3px solid #3C355F;
color: #3C355F;
font-family: tahoma;
font-weight: normal;
font-size: 11px;
text-align: right;
padding: 3px;
border-radius: 25px;
}

 Vocês podem alterar tudo o que está em negrito, que são as cores.


0 leitores soltaram o verbo:

Postar um comentário

Leia, é importante!

- Todos os comentários serão lidos e quando possível, respondidos;
- Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
- No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
- Encomendas e pedidos deverão ser feitos na Ask (menu).

Obrigada por comentar e volte sempre!