Blockquote em Hover (Exclusivo)

Olá gente,

 hoje trouxe mais um tutorial para vocês, pois estou terminando o chocoMapa e quero mais tutoriais para colocar lá, pois temos muito poucos, hoje trouxe um tutorial super legal, de um blockquote em hover super lindo.

Live Preview

ps.: não reparem no blog de live preview, é que tenho preguiça de editá-lo e deixá-lo bonito.

Créditos aqui.

Cole isso acima de ]]></b:skin>:

blockquote {

border: 3px outset #B03060; /* Cor da Borda */

background: #FFF0F5; /* Cor do Fundo */

padding: 5px;

font-size: 12px; /* Tamanha da Fonte*/

color: #B03060; /* Cor da Fonte */

text-align: justify;

}

blockquote:hover {

border: 3px inset #9400D3; /* Cor da borda Hover */

background: #F8F8FF; /* Cor do fundo Hover */

}

Pronto agora é só editar as partes em negrito, que são as cores, e se você não quiser com esse efeito de 'entalhado' no lugar onde está  itálico você substitui por: 

                                                             #Estilos de bordas:

Borda Solid 
Código: Border: 1px solid #000000;

Borda Dotted 
Código: Border: 2px dotted #000000;

Borda Dashed 
Código: Border: 1px dashed #000000;

Borda Groove 
Código: Border: 3px groove #aa3cff;

Borda Inset 
Código: Border: 3px inset #aa3cff;

Borda Outset 
Código: Border: 3px outset #aa3cff;

Borda Double 
Código: Border: 3px double #000000;

E para usar o blockquote para que não sabe, é só clicar nessa figura para aumentar:

Super fácil né?! e fica lindo ^_^ quero saber o que acharam.