Hola

Con motivo de la anterior entrada del blog, me animé a cambiar un poco el aspecto que tenian las blockquotes en el blog, así que con un poco de css i dos imágenes de unas comillas lo cambié al aspecto que se puede ver actualmente en el post anterior.

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:5px 5px;
background-repeat:no-repeat;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:130%;
font-weight:normal;
margin:15px;
padding:20px 50px 5px;
width:70%;
color: #999999;
}


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:

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.