Dan Johnson

Purveyor of fine quality web and graphic design, based in Whitstable.
This is my portfolio.

QuoteBox

Dan, I am really impressed - you have built Ramona a really excellent website - very professional looking, looks great. Beau - kentfolk.com

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 <q> or <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?

Dan, this QuoteBox really is excellent. You've solved all my problems. Here have some money!!!— Happy web designer

Download the zip file with all the HTML and CSS code here.

Here's the mark-up:

<div class="quotebox">
<span class="ldquo">&ldquo;</span>
<p>Dan, I am really impressed - you have built Ramona a really excellent website - very
professional looking, looks great.
<span class="quoteright">Beau - kentfolk.com</span></p><span class="bdquo">&bdquo;</span>
</div>

					
  • Enclose everything in a div with a class.
  • The double quotes have been enclosed within the inline element <span> also with its own class.
  • Use the entity for the left double quote &ldquo;
  • The actual quote is within a block level paragraph element.
  • I have set the author of the quote in a different styling to the main quote so this gets a span with its own class.
  • Close the paragraph and then the end quote gets its own span class. Note this is also using the entity bottom double quote. &bdquo; I decided on this as it seemed a bit easier to get the positioning right though obviously change this to suit your own requirements.
  • The overlap works because the quotes are set as block-level elements and absolutely positioned relative to the quote box div; they are then given their own z-index, along with the paragraph block level element. Everything is then styled accordingly. You may have to play around with the positioning if you change the font sizes but thats half the fun!
  • I've tried to be as cross browser friendly as possible. On my website I'm using css media queries so I've had to tweek the code a bit. I'm also using conditional statements for IE8 only. I have not tested for IE6/7.
  • QuoteBox is accessibility friendly.

Here's the CSS:

.quotebox-purple { 
	position: relative; 
	margin: 0 auto 10px auto; 
	width: 60%;								/* make this fixed if need be */
	min-height: 100px;					/* if fluid make sure to test in different browser widths and go responsive */
	background-color: #fbfbfb; 
	border: solid 1px purple; 
	border-radius: 15px; 
		-webkit-radius: 15px; 
		-moz-border-radius: 15px; 
	box-shadow: 4px 4px 4px rgba(0,0,0,.4); 
		-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,.4); 
		-moz-box-shadow: 4px 4px 4px rgba(0,0,0,.4); }

.quotebox-purple span.ldquo { 
	display: block; 
	position: absolute; 
	font-size: 260px; 
	line-height: 1em; 
	top: -20px;								/* tweek the absolute positioning of the left double quote to suit font and size */
	left: 0; 
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	color: #efe4ef; }

.quotebox-purple span.bdquo {			/* this is the bottom double quote */ 
	display: block; 
	position: absolute; 
	line-height: 1em; 
	bottom: 10px;							/* shift the positioning to suit font and size */
	right: 0; 
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	font-size: 260px; 
	color: #efe4ef; }

.quotebox-purple p { 
	padding: 30px;							/* you may want to shift the padding to suit the font */
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	line-height: 130%; 
	position: relative; 
	z-index: 5;								/* this makes sure the quote is on top of the quote marks */
	color: #483d8b; }

.quotebox-purple p span.quoteright { 
	display: block;						/* this is the author */
	font-weight: 600; 
	text-align: right; }
			

See QuoteBox in action on one of my websites.

Hope you like my QuoteBox. If you use it may it serve you well. Show me and I'll put it in a gallery. I would love to know what you think.

Back to Code