Estilos de Blockquotes (citas) originales en CSS para tu blog

¿Por qué habrías de quedarte con el estilo que viene por defecto en tu blog, ya sea porque se trate de un tema para WordPress, Blogspot o uno creado por tí mismo? Gracias a CSS podrás lograr algunos estilos originales para aplicarle a las citas de tu blog.

<blockquote> </blockquote> son los tags que usamos para encerrar citas de texto, pero hay muchas opciones en cuanto al diseño, algunas más “conservadoras” otras más radicales, artísticas o incluso bizarras. Conoce cómo lograrlos cambiando el código de los estilos CSS.

Cambiar las citas <blockquote> </blockquote> con CSS en tu blog

1. <blockquote class=boxquote>
   
   Cómo lograrlo:
   blockquote.boxquote {
border:1px solid #313131;
background:none;
margin:10px 38px;
padding:5px 15px;
}
   Como podrás ver este tipo de caja es muy fácil de lograr, sólo le hemos agregado un borde de 1 píxel al texto y un poco de espaciado. Sin embargo con esto conseguimos un diseño muy prolijo donde queda bien definido y jerarquizado el contenido.
2. <blockquote class=bigquote>
   
   Cómo lograrlo:
   blockquote.bigquote {
margin:10px 38px;
padding:0 0 0 50px;
border:none;
background:url(images/quote-top.gif) no-repeat;
}
blockquote.bigquote p {
padding:5px 50px 5px 0;
border:none;
background:url(images/quote-bottom.gif) no-repeat right bottom;
}
   Estas citas se logran con dos imágenes, una de apertura y otra de cierre. Lo interesante es que se puede poner absolutamente cualquier cosa, comillas dibujadas a mano, con pincel, algo abstracto, etc, etc, etc. Si quieres ahorrarte trabajo (¡perezoso! ^_^) puedes descargar las comillas del ejemplo haciendo clic aquí.
3. <blockquote class=borderquote>
   
   Cómo lograrlo:
   blockquote.borderquote {
border:solid #2f2f2f;
border-width:3px 0;
background:none;
margin:10px 38px;
padding:5px 15px;
}
   ¡Este tipo de citas es tan fácil de lograr que no podemos dejar de probarlas!
4. <blockquote class=dottedquote>
   
   Cómo lograrlo:
   blockquote.dottedquote {
border:none;
margin:10px 38px;
padding:5px 0 0;
background:url(images/dottedquote.gif) repeat-x;
}
blockquote.dottedquote p {
padding:5px 15px 10px;
background:url(images/dottedquote.gif) repeat-x left bottom;
}
   ¡Lo interesante es que podemos usar este recurso para poner cualquier imagen arriba y abajo!

Espero que apliques estos estilos en las citas de tu blog.

Fuente: EliteByDesign