Visual interest - Pullquotes...a pure CSS approach

It looks like others are noticing pullquotes,offset quoting box or call out boxes. I'm an advocate of a blog being a bit different from every other blog out there. A good design makes a statement. It will draw your visitors interest, and they will spend more time on your blog...reading your great content. A pullquote is just another way to add design to your blog.

Pullquotes Highlight important quotes or draw attention to a point. Either way, it is sure to catch your reader's interest.

There was a post over at Freshblog with another interesting hack for pullquotes. In reading that post, I followed a link to Aditya's Thought That Counts and found an amazingly simple CSS approach. The look is a little different in different browsers. In Firefox the corners are rounded. In IE the corners are square. I don't know how it appears in any other browsers.

To use this method, there are two steps involved.

1. Add this code to your template between the <style> tags:

.offset {
float:left;
margin:7px;
background-color:#7C81A1;
color:white;
padding:10px;
width:100px;
-moz-border-radius:10px;}
.offset em{color:yellow;font-style:normal;display:block;font-weight:bold}
.offset span:before, .offset span:after{content: '"'}
.left {float:left;margin-left:0px !important}
.right {float:right;margin-right:0px !important}

2. Add this code in the post itself:

<div class="offset right"><em>Pullquote Title</em><span> Your most clever and witty quote.</span></div>

The best part is you can tinker with this code until it fits in the design of your blog. You can change the background color,text color, title color, font weight and position of pullquote. Thanks to Aditya for this CSS pullquote!

If you are interested in seeing another method, check out this post...Visual Interest - Pullquotes.