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.

Continue reading →