Blockquote Personalizado

( imagem via )

Hey pessoal, olha eu aqui de novo postando coisas referentes à design! Desta vez vou ensinar à vocês como personalizar o blockquote do blog e darei 5 exemplos para vocês usarem, ok?

Primeiramente você vai apertar no seu teclado Ctrl+F para procurar pelo trecho abaixo:

]]></b:skin>

Você deve colar o seu código acima desse trecho, ok?

     • EXEMPLO 1

blockquote {

background: url('http://goo.gl/sfdj1K'); /* imagem de fundo */

padding: 5px; /* espaço interno */

color: #fff; /* cor da fonte */

font-size: 10px; /* tamanho da fonte */

text-align: center; /* texto centralizado */

border-radius: 0 20px; /* borda arredondada */

}

blockquote:hover { border-radius: 20px 0 }

Você pode trocar os códigos que estão em negrito.

      • EXEMPLO 2

blockquote {

background: #ba7eab; /* cor de fundo */
padding: 8px; /*espaço interno */
color: #522747; /* cor da letra */
font-size: 9px; /* tamanho da letra */
text-transform: uppercase; /* caixa alta */
border-top: 1px dotted #643057; /* borda do topo */
border-bottom: 1px dotted #643057; /* borda da base */
text-shadow: 1px 1px  #d0acc7; /*sombra da letra */
text-align: center; /*texto centralizado */

}

     • EXEMPLO 3

blockquote {

padding: 10px;
color: #999;
font-size: 10px;
border: 3px solid #ccc;

transition: linear 0.5s;

-moz-transition: linear 0.5s;

-webkit-transition: 0.5slinear

}

blockquote:hover{ border: 3px solid #8e91bf }

 • EXEMPLO 4

blockquote {

background: #D7C6FA;
padding: 10px;
color: #886bc2;
font-size: 11px;
border-bottom: 2px solid #ad93e4;

}

blockquote:hover{ border: 2px solid #8e91bf }

 • EXEMPLO 4

blockquote {

background: #ffe7e9;
padding: 15px;
color: #dc616c;
font-size: 9px;
text-align: center;
border-radius: 15px;
border-left: 2px solid #dc616c;
border-right: 2px solid #dc616c;
letter-spacing: 0.5px;
transition: 0.2s ease-in;

}

blockquote:hover{ 
border-left: 3px solid #dc616c;
border-right: 3px solid #dc616c;
background: #f0f0f0
}

Sintam-se a vontade para modificar o código, só me avisem se usarem e por favor coloquem os créditos, ok? Tudo o que eu faço aqui é pensando no melhor para vocês, não quero ter que parar. (:

Se quiser acompanhar o blog: Twitter • Fanpage • Tumblr • Weheatit • Pinterest