Tutorial: Modelos de Blockquote

Bom hoje eu trago uns modelinhos de blockquote que eu achei na net, eu trouxe três. Os modelinhos são totalmente diferentes. Eu gostei muito. Enfim, vamos ao post.

Primeiro vamos no Modelo > Editar HTML e vamos dar um clique simples em qualquer ponto do HTML para ativar a caixa de pesquisa. Agora, dê Ctrl + F e cole isso na caixa de pesquisa: ]]></b:skin> e acima dessa tag cole o código do blockquote que mais te agradar.

• Modelo 1

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;

}

• Modelo 2

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;

}

• Modelo 3 

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);

} 

Visualize e veja se está tudo correto. Mude as cores e a fonte se quiser. Logo depois  visualize e se estiver tudo certinho salve.. Espero que tenham gostado\O/.