Saturday 22 April 2006

Visual interest - Pullquotes

Sometimes text needs a little help to make it more interesting. Graphics works miracles in this department. But often you don't have a graphic that you can use. Jazzing up your text is an excellent option. I discovered a way to liven

Mandarin Design
"The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting."

things up a bit with something called "Pullquotes" from Mandarin Design. The colored box on the right side of this post with content is an example of a pullquote. It very much resembles a magazine layout. This method works especially well on longer posts. Here is another example that I put in a post, The Category Adventure.

Add this to your style sheet or add it to the HEAD section of your template:
.pullquote {
width: 145px;
background:#A3C586;
color:black;
float: right;
border:1px dotted #5B7444;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}

Then add this to your post itself:
<p class="pullquote">
<span >Mandarin Design: Easy CSS Pullquotes</span>
<span >"</span>
The exact placement of the pullquote is up to you but you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting.
<span style="font-size:large;">"</span>
</p>
Play around with this until you find colors and fonts that you like. The color in the box can easily be changed by modifying the code in the style sheet "background:#A3C586;" to whatever color you want. I changed the background color to a green and the 'heading' font inside the pullquote to white. The possiblities are endless. There are more pullquotes at Mandarin Design if you would like to try another style.

post signature

No comments:

Post a Comment