Fancy Pull Quotes.

A pull quote is a quoted snippet from an associated article that is used to highlight a bit of the post. Pull quotes are the most effective element for adding improved scanability to your text, and by extension the perception of your sites usefulness.

Here’s the basics. First, create a new class in your themes style sheet, call it .quote. This is the base of how your pull quotes will be formatted and positioned. Specify whether you want it to float to the left or right, what margins you like, and the typeface properties. Once you’ve saved the CSS file all you have to do is select your quote, and place it in a div with the new class we just created. From there you can go through and adjust the settings to fine tune your quotes presentation.

If you really want to get fancy you can even add swooshy curly quotes around it. To do this we create another class called .curly in our style sheet and specify again how we’d like it too look. Then you add a span with the curly class around the quote marks. Take note in the example below that you use the proper code for the quotes and not just the quote key on your keyboard.

And if you want to get really crazy you can add a citation, using your style sheet and the cite tag similar to the last steps.

Here it is all together.

<div class="quote">
<span class="curly">&#147;</span>
So funny. So smart. If you're anywhere near New York you have to see this show.
<span class="curly">&#148;</span>

<cite> - <a href="http://www.keithandthegirl.com" title="www.keithandthegirl.com">Keith and The Girl</a> (Episode 572, <i>Keith's New Job</i>)
</cite>
</div>

.quote {
font-size:1.8em;
line-height:1.25;
padding:40px;
float:right;
width:250px;
}

.quote cite{
display:block;
float:right;
font-size:0.4em;
line-height:1.7;
margin:15px 10px 50px 0;
}

.curly {
color:#888;
font-family:georgia, serif;
font-size:100%;
}

Which comes out looking like this. That’s all there is to it.

Written by John Leschinski from Leschinski Design
Posted on May 3rd, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

5