Stylish Quotes in Blog Posts

I found a few CSS tips and tricks to format (in my view) prettier quotes in your blog posts. For example:

This is a quote.


For the above, I added this CSS:

blockquote {
  background: transparent url(quoleft.png) left top no-repeat;
}

If you want to add a closing quote to it as well, add this:

blockquote p {
  padding: 0 48px;
  background: transparent url(quoright.png) right bottom no-repeat;
}

If you use <P> inside the quote, you may get additional quote signs, so use a couple of <BR /> instead.

2 Comments

Comments have been disabled for this content.