Smart CSS quotes

Ok, we’ve all seen the testimonials and pull-quotes with the giant quotation marks that dwarf the actual text and we all want to know how to make them. There are a number of approaches, but I think this approach is particularly clever - using 2 divs and ONE image to design your pull-quote. This method also allows the text to be boosted to a degree only achieved at your local Council on Aging.

Step 1
Let’s get our images together first. You’ll want to produce an image using Photoshop where the end quote is to the left and vice-versa. This image illustrates it perfectly:

Step 2
Now your CSS will look something like this:

.testimony {    

width:550px;
background-image: url(img/quotes2.gif);
background-repeat: no-repeat;
background-position: -180px top;
margin:0 auto;
position:relative;
}  

.testimonial {


width:350px;
padding:30px 100px;
background-image: url(img/quotes2.gif);
background-repeat: no-repeat;
background-position: 450px bottom;
font-size:12pt;
color:#787878;
font-style:italic;
position:relative;
}

.testament {} /*style this differently for whoever the quote is attributed to*/

We have our .testimony as the exterior div which contains the start quote, pulled back to hide our end quote. The .testimonial class specifies our end quote at the bottom of that div which is nested inside. It is also used to specify any fancy typography going on inside these divs.

Step 3:
Now we’re ready to write our HTML.

<div class="testimony">
<div class="testimonial">
Awesome job lil dudes
<p class="testaments">Bill Johnson and sons, Larry and John</p>
</div>
</div>

This example is in use at Old City Web Services. Please feel free to boost the hell out of that text and see how it handles. Appreciate the economy of graphics.

If you use this technique link me up so I can see it in action.