Javascript sounds like it has something to do with Java. It Doesn’t.

In fact, Java is to JavaScript as ham is to hamster.

- De Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
de Smashing Magazine de Brad Colbow.

P.S: El cómic es interesante, lectura recomendada.

En primer lugar, con photoshop o cualquier otro editor, hay que crear dos imágenes con las comillas. Usaremos preferiblemente los formatos png o gif, para poder poner el fondo transparente y así si en el algun momento queremos cambiar el color de fondo de la blockquote, nos será mucho más facil. Tras 5 minutos de photoshop he aquí las comillas:

Una vez tenemos las imágenes, procedemos a escribir el css que dará estilo a la blockquote. Como vemos, fijamos el color nergro como fondo, para seguir con la imagen del blog, y colocamos la apertura de comillas ( background-image:url(images/bq1.png); ) arriba a la izquierda ( background-position:left top; ) y sin repetir ( background-repeat:no-repeat; ). Cambiamos también la fuente de texto y el tamaño para diferenciarlo del texto normal. Finalmente mediante margin, posicionamos el blockquote un poco separado de los márgenes del post, diferenciándolo también del resto del texto y mediante padding:1px 50px; dejamos espacio para que se vean las imágenes de las comillas.

Aquí teneis el css completo del blockquote:

blockquote {
   background-color:black;
   background-image:url(images/bq1.png);
   background-position:left top;
   background-repeat:no-repeat;
   font-family:Georgia,"Times New Roman",Times,serif;
   font-size:130%;
   font-weight:normal;
   margin:15px;
   padding:1px 50px;
   width:90%;
}

Esto sería un ejemplo de lo conseguido hasta ahora:

Lorem ipsum dolor sit amet.

Como se puede ver, aun falta colocar el cierre de las comillas. Como no podemos poner más de una imagen de fondo, crearemos una clase blockquote del tag html parágrafo p de la forma: p.blockquote, en el cual encerraremos el texto del blockquote y mediante el cual colocaremos el cierre de las comillas.

En el css de esta nueva clase p.blockquote simplemente colocaremos la imagen mediante los atributos background y definirimos un márgen para darle visibilidad mediante padding como ya hicimos anteriormente, quedano el código css de la siguiente manera:

p.blockquote{
   background-color:black;
   background-image:url(images/bq2.png);
   background-position:right bottom;
   background-repeat:no-repeat;
   padding:0 40px 15px 0;
}

Finalmente, lo unico que tendremos que tener en cuenta es a la hora de escribir una blockquote hacerlo de la siguiente manera:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Sed egestas, ligula vel vehicula iaculis, est urna
   posuere augue, vitae cursus.

Y el aspecto final sería:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas, ligula vel vehicula iaculis, est urna posuere augue, vitae cursus.

Con este pequeño tip de css y haciendo volar la imaginación se puede dar vidilla a las blockquotes y que no se vean tan sosas. Espero que os haya servido.

Desde que empecé a trabajar en esto de las webs, hay una herramienta que se me hace indispensable, el Firebug.
Para el que no lo sepa es un plugin para Firefox, con el que puedes editar webs y su CSS en vivo ahorrandote de ir probando, recargar y demás.

El caso es que al abrir Firebug, aparece en la parte de abajo de la pantalla, cortándola en horizontal; así pues, con una pantalla 4:3 como la que tengo mi lugar de trabajo, todo perfecto, pero en casa, hace tiempo que abandoné el formato 4:3 y me pasé al panormámico, con lo que la division horizontal es un pelin más incómoda. Hasta hoy. Gracias a anieto2k he descubierto Widerbug, una alternativa de Firebug para pantallas panorámicas, dividiendo la pantalla en modo vertical, y haciendo el uso de Firebug infinitamente más comodo. Muchas gracias a anieto2k!