Três Modelos de Blockquote

Olá pessoal.

Tudo bem?

Bem, finalmente minhas provas acabaram, ou seja: Mais posts, mais tutoriais, mais resenhas... Acho que vocês realmente gostam de tutoriais, né? Pois bem. Esse que eu trago, é de como colocar blockquote no blog. São três modelos. Para quem não sabe o que é blockquote...

Isso aqui é um blockquote

Os créditos vão todos ao Birthday Cake. Para visualizar eles, clique aqui. Caso esteja interessado, clique em Leia Mais.




Para utilizar cada um dos códigos, basta cola-los acima de ]]></b:skin>

Primeiro modelo:

blockquote {

font-family: Pf Arma Five;

font-size: 8px;

color: #fff;

text-shadow: 1px 1px 0px #ED2140; /* Coloque uma cor mais escura do que o Background */

box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.3);

border: 1px solid #F3697E;

background: #F3697E; /* Mude apenas a cor do Background */

text-align: center;

padding: 10px;

-webkit-transition: all .8s ease-out;

-moz-transition: all .8s ease-out;

}

blockquote:hover {

font-family: Pf Arma Five;

font-size: 8px;

color: rgba(0,0,0, 0.2);

text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.20); /* Não mecha */

background: #F3697E; /* Cor do Fundo em Hover */

text-align: center;

padding: 10px;

box-shadow: inset 0px 0px 1px #fff;

-webkit-transition: all .8s ease-out;

-moz-transition: all .8s ease-out;

}

Segundo Modelo:

blockquote {font-family: Trebuchet MS;padding: 10px;overflow: scroll; /* Não mecha */background: #eee; /* Cor do Background */box-shadow: inset 0px 0px 2px #ccc; /* Mude apenas a cor */text-align: justify;font-size: 11px;color: #666;} 

Terceiro Modelo: 

blockquote {

font-family: Tahoma; /* Fonte */

text-align: justify;

padding: 10px;

font-size: 11px;

color: #666;

border: 3px solid #fff;

background: #eee; /* Cor do Background */

box-shadow: 1px 1px 2px rgba(6,6,6,0.1);

}

Espero que tenha sido útil. 

Beijos.