4 estilos de blockquote

Todos los blockquotes son personalizables, color, fondos y etc.

 ¡ Live preview ! 

Para aplicar cualquiera de ellos en tu blog:

Tema > Editar HTML > Ctrl + F y buscas ]]></b:skin>

Arriba de ]]></b:skin> copias y pegas el de tu preferencia.

ESTILO 1

blockquote{

border-left: 20px solid #C2E0FF;

border-right: 2px solid #C2e0ff;

border-radius:10px;

border-top: 2px solid #C2E0FF;

border-bottom: 2px solid #C2E0FF;

background:#F0F5FF;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border-left: 2px solid #C2E0FF;

border-right: 20px solid #C2E0FF;

border-top: 2px solid #C2E0FF;

border-bottom: 2px solid #C2E0FF;

background:#ffffff;

background-position:bottom right;

background-repeat:no-repeat;

padding :4px;]

-webkit-box-shadow: 0px 0px 12px #99CCFF;

-moz-box-shadow:    0px 0px 12px #99CCFF;

box-shadow:         0px 0px 12px #99CCFF;

}

 

ESTILO 2

blockquote{

border: 2px dashed #FFC2D6;

background:url(http://i.imgur.com/l5ROw.png);

padding :4px; 

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border: 2px dashed #FFC2D6;

border-radius:20px;

}

ESTILO 3

blockquote{

border: 3px solid #ccc;

background:#F0F0F0;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

background-image:url(http://i11.photobucket.com/albums/a168/evelynregly/

minigifs/teddybear1.gif);

background-position:bottom right;

background-repeat:no-repeat;

border: 3px ridge #ccc;

-webkit-box-shadow: 0px 0px 12px #b2b2b2;

-moz-box-shadow: 0px 0px 12px #b2b2b2;

box-shadow: 0px 0px 12px #b2b2b2;

}

 

ESTILO 4

blockquote{

border: 6px solid #EBD6FF;

border-radius:10px;

background:#F5EBFF;

display:block;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border-left: 2px solid #EBD6FF;

border-right: 10px solid #EBD6FF;

border-top: 2px solid #EBD6FF;

border-bottom: 10px solid #EBD6FF;

-webkit-box-shadow: 0px 0px 12px #DBB8FF;

-moz-box-shadow:    0px 0px 12px #DBB8FF;

box-shadow:         0px 0px 12px #DBB8FF;

}