QuoteBox is basically a simple quote wrapped in a div. It's designed purely using fonts and a bit of css magic. No images here. The effect simulates a standard popular print design technique, one that you see everyday in magazines and newspapers. As you can see, enlarged double quote marks are set behind the quote. This makes the quote more aesthetically pleasing and uses the quote marks as a design tool to make the quote look more attractive.
I did some online research to try to find an example that I could use but to no avail. Check out this article from smashing magazine. What I found was that a lot of designers used images for the quote marks, maybe using the quote marks as an image background. I wanted more control over the use of fonts, the width and height of the quote box, colour etc which using an image does not have. Some designed using the pseudo classes :before and :after, but still this limits the control over the positioning of the quote marks.
In the end I settled for coding it myself and you can grab the code below.
As QuoteBox is styled entirely with CSS, you have total control over colour, font and layout which means that it's perfect for any website.
Please note that on this occasion I have not coded for IE6+7, although I've had a quick look and all seems ok.
Please note that if the box is fluid - then the quote will break out if the box gets too thin.
Also, I have not used
<blockquote> as again this does not yield enough control for me.
If anyone wants to use the code please feel free. If you like it spread the word, and if it looks great - let me know I would love to see it.
For me, QuoteBox just makes the quotes stand out and make them look more visually appealing. Quotes laid out in this way are, afterall, used mainly as a promotion tool. To have a really good looking quote that sits pretty on a website in my opinion is the perfect way to engage the reader into the content and that is what we all want isn't it?